Blogger Help – Setup Open Graph
If you have a Facebook page you will know that when you link your blog page it normally just links the URL or worse still, it brings in the wrong image and talks about the wrong section of your post. I will show you how to make it so that Facebook takes the correct title, image and description from your blog post.Welcome to this weeks Tecky Tuesday post!
Luckily implementing OpenGraph to Blogger is really simple, and should take under 5 minutes to complete!
First go to Template > Edit HTML
Step 1 – Take a backup of your theme. While nothing should go wrong it never hurts to take a backup first
Step 2 – You need to add the Open Graph protocol to the name spaces. Sounds a lot more complex that it is. Just locate your existing name spaces that should looks like
[code language=”html”]<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’>[/code]
we are going to add
[code language=”html”]xmlns:og=’http://ogp.me/ns#'[/code]to the end so the new namespace snippet will look like
[code language=”html”]<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#’>[/code]Note these are theme dependent so you might have extra namespaces in your theme or less.
Step 3 – You now have to add the code that will tell Facebook which part of blogger is what. Press CTRL+F (windows) or CMD+F(mac) and locate the </head> part of your theme.
Directly before the paste in the following code.
[code language=”html”]<!– Open Graph Meta Tags BEGIN –><meta expr:content=’data:blog.pageName’ property=’og:title’/>
<b:if cond=’data:blog.postImageThumbnailUrl’>
<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>
</b:if>
<meta expr:content=’data:blog.title’ property=’og:title’/>
<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>
<!– Open Graph Meta Tags END –>[/code]
Step 4 – Save your theme.
Now try posting your latest post to Facebook. It should be able to pull your title, image and correct description.
Sorry for todays techy Tuesday going up late, we had some issues with our server this morning but all seems to be resolved now. One of the people that we share our server with decided to make a Kickstarter project that went viral ☺
Let me know if you found this useful and please retweet and share to anyone you think might want to implement this. Let me know if you want to do any more of these types of posts in the comments below.
This tips are very useful, thank you for teaching about :D
Kindest Regards!