DigitCodes

Coding Notes


Follow @afsalrahim
  • PHP Codes
  • Web Design
    • CSS Tricks
  • WordPress
    • WordPress Tips
    • WordPress Themes
    • WordPress Plugins
  • Blogging
You are here: Home / CSS Tricks / How you can make a stylish Facebook Like Box with simple CSS tricks

How you can make a stylish Facebook Like Box with simple CSS tricks

November 29, 2012 by Afsal Rahim 6 Comments

Style fabook Like Box with CSS

[adslot]

Usually most people don’t try to style up their Facebook fanpage Like Box and it often doesn’t blend with your website design. The styling of Facebook can be easily done with adding some CSS to it. As you can see our Facebook fan page Like Box is blend to the website background and here’s how you can make a stylish Facebook Like Box with simple CSS.

  • Goto the Facebook developer page to create the your Like Box. (http://developers.facebook.com/docs/reference/plugins/like-box/).
  • Choose dark or light color scheme based upon your website design and where your going to place the plugin.
  • Make sure that you choose a border color same as the background color where you going to place your plugin. Also uncheck the Show stream and Show header options.
  • Click Get Code and you will get something a plugin code similar to:
    <div data-href="[YOUR_FANPAGE_URL]" data-width="300" data-show-faces="true" data-border-color="#FFFFFF" data-stream="false" data-header="false"></div>
  • Place this code in between two div containers i.e like this:
    <div class="outerbox-style"><div class="innerbox-style"> [PLACE THE PLUGIN CODE HERE]  </div></div>
  • Now lets add the CSS styling. Place the below code in your CSS file or along with your plugin code.
    <style type="text/css">
     .outerbox-style {
         background-color:#FFF;
         width:250px;
         padding:10px 0 10px 10px;
         height:250px;
         border:1px solid #DDD;
     }
     .innerbox-style {
         height:230px;
         overflow:hidden;
     }
     </style>
  • You can edit these CSS codes and change the background ( background-color:#FFF; ) or even make a transparent background by adding codes like background-color: transparent;So here is the final whole code for creating your custom style Facebook Like Box:
    <style type="text/css">
     .outerbox-style {
         background-color:#FFF;
         width:250px;
         padding:10px 0 10px 10px;
         height:250px;
         border:1px solid #DDD;
     }
     .innerbox-style {
         height:230px;
         overflow:hidden;
     }
     </style>
    <div class="outerbox-style">
      <div class="innerbox-style"> 
          <div data-href="[YOUR_FANPAGE_URL]" data-width="300" data-show-faces="true" data-border-color="#FFFFFF" data-stream="false" data-header="false"></div>  
      </div>
    </div>

So start styling up your Like Box now and don’t forget to Like our DigitCodes Facebook Page.

Filed Under: CSS Tricks Tagged With: facebook

Comments

  1. Ankit says

    February 16, 2013 at 12:00 am

    Friend, you did a great job by providing this great tips to the bloggers. This facebook like box is looking awesome than the default like box. You change the way of blogging. I will definitely add this facebook like box into one of my website. Great Job Buddy!

    Reply
  2. Arjun says

    November 19, 2013 at 7:20 pm

    good tutorial thanks a lot.

    Reply
  3. vino says

    June 3, 2014 at 12:56 pm

    Good tutorial to create a facebook like box . Neatly explained CSS codes.Will try out in one of my blog

    Reply
  4. David says

    January 6, 2015 at 3:33 am

    Great tutorials now i learn a new tricks wow

    Reply
  5. Social Viral New says

    July 25, 2017 at 7:24 am

    Hey Afsal

    Thanks for the help.
    It’s a great work!

    I am thinking of applying this on my blog.
    Socialviralnew*

    Reply
  6. Blog Helper says

    November 5, 2018 at 10:09 am

    This is for Blogger ?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Sponsered

FREE Email Updates

Subscribe to our newsletter to get all the latest updates to your inbox..!



TRENDING

How to Easily Show Adsense Ads anywhere Inside the Blog Post

How to Embed a Tweet in Your Blog Post ?

The Easy Way to Show Placeholder images or Dummy images

How to Show Custom Sidebar for Specific Pages in WordPress using Genesis framework

Return to top of page

Copyright © 2016 · digitcodes.com · Privacy Policy · Contact Us