March 11, 2012

"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


    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=""></script><fb:like send="true" width="450" show_faces="false"></fb:like>

<a class='twitter-follow-button'  href='' rel='nofollow'></a>
<script src='' type='text/javascript'></script>



  • 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="" 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! :)

Need Quick Help within 24 Hours? ASK NOW

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 »

37 comments : Post Yours! Read Comment Policy ▼
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

  2. @Gagan

    Hey Gagan Check Out Revolution Church Blogger Template Its somewhat matching BTW you can change the template colors by yourself


  3. "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.

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

  5. @yAhyA

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

  6. hi nice blog and article....i love your blog..
    my blog is

  7. This comment has been removed by the author.

  8. Assalam O alekum Mustafa Bhai I just Wanna say that You Didn't Share That How to get Coding Frame Just Like yours MBT CODING in which you had put codes or HTML please Replay me as soon as possible.

    RaheemUllah Khan
    Youngest Blogger Of Pakistan.

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

  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.

  11. This comment has been removed by the author.

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

  13. Thank You Very Much Sir Allready using it but version is old one soon try it thanks once again Syed Faizan Ali Recently Posted How To Convert Wordpress Blog To Blogger

  14. Assalam..
    Ziarah dari Teratak Usang..

  15. @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.

    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.

    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.

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

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

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


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

    @Faizan @Iza
    Most welcomed pal. :)

  16. This comment has been removed by the author.

  17. Hi Mustafa,

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

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

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

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

  21. I added the code but the Facebook portion is not showing up for me. No idea if it is my OS, browser or what. Wish I could see it.

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

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

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

  25. @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

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

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

  28. plz can any 1 give cracker ISO burner????
    Hacking Tricks
    plz help me i need it

  29. Not happening on my blog :(
    Please help

  30. many tricks ur site im try but dost work. how to use it. can teach me?

  31. Doesn't work for me...
    could you take a look please ?

    Maybe update the walkthrough ?
    Also is it possible to have that at the end of the post and not beginning ?


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

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