How to Customize the Facebook Page Plugin for Websites

How to Customize the Facebook Page Plugin for Websites
How to Customize the Facebook Page Plugin for Websites: The Pages that were old Like carton for Facebook continues to be deprecated and replaced using a fresh Page Plugin.

Unlike the preceding Like carton that carried Facebook branding that is a lot of, the Facebook Page plugin that is fresh is cleaner with no branding. Now you can show the cover picture of your Facebook Page inside the carton that is Like.

Another difference you could now simply show one row of devotee photos in the Webpage Plugin. Why does this issue? The stack reveals profile photos of common friends that have enjoyed your Facebook Page and therefore, when a chance visitor sees a familiar face inside that heap, it is not unlikely to boost their curiosity about your web site.

That which you see here are a set of customization choices available these days in the Facebook Page plugin. It's possible for you to elect to really have a straightforward Like carton with only your symbol and like button or you'll have a whole box with cover pictures too.

Customizing this Facebook Page plugin is not complex as comprehensive in the instruction manual that is official. For example, in the event that you'll not want to reveal a cover picture, establish the information that was HTML5 credit information-conceal-cover to bogus in the DIV tag.
<div class="fb-page"
     data-href="https://www.facebook.com/digital.inspiration"
     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>
SHARE

About Pavan Patidar

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment