signals of noise

Category: how to do things

How To Add the XFBML Like Button to WordPress Blogs

Facebook like button

You will notice that I have added the Facebook ‘like’ button to my individual blog post pages like many other websites and blogs out there. It is a nice way to give your readers to share posts they like on the largest social network out there.

However, for someone like me who has had no touch with coding for the last 3 years it was a little difficult figuring out all that was needed to be done. Especially if I wanted to turn my pages to Open Graph objects as well by supporting Facebook’s Open Graph protocol.

Using the iFrame version of the ‘like’ button was relatively simple and that is what I had for some time (it is still how the button is implemented on the home page of this blog). But after some research and some experimentation I have managed to use the XFBML version. At the end it is also a relatively easy task. But I thought I would anyway lay it out here for the benefit of newbies like me.

Load the JavaScript SDK

To use the XFBML version you must first load the JavaScript SDK. Put this code anywhere within the body section of your theme. The best way is to put this immediately after the <body> tag in your header.php file.

Load the JavaScript SDK within the <body> section

For more information visit this page.

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Configure the Open Graph protocol <meta> tags

To turn you blog post into a graph object you need to add some required <meta> tags to specify structured information about your page. Here are some of the required tags. Just replace the specific information pertaining to your site. For more information visit this page.

  • og:title – The title of your object as it should appear within the graph (title of the post).
  • og:type – The type of your object. For a individual blog post it should be “article”.
  • og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1 (your blog logo – IMAGE_URL).
  • og:url – The canonical URL of your object that will be used as its permanent ID in the graph (permalink to the post)
  • og:site_name – A human-readable name for your site (name of your blog – SITE_NAME)
  • fb:admins or fb:app_id – A comma-separated list of either Facebook user IDs or a Facebook Platform application ID that administers this page. It is valid to include both fb:admins and fb:app_id on your page (USER_ID).
  • og:description – A one to two sentence description of your page (excerpt for the post).

The best place to put this code is in the <head> section of your page in header.php. Put the meta tags within the <head> section

However, you also need to check if the page is a single post page to avoid errors. It is easy to do with the is_single() function.

<?php if( is_single() ){ ?>
    <meta property="og:title" content="<?php the_title(); ?>"/>
    <meta property="og:url" content="<?php the_permalink(); ?>"/>
    <meta property="og:type" content="article"/>
    <meta property="og:image" content="IMAGE_URL"/>
    <meta property="og:site_name" content="SITE_NAME"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description" content="<?php the_excerpt(); ?>"/>
<?php }?>

Add the XFBML like button

The final piece of the puzzle is to put the like button code anywhere where you want it to appear.

<fb:like show_faces="false" font="segoe ui"></fb:like>

To configure the like button according to your liking, visit this page.

I hope you find this information useful. If I am wrong with the coding somewhere or this can be done better in some other way, do let me know in the comments.

How To Use Google Analytics to Time Your Blog Post?

While surfing around the web I came across an interesting post on When is the Best Time to Post a Blog Post? It is not something people think about a lot.

There are some interesting points on when to post breaking news (as soon as it happens, obviously), company announcements (do not forget the PR department exists for a reason) and informational posts (when people are most likely to read).

While going through this post, I was thinking whether it could be done using an analytics tool, like Google Analytics. I have some thoughts on it and the presentation embedded below shows how it can be done.

Once you have identified the times of day when most of your traffic is engaging with your blog, that is the time to schedule your post. This will work best for new blogs when there are real identifiable spikes but not for popular sites with continuously high traffic.

And, if after all you are still confused, the best time in NOW.

How to Create PDF Files without a PDF Writer

And without an internet connection or when you are behind a corporate firewall. There are plenty of online options that you can fall back on. Also this works for Microsoft Office 2007 and above (I don’t think this option is available for Office 2003).

  • Open the Word, Excel or PowerPoint document.
  • Click on the Office Button and select send. Here you will get an option to ‘Email as PDF Attachment’.

Save Word document as PDF

Convert Excel worksheets and Powerpoint presentations to PDF

  • Select this option. This will open the Outlook window with the pdf file as an attachment. Simply right-click and save in to you hard-drive.

Save PDF file with Outlook

You can make this process work with images as well. Just add the image to a PowerPoint slide or a Word document and follow the above steps.

This process may not be very valuable to all, but I found it very useful since I do not have a PDF writer installed. I also tend to avoid the online tools and services due to privacy concerns.

Copyright © 2014 signals of noise

Theme by Anders NorenUp ↑