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

<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 »

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

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

    ReplyDelete
  5. @yAhyA

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

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

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

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

    Regards,
    RaheemUllah Khan
    Youngest Blogger Of Pakistan.
    http://www.mytrickscollection.com

    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. This comment has been removed by the author.

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

    ReplyDelete
  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

    ReplyDelete
  14. Assalam..
    Ziarah dari Teratak Usang..

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

    @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
  16. This comment has been removed by the author.

    ReplyDelete
  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?

    ReplyDelete
  18. 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
  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 http://bit.ly/vYWGto

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

    ReplyDelete
  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.
    www.inthekitchenwithaudrey.com

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

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

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

    ReplyDelete
  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 www.blogville.in

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

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

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

    ReplyDelete
  29. Not happening on my blog :(
    http://wild-clicks.blogspot.in/
    Please help
    aditya.behere@gmail.com

    ReplyDelete
  30. many tricks ur site im try but dost work. how to use it. can teach me?
    http://duniawanitasekarang.blogspot.com/

    ReplyDelete
  31. Doesn't work for me...
    could you take a look please ?
    http://www.stanalekseevphotography.com/2013/10/a-little-about-me.html

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

    Thanks
    Stan

    ReplyDelete
  32. 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

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!