Add custom social media share icon buttons in phpBB




Self reference article: how to add responsive social media share icons on your forum for each page.

HTML to add to /styles/stylename/template/over_header.html, right under <div id="page-header" class="page-width">

 <div id="socialshare" data-expendable="yes">
 <div>
 <a class="twittersharebutton" href="http://twitter.com/share?url={SOCIAL_URL}" target="_blank">t</a>
 <a class="facebooksharebutton" href="http://www.facebook.com/sharer/sharer.php?u={SOCIAL_URL}" target="_blank">f</a>
 <a class="googlesharebutton" href="https://plus.google.com/share?url={SOCIAL_URL}" target="_blank">g</a>
 </div>
 </div>

CSS to add at the bottom of <head> section of same file:

<style>
 #socialshare {
 z-index:20;
}
a.twittersharebutton, a.facebooksharebutton, a.googlesharebutton {
 color:white;
 text-align:center;
 text-decoration: none;
 font-family:tahoma;
 vertical-align:bottom;
}
a.twittersharebutton {
 background-color:#55acee;
}
a.facebooksharebutton {
 background-color:#3b5998;
}
a.googlesharebutton {
 font-family:georgia;
 background-color:#dd4b39;
 line-height:60% !important;
}
#socialshare a:hover {
 color:white;
 filter:saturate(3);
}
@media (min-width: 1100px) {
 #socialshare {
 position:absolute;
 text-align:center;
 left:-55px;
 }
#socialshare>div {
 width: 50px;
 position:fixed;
 top:10px;
 }
a.twittersharebutton, a.facebooksharebutton, a.googlesharebutton {
 display:block;
 margin-bottom:10px;
 width:50px;
 height:50px;
 font-size:50px;
 line-height:51px;
 border-radius:6px;
 }
 
 #page-header {position:relative;}
}
@media (max-width:1099px) {
 #socialshare {
 bottom:2px;
 left:2px;
 position:fixed;
 }
a.twittersharebutton, a.facebooksharebutton, a.googlesharebutton {
 display:inline-block;
 margin-right:10px;
 width:30px;
 height:30px;
 font-size:30px;
 line-height:31px;
 border-radius:4px;
 }
}
</style>

Code to add in /includes/functions.php, in the template variable assignment (look for LAST_VISIT_DATE)

'SOCIAL_URL' => urlencode(generate_board_url() . '/' . $user->page['page']),

Reload, all done!




Leave a Reply

Your email address will not be published. Required fields are marked *