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.
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.
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.
That does it. Your Blogger / Blogspot blog is now integrated with Facebook Open Graph Protocols.
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.
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.- Login to blogger.
- Go to Theme, then Edit HTML.
- Search for <head> using Ctrl + F
- 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 Digital Navigate ##################### -->
<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 != ""'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<meta content='YOUR_WEBSITE_LOGO_IMAGE_URL' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<meta content='YOUR_WEBSITE_LOGO_IMAGE_URL' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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 == "archive"'>
<meta expr:content='" Posts of " + 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.
Post a Comment