How to add Open Graph Facebook using Blogger
To add Open Graph tags to your blog, you will need to editing your Blogger Template.
Before you add Open Graph to your blog, you should create a backup of your template before making any changes.
1. To get started, Got to Blogger > Dashboard > click on Template > Edit HTML within the Blogger menu.
At the top you will see html xmlns from there, you will need to add Facebook's XML namespace to your page's initial HTML tag. By default, there will be other namespaces already included, so you will just need to add “xmlns:og='http://ogp.me/ns#'” to the end.
Here's an example of how the HTML tag may look after you added the code:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
2. After you added the namespace, you will now add the Open Graph Meta Tags, Find for "<head>" then copy the code below and paste it after the "<head>".
See the example of how to add the Open Graph Meta Tags
<meta expr:content='data:blog.title' property='og:site_name'/> <meta expr:content='data:blog.pageName' property='og:title'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.postImageUrl' property='og:image'/> <meta content='article' property='og:type'/> <b:else/> <meta content='Link of Image' property='og:image'/> <meta content='blog' property='og:type'/> </b:if> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' property='og:description'/> </b:if>
Note: replace the "Link of Image" default image, best option is your blog logo. Just make it is larger than 200px for best displayed image.
Additional Tags:
<meta content='APPID' property='fb:app_id'/> <meta content='Facebook_Profile_ID' property='fb:admins'/>
To use the Like Button and have the Open Graph inspect your website, you need an application. So you need to associate the Like Button with a fb:app_id.
If you want other users to see the administration page for your website on Facebook you add fb:admins. So if you are the developer of the application and the website owner there is no need to add fb:admins
After Added Open Graph Tag. Now check if the Open Graphs are working goto Facebook Debugger Tool
That's it, you have successfully added Facebook Open Graph to your blogger blog. If you have problem regarding to this post feel free to comment here.
0 comments:
Post a Comment