+- MyBB Codes (http://www.mybbcodes.com)
+-- Forum: Mods Database (/forumdisplay.php?fid=4)
+--- Forum: Plugins for 1.4.x and 1.6.x (/forumdisplay.php?fid=5)
+--- Thread: Enhanced Social Share buttons Tutorial without plugins (/showthread.php?tid=6625)
Enhanced Social Share buttons Tutorial without plugins - bitsbb01 - 09-11-2017 09:43 PM
So lets start with :
1. Editing the Global.css :
Go to your theme > global.css > advanced mode
Add the following code at bottom of your global.css
Code:
Code:[Highlight]
.socialshare {
padding: 5px;
border-radius: 2px;
margin-top: -11px;
}
.sst {
background: #51CDF6;
border: 1px solid #4DB9D5;
padding: 5px;
text-align: center;
vertical-align: top;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
float: left;
margin-right: 5px;
}
.ssg {
background: #D4503F;
border: 1px solid #CE0E0E;
padding: 5px;
text-align: center;
vertical-align: top;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
float: left;
margin-right: 5px;
}
.ssf {
background: #4A65A1;
border: 1px solid #1D59A5;
padding: 5px;
text-align: center;
vertical-align: top;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
float: left;
margin-right: 5px;
}2. Editing the Templates :
Go to your theme templates > Showthread templates > showthread template.
Find :
Code:
Code:[Highlight]
<body>
{$header}
{$pollbox}Add this code just after that
Code:
Code:[Highlight]
<div style="float: left" class="socialshare">
<span class="sst"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="en" >Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></span>
<span class="ssg"><script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'en'}
</script>
<g:plusone size="medium" href="{$mybb->settings['bburl']}/showthread.php?tid={$tid}"></g:plusone></span>
<span class="ssf"><iframe src="//www.facebook.com/plugins/like.php?href={$mybb->settings['bburl']}/showthread.php?tid={$tid}&send=false&layout=button_count&width=130&show_faces=true&action=like&colorscheme=light&font&height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:20px;" allowTransparency="true"></iframe></span>
<span class="ssf"><a title="Share On Facebook" href="http://www.facebook.com/share.php?u={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank" style="color: #FFF;"><img src="images/fb.png" alt="Facebook" style="padding-right: 5px;padding-bottom: 2px;vertical-align: middle;"/> <b>Share</b></a></span>
</div>
<br />here is a preview of what you do : link
Thanks go to Envira for this idea and code.