Sunday 26 October 2014

couch mode print story

Labnol like Facebook like box for your Blogger Blog or any kind of website

Here you can get the codes of labnol like Facebook like box for your blogspot blog or any other website. If you have a website then this is a must have element for your site. After a long work I created this thing so here I am posting this for you guys.
Screenshot of Labnol like Facebook like box
Screenshot of Labnol like Facebook like box

As I already know that most of the visitors who will visits this blog are blogger and websites owners, I don’t need to introduce Mr. Amit Agarwal, the blogging legend. He and his sites (labnol.org, ctrlq.org and etc.) they all are awesome. If you have visited his site you may have seen that the design of that sites Facebook like box is very awesome so today I thing that that is something that many guys will want to use.so here is the code for that awesome looking Facebook like box. To get started, copy the code below and paste it anywhere inside your website template. Change the URL (colored in red) to point to your own Facebook page and you're done.

Here Is the Coding Stuff >>

<style>.MostUsefulTricksFB{
width:320px;height:150px;border-radius:3px;position:relative;background-color:#f4f4f4;padding:5px 10px 15px 0;max-width:96%}.MostUsefulTricksFB,.MostUsefulTricksFB:before,.MostUsefulTricksFB:after{background:#f4f4f4;border:1px solid #ccc}.MostUsefulTricksFB:before,.MostUsefulTricksFB:after{content:"";position:absolute;bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.MostUsefulTricksFB:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ccc}
</style>
<div class="MostUsefulTricksFB">
<div style="height:160px;overflow:hidden">
<fb:like-box href="https://www.facebook.com/YourPage" 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.MostUsefulTricks.com/' target='_blank' title='Blogger Widget by Most Useful Tricks'>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>

How to Add this in Your Blogger Blog

Step1: go to your blogger blogs dashboard
Step2: go to layout
Step3: add a gadget and then choose HTML or JavaScript
Step4: Copy the code from my website give change YourPage to your Actual Page URL and Paste It
Step5: Save It
You Have Done It.

Conclusion : >>

This box is recommended for very body out there. But honestly if I say then one bad news is “the loading time of this Facebook like box” is pretty high. That means it will increase your sites loading speed. About 1-2 seconds. But I don’t think it matters very much as we all do blogging for our position. Please comment if you need any help regarding this code or the like box. The entire code is pretty short but please don’t edit it.

Labnol Like Facebook Like Box
Reviewed by Sagar Basak on Oct 26 2014
Rating: 3.9



0 comments:

Post a Comment

Note: only a member of this blog may post a comment.