Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger Tutorial » Blogger Widget » How-to » Add Labnol.org style Facebook Like Box to Blogger

Add Labnol.org style Facebook Like Box to Blogger

Facebook is now a part of our life. There are million of peoples who addicted with it, and they can't live without opening Facebook. Facebook has number of disadvantages and advantages that we all know so, let's look into just advantages of Facebook and get benefit from it. You can be benefited by Facebook if you are a blogger. Just create a fan page of your blog on Facebook and increase likes. and then share the stuff you write on your blog with your fans.

Labnol.org style Facebook Like Box Widget for Blogger

One of the fastest way of increasing your Facebook likes is that you have to put a like box widget to your blog. Facebook like box widget will help you to convert your blog visitors into your fans at same time it will be useful to make your one time reader to returning readers of your blog.

Generally, you can find Facebook like box widget from Facebook that officially provides codding for it. but it looks very simple that most of the blogger are not satisfied with it and uses modified with CSS facebook like box to their blogs. You may noticed 3D style facebook like box on Labnol.org ? it looks beautiful and stylish, i just love it, and also i am using the same Facebook like box on this blog that you can see at the top on sidebar of this blog.

Also see : Add Floating Social Sharing Buttons Below Blogger Post Titles

If you would like to have the same Facebook like box on your blog as well then follow the simple and easy steps given below :

How to Add This to Blogger?

Go to Blogger Dashboard > Layout > Add a Gadget > Choose HTML/Javascript from the list
Copy and paste below code into it

<style>.mdFB{
width:320px;height:150px;border-radius:3px;position:relative;background-color:#f4f4f4;padding:5px 10px 15px 0;max-width:96%}.mdFB,.mdFB:before,.mdFB:after{background:#f4f4f4;border:1px solid #ccc}.mdFB:before,.mdFB:after{content:"";position:absolute;bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.mdFB:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ccc}
</style><div class="mdFB"> <div style="height:160px;overflow:hidden"> <fb:like-box href="https://www.facebook.com/bloggerwidgetgenerators" data-width="340" data-height="189" data-show-faces="true" data-show-border="false" data-stream="false" data-header="false"></fb:like-box> </div></div><div id="fb-root"></div><span style='font-size:11px;position:absolute;'><a href='http://www.bloggerwidgetgenerators.com/' target='_blank' title='Blogger Widget by Blogger Widget Generators'>Blogger Widgets</a></span>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=549510788403215";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


Now, Replace my Facebook fan page URL with yours and Finally, Save your widget

That's it !!
Add Comment
Blogger Tutorial Blogger Widget How-to

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • How to Add A Transparent Notification Bar To Blogger
    How to Add A Transparent Notification Bar To Blogger
  • Xmas "Flying Santa Claus" Widget for Blogger
    Xmas "Flying Santa Claus" Widget for Blogger
  • Supreme V2 ( Version 2) Responsive Blogger Template Download for free
    Supreme V2 ( Version 2) Responsive Blogger Template Download for free
  • How to Add Animated Flying Android Man Widget to Blogger
    How to Add Animated Flying Android Man Widget to Blogger
  • Create a Free Blog with Blogspot.com
    Create a Free Blog with Blogspot.com
  • How to Embed YouTube Videos In Blogger Posts
    How to Embed YouTube Videos In Blogger Posts
  • Use A Drop Cap Large First Letter In Posts On Blogger
    Use A Drop Cap Large First Letter In Posts On Blogger
  • Download Best and SEO Friendly Blogger Templates for your Blog
    Download Best and SEO Friendly Blogger Templates for your Blog
  • Flash SWF file Embed Code Generator
    Flash SWF file Embed Code Generator
  • Simple Recent Posts Widget for Blogger / Blogspot
    Simple Recent Posts Widget for Blogger / Blogspot

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ►  2015 (28)
    • ►  November (1)
    • ►  September (7)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
    • ►  April (3)
    • ►  March (3)
    • ►  February (5)
    • ►  January (5)
  • ▼  2014 (105)
    • ►  December (4)
    • ►  November (6)
    • ►  October (1)
    • ►  September (8)
    • ►  August (12)
    • ►  July (14)
    • ►  June (5)
    • ►  May (11)
    • ►  April (5)
    • ▼  March (15)
      • jQuery Facebook Popup (Like Box Widget) V2
      • How to Open All Blogger Links in New Tab Using CSS
      • Add Labnol.org style Facebook Like Box to Blogger
      • How to Add Custom jQuery Lightbox to Blogspot blog
      • How to Add Animated Flying Android Man Widget to B...
      • How to Add Breadcrumb to Blogspot Blog
      • How to Add Official Contact Form to a Specific Pag...
      • How to Add Official Contact Form Widget to Blogspo...
      • Add Mashable Style Social Subscription Widget to B...
      • Android Act - Download Free Responsive Blogger Tem...
      • Beautiful Social Count Widget for Blogger Blogspot
      • How to Add Smileys & Emoticons inside Blogger Comm...
      • Add Star Ratings to your Blogger Product Review Posts
      • How to Add A Transparent Notification Bar To Blogger
      • How to Add CSS Drop Down Menu To Blogger
    • ►  February (24)

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates