Since Facebook introduced the Open Graph protocol and Social Plugins Social Plugins at the April 2010 f8 Developers
Conference, they have evolved the way these plugins are implemented.
This tutorial has been updated to reflect
these changes.
NOTE: This does involve modifying the PHP files for
your WordPress installation. Make sure you save the originals in case anything
goes amiss.
If you’re not comfortable editing your
WordPress source files, a number of WordPress plugins for Open Graph are available to handle this for you.
Step 1: Get an App ID
for your WordPress CMS or Blog
To make your WordPress website or blog an
“object” in Facebook’s Open Graph, you first need to get an App ID for your
site or blog.
After you have successfully set up your blog
as an application “object” in Facebook’s Open Graph, you then need to add the
appropriate <html> and Open Graph meta tags to your site pages.
Step 2: Add Open Graph
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://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
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="My Blog Name" /><?php
} else {
?><meta property="og:title" content="<?php the_title_attribute( $args ); ?>" /><?php
}
?>
<?php if (is_home())
echo '<meta property="og:url" content="YOUR-BLOG-URL" />';
else echo '<meta property="og:url" content="'.get_permalink().'" />';
?>
fb:admins
Replace YOUR-ADMIN-ID with your Facebook User
ID. Read these instructions
on how to find a Facebook user’s numeric Facebook ID.
fb:app_id
Replace YOUR-APP-ID with the Application ID
assigned to your blog when you set it up on Facebook, as described in this article (referenced above).
og:title
For the “og:title” attribute, you’ll want this
to return the title for each 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 orange 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 “I
like this post!” is the comment I added to the Like.
And that takes care of the meta tags. There
are a number of additional
social graph meta tags you might want to check out.
Step 3: Add the Like
Button or other Social Plugins to your Individual WordPress Posts or Pages
First, as mentioned earlier, you must add a
call to the JavaScript SDK, if you use the XFBML/HTML5 version of the social
plugin (which I recommend).
You will add the below code right after the
opening <body> tag, which is usually in “header.php”. In some
WordPress themes, it may be in “single.php.” Yes, WordPress themes vary!
<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/all.js#xfbml=1&appId=YOUR-APP-ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
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/all.js#xfbml=1&appId=YOUR-APP-ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Adding the Like Button
to your Individual WordPress Pages
You should choose one of the two flavors of
XFBML, either HTML5 or XFBML. If you use the iFrame
version, you won’t get user-interaction data via Insights, and users won’t be
able to add a comment to the Like they make.
However, for users who can’t modify their
WordPress code, either the iFrame method or the use of a WordPress plugin will
be their only options.
The Social Plugins you can use on your blog
are:
·
Comments
For each plugin you wish to add to your
WordPress blog or CMS, simply visit the plugin page, add the parameters into
the “configurator” (as Facebook calls it), then click the “Get Code” button.
Facebook now enforces your associating the plugin with an existing
App ID that you admin. You will probably want to associate with the
Facebook application you created for your site or blog to get an App ID, and
your site should appear in the pull-down menu next to “This script uses the app
ID of your app”.
Just add the code Facebook provides for your plugin where you want
it to appear on your WordPress posts and/or pages. This will involve
editing index.php and single.php.
To add a Social Plugin to each post (commonly
the Like/Send buttons), you will need to edit the single.php file:
wp-content > themes > YOUR THEME
DIRECTORY > single.php
For the HyperArts blog, I put the Like/Send
Button code just before the <div class="entry"> ... </div>. (I created a new DIV to contain all the
social buttons on our posts — Google+, LinkedIn Share, Twitter Button and the
Like/Send Button.)
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
class="entry"> ... </div>:
<fb:like
action='like' colorscheme='light'
layout='standard' show_faces='false' width='650' send="true"/>
layout='standard' show_faces='false' width='650' send="true"/>
After saving your changes to the “single.php”
file, you should be ready to go.
Post a Comment