Facebook Social Plugins

Posted: August 17, 2010 in Home

How to Add Facebook’s XFBML Like Button & Social Plugins to Your Web Pages & WordPress Posts

FacebookFacebook’s new Open Graph protocol is now official, having been announced and launched this past Wednesday at the Facebook f8 Conference. It is the successor to Facebook Connect which will be slowly phased out, and it is a big improvement, making it much easier to “socialize” your Web pages into Facebook’s hyper-expanding social network.

I must admit it was hard to sit still at the f8 conference after Mark Zuckerberg made the announcement in his keynote address and I attended a couple sessions that delved deeper into the Social Plugins and the Open Graph protocol. As soon as possible, which happens to be today, I decided to start experimenting by adding some social plugins to my WordPress blog.

I decided I could save others a lot of time if I wrote up a tutorial. So here it is….

Adding the Facebook Social Plugins to your Web Page or Blog — XFBML or iFrame?

Facebook offers two methods to add their social plugins to your Web page or blog posts:

  1. A simple iframe which can be easily dropped into the Web page code;
  2. The <fb:like> XFBML tag, which requires that your page/post make a call to the JavaScript SDK and that your page be set up as a Facebook application (quite easy).

I decided to go the XFBML route which, although a bit more complicated, is more feature rich than the iframe method. For example, after clicking on your Like/Recommend button, the user can add a comment to the profile post. With the XFBML Like button, the post on the user’s personal profile looks like this (if, and only if, they add a comment):
Facebook Like Comment

With the iFrame Like button (or if the user doesn’t add a comment with your XFBML version), the post on a user’s profile shows up like this:
Facebook Like Button without Comment

New WordPress Plugins for Facebook Social Plugins

If you’d be happy with the simpler iframe method, there are already several WordPress plugins to add the Like button. And here’s a good post on adding the iframe Like button. But, remember, with the iframe method you can’t use the extended features such as the user being able to add a comment when “liking” your post or blog. There is also a WordPress plugin that will add the XFBML social plugins to your blog, by Otto.

Create an Application – Tell Facebook Your Website, Web Page or Post is an Application

The Web page or blog post to which you will add Facebook’s social plugins or other features that interact with Facebook’s Graph API will be viewed by Facebook as an “application,” which allows the page or post to use the JavaScript SDK. Here is the drill:

While logged in to Facebook, go to Create an Application page. You will see this:
Create an Application  - Facebook

  • Enter the “Site name” value — it will be the name of the application. Just give it a short descriptive title (I used “HyperArts Blog”);
  • Under the “Connect” tab in your new application, enter the full URL to the website or Web page (I used “http://www.hyperarts.com/blog/&#8221; – but individual posts will have a specific URL directly to the post via some PHP code in the Like button code, as described below.)
    NOTE: Make sure the Connect URL exactly matches your site URL
  • Select the appropriate locale;
  • Enter the CAPTCHA characters, and click through, and viola! There’s your application.

The “Application ID” value is the one you’ll want for our purposes in this post. You can always access this “application” by going to the Developer Dashboard:
Facebook Application ID

With your Web page or blog set up as an application with an app ID, you can now use the JavaScript SDK. There are many other things you can do with your application via the Facebook Graph API, but this is outside the scope of this post.

Add Meta Tags to your WordPress Blog Header File

You’ll need to add the meta tags to your “header.php” file located in your theme’s folder (wp-content > themes > [your theme] > header.php).

You’ll need to add a couple new values to the <html> tag of your header:


<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>

And then add the following meta tags (taken from our blog) to your header.php:


<meta property="fb:admins" content="YOUR-ADMIN-ID"/>
<meta property="fb:app_id" content="YOUR-APP-ID" />
<meta property="og:type" content="article" />
<?php if(is_home()) {
?><meta property="og:title" content="Blog" /><?php
} else {
?><meta property="og:title" content="<?php the_title_attribute( $args ); ?>" /><?php
}
?>
<?php if (is_home())
echo '<meta property="og:url" content="YOUR-APP-URL" />';
else echo '<meta property="og:url" content="'.get_permalink().'" />';
?>

fb:admins

Replace YOUR-ADMIN-ID with your Facebook User ID. To easily get your Facebook User ID, you can use another aspect of the social graph: http://graph.facebook.com/timware (substitute your username for “timware”). This will pull up the information that is publicly available for that user. You’ll want the “id” value for our purposes here.

fb:app_id

Replace YOUR-APP-ID with the Application ID assigned to your website when you set it up on Facebook, as described above.

og:title

For the “og:title” attribute, you’ll want this to return the title for your blog post. As you can see from the above example, this simply involves a bit of PHP code that pulls in the post’s title.

og:type

As you see above, I utilized a PHP conditional statement in header.php to have the <meta property=”og:type” content=”blog” /> tag for the home page and the <meta property=”og:type” content=”article” /> for individual posts. This comes by way of Otto who has an excellent blog on WordPress, as well as a Facebook Connect plugin for WordPress. And this approach is also supported in this GitHub post.

As for the implications, in terms of Insights and the display of Pages in your “Home > Ads and Pages” section of your personal profile, we’ll have to wait and see.

You’ll also need to add the <fb:like> XFBML to your index.php file for your theme, as well as the call to the JavaScript SDK. I added it as the first content after the “main-content” DIV. You will then see the Admin Page option next to the Like button.

og:url

I used some PHP to set the URL for our blog’s landing page to the blog URL set in the application (YOUR-APP-URL). On the individual pages or posts, it will fill in the Permalink for the page/post. In “single.php” (for individual blog posts) and “page.php” (for pages), we omit the “href” value in the “Like” button code (fb:like).

og:description

The “og:description” meta tag: If you omit this meta tag, the value will be the “description” meta tag for the post, and that is what will show up as the description on a user’s Facebook profile when they “Recommend” or “Like” your post. (We use the WordPress SEO plugin Headspace which gives you the ability to create custom title and meta tags for each post. Highly recommended!)

og:image

This is simply the full/absolute URL to the image you want to have appear when someone “Likes” your page and it’s added to their personal profile stream. We omit this meta tag so that it uses the lead image from the blog post.

The below image is from my profile after I “Recommended” a blog post:
Facebook Recommend

The green logo is the logo pulled in with the “og:image” meta tag (make sure you make this value the FULL URL to the image!).

The title of the post is linked in blue, and the description meta tag content is the description below the title. The “SEO for 2010 – Easier & Harder!” is the comment I added when I used the “Recommend” link on the post. The commenting feature can be used only if you use XFBML instead of iframes for the Like button, as mentioned earlier in this post.

And that takes care of the meta tags. There are a number of additional social graph meta tags you might want to check out.

Adding the Like Button to your Individual WordPress Posts

The below code includes the call to the JavaScript SDK mentioned earlier and the Like button XFBML code. To add the Like button to each post, you will need to edit the single.php file (wp-content > themes > YOUR THEME > single.php). For our blog’s theme, I put the following code just before the closing tag of the <div class=”postbody entry”> … </div>:


<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>
<fb:like action='recommend' colorscheme='light'
layout='standard' show_faces='true' width='500'/>

Adding the Like Button to your Individual WordPress Pages

For WordPress Pages, the only difference from the above code is the URL in the <fb:like> tag. Add the Like button to Pages by adding the above code for Posts — but with the below code for <fb:like> tag where the only difference is the PHP code for the “href” value — to the page.php file (wp-content > themes > YOUR THEME > page.php). For our blog’s theme, I put the code just before the closing tag of the <div> … </div>:


<fb:like action='recommend' colorscheme='light'
layout='standard' show_faces='true' width='500'/>

The only thing you need to change in the above code for both posts and pages is YOUR APP ID, to the value you get from your application’s page on the Facebook Developer dashboard, as described earlier.

After saving your changes to the “single.php” file, you should be ready to go.

“Like” or “Recommend”?

For our blog, which contains more how-tos and tutorials than editorial content, I changed the “Like” button to be a “Recommend” button, simply by changing the “action” attribute in the <fb:like> tag from “like” to “recommend”. “Recommend” is also more appropriate when someone wants to share a page on, say an environmental disaster, and clicking “Like” isn’t really appropriate.

I then added, via an iframe, the “Recommendations” social plugin which shows our blog posts that people have recommended via the button, and how many times each post was recommended.

Finally, I added the “Like Box” social plugin which displays a box that displays Fan Page data to select from, including connections (with pictures) and the stream. I just opted for the connections.

Read more: http://www.hyperarts.com/blog/how-to-add-facebook-like-button-social-plugins-to-wordpress-posts/#ixzz0wqwFEiEL

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s