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

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

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

Add snippets to the Emporio theme

Image
A lot of people love the image-focused look of the newer Emporio template. This article explains how to tweak your template's XML to add a short snippet to the Emporio posts - unfortunately, there's no easy way to add in snippets for Emporio, without customizing the markup. But, if you're feeling brave, head to: Theme -> Edit HTML -> Jump to Widget -> Blog 1 If you search for 'snippet-container', you'll come across: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.title /> </div> <b:if cond='data:post.title != ""'> <div class='snippet-fade r-snippet-fade hidden'></div> </b:if> </div> Notice that it's just got the title. You could change it to add something like: <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.
Read more