Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Enhanced Social Share buttons Tutorial without plugins
#1
Smile 
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

Code:
.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:
<body>
{$header}
{$pollbox}


Add this code just after that

Code:
<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,
[Image: mnvhXxj.png]
Reply
#2
Use display:inline; to align them with the rating.
Reply
#3
Where exactly do we have to use display:inline; to align them with the rating? Does anybody know?
Anyway great tutorial!
Reply
#4
In one of the CSS selectors. Not sure which one exactly.
[Image: MaDuhur.png]
by Dukhor, IcyBoards Community Forums
Reply
#5
Hello!

How to choose the thumbnail that appears on facebook
Reply
#6
can you post some screenshot?
[Image: k224gi.jpg]
Reply
#7
(01-18-2013, 02:40 AM)envira Wrote: here is a preview of what you do : link

Click the link.
Reply
#8
Thanks for sharing it. Now a days, this share bar is common on all the sites.
Reply
#9
Thank you for sharing, worked great.
Host-Hunters- Free advertisement for hosts.
KnD Hosting-Affordable and Reliable.
Reply
#10
Thank you!
Works fine!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)