<div style=" height:80px; background:rgb(232, 240, 249); border: 1px solid rgb(171, 210, 233); padding: 10px; margin: 10px 0pt 10p 0px;">
<p style="color: rgb(59, 89, 152); margin: 0pt 0pt 5px; font: bold 1.3em helvetica,arial,verdana;">Do you like this story?</p>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like send="true" width="450" show_faces="false"></fb:like>
<a class='twitter-follow-button' href='http://twitter.com/mybloggertricks' rel='nofollow'></a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>
- Replace mybloggertricks with your twitter username
- By default the like button will count hits for the post link only. This will cause your individual posts to be liked and circulated via Facebook. But if you wish to increase your Fan followers then you can fix the like button to count hits for Fan Page only by replacing the yellow highlighted code with the following:
<div class="fb-like" data-href="http://facebook.com/bloggertricks" data-send="true" data-width="450" data-show-faces="true"></div>
- Replace bloggertricks with your Facebook username. If you don't have a Facebook username then get one from [a href="http://facebook.com/username" rel="nofollow" target="_blank"]here[/a].
6. Save your template and you are all done!
Visit any of your blog posts to see it hanging just perfectly below post title. The widget is coded such that it will appear only in post pages and not on homepage. If you wish to show it even on homepage then delete the purple bolded lines of code.
Need help?
If you need any help related to its customization then let me know. I have set the background colours such that it will suit templates with light backgrounds but if you are using a dark background and wish to change the font colours and borders of this sharing widget then let me know so that I could guide you via comments. Peace and blessings pals! :)
Post a Comment