Add a Facebook page plugin to my blog

For many Bloggers, their Blog is a complement to a more extensive online presense, which often includes a facebook page.

To install a Facebook page plugin, it's best to use an HTML gadget, rather than customizing your template. This article provides a simple one-click button for installing the required HTML gadget on your blog.

There are two options for how to install the page plugin below - an iframe, or using the JS SDK (JavaScript Software Development Kit).

To install the gadget:
  1. Click the Add the Facebook page plugin to my blog! button
  2. Select the blog to add the plugin to
  3. Expand the Edit Template region
  4. Replace [Put your Facebook page url here] with your Facebook page url
  5. Hit Add widget

JS SDK

First, the Facebook SDK is needed.
<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/sdk.js#xfbml=1&version=v2.9';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
Then, the fb-page markup.
<b:with var='pageUrl' value='"[Put your Facebook page url here]"'>
  <div class='fb-page'
       expr:data-href='data:pageUrl'
       data-tabs='timeline'
       data-small-header='false'
       data-adapt-container-width='true'
       data-hide-cover='false'
       data-show-facepile='true'>
    <blockquote expr:cite='data:pageUrl'
                class='fb-xfbml-parse-ignore'>
      <a expr:href='data:pageUrl'>
        My Page Name
      </a>
    </blockquote>
  </div>
</b:with>

iframe

<b:with var='pageUrl' value='"[Put your Facebook page url here]"'>
  <iframe
    expr:src='"https://www.facebook.com/plugins/page.php"
              params {
               href: data:pageUrl,
               tabs: "timeline",
               width: 340,
               height: 500,
               small_header: false,
               adapt_container_width: true,
               hide_cover: false,
               show_facepile: true,
               appId: ""
              }'
    width='340'
    height='500'
    style='border:none;overflow:hidden'
   scrolling='no'
   frameborder='0'
   allowTransparency='true'>
  </iframe>
</b:with>

Happy Facebooking!

Comments

Popular posts from this blog

Filter out certain labels from my Blog Homepage

Change the landing page of my blog

Get Facebook to show feature image for your Blog's Homepage