Facebook, currently the most prominent social networking site out there, once acclaimed that they were going to shock the world by challenging the search engine industry by opening up their own type of search engine. It turns out that they did and this search engine of Facebook came to be called Open Graph. Those who dared try to use Facebook’s new search engine to get more visitors, instead of having to build links, had to build “likes” to their website to rank higher in the search results. This new concept shook the world and ultimately, the search engine industry because never before have a search engine relied heavily upon a simple concept of just pressing a “like” button.
Now the question is for the webmasters is what can we do to try and benefit the most from this newfound opportunity to receive more web traffic? The answer is pretty simple. It includes adding meta tags optimized for your website to properly display information you want similar to how other search engines like Google, Yahoo, and Bing works, and adding a like button to your web page. Never has there been a search engine where it’s main algorithm that determined the rankings of search results, relied heavily upon a simple button of some sort that gave an indication of what visitors like or not like.
How to Integrate Open Graph
If you operate a WordPress blog, you are in luck because all you have to do to optimize your webpages for the newfound search engine is insert a simple code within the header of every webpage that you own. The code will add meta tags to every webpage that you have on your blog and optimize them for Facebook’s Open Graph search engine. Including this code to optimize your pages for Facebook Open Graph is a must because it ensures that when Facebook users like your pages, it will be both clean and professional. Bottom line, the meta tags gives you more control of what you want your pages to look like in the newsfeed when people like your pages and even help you hint which keywords you would like to rank for.
Advertisements
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en” xmlns:fb=”http://www.facebook.com/2008/fbml” xmlns:og=”http://opengraphprotocol.org/schema/” <?php language_attributes(); ?>><?php if (have_posts()):while(have_posts()):the_post();endwhile;endif;?><!– Facebook Opengraph –><meta property=”fb:app_id” content=”your_app_id” /><meta property=”fb:admins” content=”your_admin_id” /><meta property=”og:url” content=”<?php the_permalink() ?>”/><?php if (is_single()) { ?><meta property=”og:title” content=”<?php single_post_title(”); ?>” /><meta property=”og:description” content=”<?php echo strip_tags(get_the_excerpt($post->ID)); ?>” /><meta property=”og:type” content=”article” /><meta property=”og:image” content=”<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>” /><?php } else { ?><meta property=”og:site_name” content=”<?php bloginfo(‘name’); ?>” /><meta property=”og:description” content=”<?php bloginfo(‘description’); ?>” /><meta property=”og:type” content=”website” /><meta property=”og:image” content=”your_50x50_image” /><?php } ?>
Don’t forget to change the bolded areas that I have left bolded on purpose for you to adjust to the proper settings for your individual website.
For webmasters that do not operate a WordPress blog and would like to optimize for Facebook’s Open Graph search engine, refer to Facebook’s developer page on how you can optimize for their search engine to get most out of it.
How to add the like button
Now the next question would be, how do I add the like button? There are two ways of approaching this situation. If your only intentions are to like a static page, let’s say your homepage, then all you have to do is visit Facebook’s Like Button page and include the iframe to your webpage. On the other hand, if you would like to display a like button for every single page (dynamic) and offcially connect your website to Facebook, you have to enable JavaScript SDK, which includes having to register for Facebook and creating an application for your website. Doing this is pretty simple.
The first step is to login to your Facebook account and then…
- Go to http://www.facebook.com/developers/createapp.php
- Give a name to your application and validate it.
- Copy the application ID that is given to put in a notepad because we will be needing this later.
- Select the Connect tab and insert your website information.
- Hit save.
Now that the application has been created, our next step is to add the like button to your WordPress theme. You may position the button anywhere you like. However, if you would like the button to appear on the bottom of every post you have created, follow these simple steps.
- Login to your WordPress Blog.
- Under the tab ‘Appearance,’ click on Editor.
- Then on the right hand side, you should see a file named Single.php and click on it.
- Press CTRL + F and then type in the_content. Once you have found it, add this code under it.
<fb:like href=”<?php the_permalink() ?>” layout=”button_count” show_faces=”false” width=”450″ action=”like” colorscheme=”light”></fb:like>
You can change the layout of that button by changing some of the parameters: have a look at the Facebook like plugin page for more information.
Last but not least, to officially connect your WordPress Blog to your Facebook application is to add a bit of code to your functions file. The Facebook connection is made through the Javascript SDK. After you are done editing the Single.php file, you should see a file named functions.php. Click it and scroll to the button and add the following code.
<?php
// load facebook API
add_action(“wp_footer”, “werewp_facebook_api”);
function werewp_facebook_api()
{
$fbapi = ”your_app_id“; // Your application ID
echo
“<div id=\”fb-root\”></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: $fbapi, 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>
“;
}
?>
Hit save and you are done. Now you have officially optimized your WordPress blog for Facebook’s Open Graph search engine without any need of plugins. However, if you are the plugin type who doesn’t like being all technical, a nice plugin alternative that does the job is the Like Button Plugin for WordPress plugin.
Facebook’s Open Graph search engine is truly a new technology that webmasters can benefit from, especially since it is still in its earliest stages of being a newfound search engine and has a lot to do still to live up to its expectations.
