How to Customize the Facebook Page Plugin for Websites - Way2trick

What you see here are a list of customization options now available inside the Facebook Page plugin. You can choose to have a simple Like box with just your logo and like button or you can have a complete box with cover photos as well.

 

Customizing this Facebook Page plugin is simple as detailed in the official documentation. For instance, if you would not like to show a cover photo, set the HTML5 data attribute data-hide-cover to false in the DIV tag. Setting data-show-facepile to false will hide the row of pictures.

Similarly, you can attach styles to the .fb-page class to customize the outer of the Facebook Plugin.  

<div class="fb-page" 
     data-href="https://www.facebook.com/way2trick1"  
     data-small-header="false"  
     data-hide-cover="false"    
     data-show-facepile="true"  
     data-show-posts="false">
</div>

<div id="fb-root"></div>

<style>

  .fb-page, .fb-page:before, .fb-page:after {
    border: 1px solid #ccc;
  }

  .fb-page:before, .fb-page:after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 2px;
    right: 2px;
    height: 1px;
    border-top: none
  }
  
  .fb-page:after {
    left: 4px;
    right: 4px;
    bottom: -5px;
    box-shadow: 0 0 2px #ccc
  }
</style>

<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/sdk.js#xfbml=1&version=v2.4";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

Other Posts That May Interest You..

1. Find LinkedIn Profiles with Google Search 

2. How to Receive Files in your Google Drive from Anyone 

3. How to Save your Gmail to Google Drive Automatically

4. Hindi Speech Recognition Software with Spell Checker