Tuesday 13 March 2012

Adding "Do you like the story" widget


This widget is kept simple and clean and designed to be added just below blog post titles in sub pages. This plugin would work with both BlogSpot and wordpress blogs. The tutorial below is aimed for blogger users only. Wordpress users may simply add the code in step#5 without the purple lines just below their post titles manually. 

Advantages of This Sharing widget

Since the area just below post titles has highest page impressions therefore it will always catch the attention of every single visitor thus leading to an increase in the number of your Facebook and Twitter followers. You can even set the like button to link to your Fan Page in order to increase your Fan following massively. We will learn below how to code it.

Add This Widget To Blogger

Follow these easy steps:
  1. Go To Blogger > Design > Edit HTML
  2. Back up your template
  3. Click the "Expand Widget templates"
  4. Search for  this
<data:post.body/>
    5.   Just above it paste the following code:
<b:if cond='data:blog.pageType == "item"'>
<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/tw' rel='nofollow'></a> 
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>
  • Replace tw 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/tw" data-send="true" data-width="450" data-show-faces="true"></div>
  • Replace tw with your Facebook username. If you don't have a Facebook username then get one from here.
       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.

No comments: