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

Post a Comment

Popular posts from this blog

Rotate my Blogger images

Image
Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270). Take, for example, the image below. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG If we switch the s200 to s200-r90 , we get the following image instead. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG Happy rotating!
Read more

Remove the header image for posts in Emporio

The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan! Head to Theme => Edit HTML Search for ' data:view.isSingleItem ' The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'> <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'> <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/> <div class='bg-photo-container'> <div class='bg-photo'/> </div> </b:if> </b:if> Delete the XML including the <b:if> tag code. Happy Emporio'ing!
Read more

Get nicer thumbnails for my Post snippets

I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator . Note: This post leverages the techniques described in the article about  Responsive images for Google photos . A note: The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work. Creating a responsive, resized Thumbnail The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image. <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ /> In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of thes...
Read more