"Do You Like This Story" - A Widget For Blogs Version-2

blogger widget do you like thisI just took a simple HTML div box and inserted inside it Facebook Like and send button along with Twitter follow button to create version 2 of one of our popular sharing widgets i.e. "Do You Like This Story" The first version included social media sharing buttons along with a subscription box and Facebook like button and it was designed to be added just at the bottom of blog posts but this version 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. Lets first see a demo:


Live Demo

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

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! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

29 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Respected sir,

    I want to start a gaming blog. Can you please provide me a copy of you blog template? I just love this template. I promise to provde a back link to your blog on every page of my blog. Thanks

    ReplyDelete
  2. Thanks master..
    I will try it

    ReplyDelete
  3. @Gagan

    Hey Gagan Check Out Revolution Church Blogger Template http://www.rockingtemplates.com/2012/01/revolution-church.html Its somewhat matching BTW you can change the template colors by yourself

    ------------------------
    RockingTemplates.com

    ReplyDelete
  4. "designed to be added just below blog post titles"

    I am against this because we are asking the reader "Do You Like This Story" before he/she even starts reading the story.

    ReplyDelete
  5. how to implement it in wordpress??
    it appears in sidebar not below post title
    reply plzz

    ReplyDelete
  6. @yAhyA

    Why not?
    Just put the code below <data:post.body/> instead of above and all done :)

    ReplyDelete
  7. hi nice blog and article....i love your blog..
    my blog is http://www.infotilla.com/

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Haha Mohammad, Bhavesh has a point. The sentence can be corrected which says "designed to be added below posts"

    ReplyDelete
  10. Asalam alekum! Your blog's facebook sharing options have a bug and mine also has this bug:) So please repair yours and also tell me how to repair it.

    ReplyDelete
  11. Thank you for this trick. This code works in my sidebar:)

    ReplyDelete
  12. Assalam..
    Ziarah dari Teratak Usang..

    ReplyDelete
  13. @Gagan
    I would love to but the stylesheet is a copyrighted one. Though you can download our mbt church theme from the download zone page and customize it to exact same design. Many have already done that in replicating MBT design.

    @bhavesh
    Oh yes clever you. YOu are right but just to keep things a little different I added it below post title. :)
    Sometimes people have the habit of clicking the like button even without reading the post so better keep it in front.

    @Faiz
    I am using genesis framework and they give a hooks plugin to do that. Since you use a custom wordpress template therefore you will have to manually add it to your blog using FTP filezilla.

    @Raheem
    I think you are looking for this: 14 ways to create Blockquotes in blogger :)

    @Amit
    Sentence is correct buddy. This widget is willingly being added just below post titles in order to increase like rate. :>

    @Liaqat
    Really? Like what qazi could you kindly share a screenshot?

    @ranchandfarmsupply

    Yes sure you can add it to sidebar too. :>

    @Faizan @Iza
    Most welcomed pal. :)

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Hi Mustafa,

    Is there any way to link "Like" button to Facebook fan page in Blogger dynamic view & convert "Tweet" button into "Follow" button?

    ReplyDelete
  16. Its Not Available for Wordpress ?
    I want to add this widget on my blog justtipsandtricks.com how can i add it on wordpress blog ?

    ReplyDelete
  17. I check you sharing options once again and they are working perfectly now. But I am still having problem. The Facebook Like breaks down the post only into the url. This is how it looks http://bit.ly/vYWGto

    ReplyDelete
  18. This is a fabulous widget. Instantly catches the reader's eye.

    ReplyDelete
  19. it's not too late to say thanks...More Power!

    ReplyDelete
  20. hi, i have 2 tell me wish one is?

    ReplyDelete
  21. hi, the widge don't work in my blog

    ReplyDelete
  22. @Mustafa ! Hey freind i am a regular reader of ur blog. MBT. i just need to know that how can i improve SEO of my blog and attract more traffic and also give some advice so that i can improve my blog. my blog is www.blogville.in

    ReplyDelete
  23. Anyway to add this after the post, so it replaces the small share buttons?

    ReplyDelete
  24. Please HELP! i can see 4
    highlited!! wt 2 do?

    ReplyDelete
  25. Hello. I dont have expand my widget templates in my html. How do i deal with that? new blogger here :) chiconthedot.blogspot.com thanks so much!

    ReplyDelete
  26. Hello, Mohammad! this widget worked absolutely fine on my blog, but I want to ask you is there any way by which I can place this widget at the end of my posts?
    TY :)

    ReplyDelete