Facebook Open Graph Tags for Blogger Blogs

Posted by Admin on 1/25/13 at 2:01 PM in ,,
Facebook Open Graph Protocol Integration

Facebook had announced the Open Graph concept back in 2010 that allowed to make your website or blog more social friendly. Integrating the Open Graph protocols (or in simple words, Tags) in your blogs will make it appear in a proper format when shared on Facebook. If not, then when a Facebook user shares your content, the proper image might not get captured from the website page or the description might not be exactly what you wanted it to be.

Facebook Open Graph integration is different for blogger blogs due to the bit of a programming part involved. So today we shall integrate the tags in a proper accurate format.

Integrate Open Graph Protocols in Blogger Blog

Let's finish the code copy and pasting first. So login to blogger, go to Template, then Edit HTML.

First, replace your <head> tag with this :

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

Now copy and paste the following chunk of code just before </head> :

<!-- ############## Facebook OpenGraph Integration by Typical Tips ##################### -->
<meta content='article' property='og:type'/>
<meta content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='YOUR_WEBSITE_LOGO_IMAGE_URL' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta content='YOUR_WEBSITE_LOGO_IMAGE_URL' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta expr:content='&quot; Posts of &quot; + data:blog.pageName ' property='og:title'/>
<meta content='YOUR_WEBSITE_LOGO_IMAGE_URL' property='og:image'/>
<b:else />
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<!-- ############### Facebook OpenGraph Integration Ends ########################### -->

To start with, we will set the type of your blog to be 'Article' since, even though what you have is a blog, what you publish will be articles and hence setting the type to 'Blog' is not recommended.

Word of Caution :
Many websites make use of two open graph types for Blogger blogs, if the page is the homepage, then the type will be set to 'Blog' and if the page is posts page, then the type will be set to 'Article'. This is strictly against Open Graph concept. Facebook will detect two open graph types coming from the same site and you might get into unnecessary trouble.

Replace Website Logo URL

The only change you have to make in the above code is to replace all YOUR_WEBSITE_LOGO_IMAGE_URL with the url of the logo image or header image of your website.

That does it. Your Blogger / Blogspot blog is now integrated with Facebook Open Graph Protocols.

Optional Open Graph Tags

It is recommended to include the following tags also but they are optional :

<meta property="fb:app_id" content="YOUR_APP_ID">
<meta property="article:author" content="ARTICLE_AUTHOR_URL">
<meta property="article:section" content="SINGLE_KEYWORD">
<meta property="fb:admins" content="USER_ID"/>

Here, replace YOUR_APP_ID with the your Facebook application ID, ARTICLE_AUTHOR_URL with the url of 'About the Author' page, if your website is largely dependent on a single keyword, then replace SINGLE_KEYWORD with your website's keyword, and the last one is most recommended.

The fb:admins property is a must if you have integrated facebook comments on your blog. Here, you replace USER_ID with the numerical user id of your facebook profile.

Get Facebook User ID

To get your Facebook User ID, you can make use of Graph API Explorer at developers.facebook.com/tools/explorer. Just enter your facebook username (for example, type 'zuck' for Mark Zuckerberg) in the box and hit submit. In the result, the value of 'id' is your facebook user id.

Check Open Graph Integration

To check if the integration is proper, you can make use of the Open Graph Debugger tool at developers.facebook.com/tools/debug. Just enter your site url and hit Debug. when the results appear the bottom, click on the Graph API : Some URL to see what was fetched from your site.

That's it folks! Come back for more :)

0 comments:

Post a Comment

Singapore Top Web & Mobile Development Company

Trending

Find Your Site on Google

Stay Updated with Newsteller
Copyright © 2013 Typical Tips. All Rights Reserved
About Us | Services