We are working on our blog, thats why we stopped Posting further. Sorry for Inconvenience. Like Us on Facebook!

Ad 468 X 60

9/10/2013

Widgets

How To Add a Facebook Like Box Without The Branding

Learn how to customize the layout of the Facebook Like Box with simple CSS styles. You can even remove the Facebook branding from the Like Plugin.The Facebook Like box placed on your website /blog is probably the easiest way to attract new fans to your Facebook page.
And the same rectangular box can even help convert casual visitors to your site into regular ones. That’s because the photo pile inside the box will show visitors pictures of their friends who are already fans and when they seen a known face, it could increase their relative interest in your site.

Customize the Facebook Like Box with CSS

Facebook offers a simple Like Box Plugin that you can easily integrate into your website using either JavaScript or IFRAME. You can customize the border color, the height and the width of the Like Box but, officially, nothing more.

That said, if you would like to add a background color to the Like Box to better match your site’s color theme or if you would like to completely remove the Facebook logo and other branding from the box to make it less crowded , you can easily do that with the help of CSS.


  • To get started, copy the code below and paste it anywhere inside your website template. 


<---Facebook Like Box without the Branding by SahiTech---><style type="text/css">.SahiTechFBOuter {background-color:#F4F4F4width:250px; padding:10px 0 10px 10px;height:250px;border:1px solid #CCCCCC;}.SahiTechFBInner {height:250px;overflow:hidden; }</style><div class="SahiTechFBOuter"><div class="SahiTechFBInner"><div class="fb-like-box" data-width="245" data-height="290data-href="http://www.facebook.com/SaahiTechdata-border-color="#F4F4F4" data-show-faces="true" data-stream="false" data-header="false"></div> </div></div><div id="fb-root"></div><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_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

Customization:

  • Change SaahiTech to your own Facebook username.
  • Change Background color of our Facebook Like by changing #F4F4F4 with any other web color.
  • You can  change the width and height values defined in Pink Colour.
  • The above example uses the JavaScript version of the Facebook Like box though the same can be applied to the IFRAME version as well. In that case, you need to replace <div to </div>  with the IFRAME tag.(Note: Also Replace <div and </div> with IFRAME tag)

SHARE THIS POST   

  • Facebook
  • Email
  • Twitter
  • Google Buzz
  • Reddit
  • Delicious
  • Digg
Author: Muhammad Usman Ghani
Hello, My Name Is Muhammad Usman Ghani And I Am The CEO, Founder Of SahiTech. I Blogs At SahiTech And Also Love Coding And Designing. Don't Forget To Subscribe our Free Updates. Follow Me on (Facebook) (Twitter)

0 comments: