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!