MyBB Community Forums

Pages: 1 2

Hello guys,
Its been a long time since i have posted any tut,
Here is one for you.

Original Topic written for www.myskins.org

As said in the title, i present you enhanced social share buttons in Show Thread/post/topic without a plugin.

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

.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 :

<body>
{$header}
{$pollbox}

Add this code just after that

<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}&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;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

Live Demo : Click

Hope you guys like it Smile

P.S: Please give credits to me, if you post it on any other site.
Regards,

Use display:inline; to align them with the rating.

Where exactly do we have to use display:inline; to align them with the rating? Does anybody know?
Anyway great tutorial!

In one of the CSS selectors. Not sure which one exactly.

Hello!

How to choose the thumbnail that appears on facebook

can you post some screenshot?

(2013-01-18, 02:40 AM)envira Wrote: [ -> ]here is a preview of what you do : link

Click the link.

Thanks for sharing it. Now a days, this share bar is common on all the sites.

Thank you for sharing, worked great.

Thank you!
Works fine!

Pages: 1 2

envira

Frank.Barry

BlueNinja

ElectricShock

sc4t

caygri

Destroy666

freedntalk

Allan

mtangoo