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

Make my background image responsive

Filter out certain labels from my Blog Homepage

Change the landing page of my blog