Wednesday, March 14, 2012

Simple Facebook Like Box for your blog

You all are enjoying my previous post on PBT. Now, I have come with simple but awesome facebook like box for you. I saw this Facebook like box on Digital Inspiration. After a lot of hard work i have designed it for your blog. I have tried to minimize the coding of this Like box which helps to load quickly. Many blog add simple Facebook like box but with the help of this you can make your blog something different and get more Facebook followers.


Simple steps to add Simple Facebook Like Box

  1. Go to blogger > design > Page Element
  2. Add a Gadget where you want Facebook Like box (Like sidebar)
  3. paste the following code in Gadget
<style type="text/css">
/* PBT Customize Facebook Like Box */
.PBTFB
{width:280px;height:150px;border-radius:3px;position:relative;background-color:#f4f4f4;padding:5px
10px 15px 0;margin-left: 10px;
}
.PBTFB,.PBTFB:before,.PBTFB:after{background:#f4f4f4;border:1px
solid #ccc}.PBTFB:before,.PBTFB:after{content:"";position:absolute;bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.PBTFB:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ccc}
</style>
<div class="PBTFB">
<div style="height:160px;overflow:hidden">
<fb:like-box href="http://www.facebook.com/probloggingtools" data-width="300" data-height="189" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span>
<iframe id="fdc6e0618" name="f2cf41b5fc" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 189px; width: 300px; " class="fb_ltr"
src=http://www.facebook.com/plugins/likebox.php?api_key=200726879962149&amp;border_color=%23f4f4f4&amp;channel=https%3a%2f%2fs-static.ak.fbcdn.net%2fconnect%2fxd_proxy.php%23cb%3dfb784b5f%26origin%3dhttp%253a%252f%252fwww.probloggingtools.com%252ff2af5e41a%26relation%3dparent.parent%26transport%3dpostmessage&amp;colorscheme=light&amp;header=false&amp;height=189&amp;href=http%3a%2f%2fwww.facebook.com%2fprobloggingtools&amp;locale=en_us&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=300"></iframe></span></fb:like-box>
</div>
</div>
      4. Change probloggingtools to your Facebook Page name/id.
      5. Save the Gadget and Visit your blog.

You can also adjust width of Like box in case of your sidebar is small or big. Here I have set Width 300px in brown color.

Credits

This Customized Facebook Like box is developed by PBT. If you want to share this coding, you have to give credits to PBT by attaching a link back to this blog.

Need ? Help

If you face any problem, feel free to ask, just do comment your view, I will try to give your reply in time.

0 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...