BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

How to Add Facebook Open Graph for Blogger

42 comments


How to Add Facebook Open Graph for Blogger

Well guys, In last post I had explained about Why Facebook is not showing post thumbnails and meta post description of your blog. Well here we are going to see how to add the Facebook Open Graph To your blogger blog. This is really simple task just follow these easy steps :

 How To Add Facebook Open Graph for Blogger :

1. Go to Blogger > Dashboard > Template > Edit HTML [Make Backup before editing]
2. In the editor, at the top you will see html xmlns just similar like following code :
<html 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'>
3. So here you need to paste the code xmlns:og='http://ogp.me/ns#' before closing the tag, just like below codes :
<html 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#'>
( for newbies, if you are getting trouble doing this, you can simply copy above code and paste it above <head> and follow the 4th step]
4. Now you have added Facebook Protocol Tag, lets add Open Graph Meta Tags.
5. Find the code <head> in your blog and paste the following line of codes below it.
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='logo-link' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='app_id' property='fb:app_id'/>
<meta content='fb_admins' property='fb:admins'/>
6. Here you need to logo-link with Your Blog's Logo link, also you need to replace your app_id and fb_admins respectively and then just hit Save Template.

That's it, you have installed Facebook Open Graph for your blogger blog. After some time go to you blog post and try to share it, it will work 100% and hence the facebook share issue will be eliminated.

I hope you would have liked above tutorial, Keep Subscribed and Stay connected for more awesome Blogger Tutorials.

If you have any problem regarding this post you can drop your comment here or feel free to contact me.

42 comments :

  1. Awaysome article brother.. my problem of facebook share not showing thumnail are solved.. thanks a lot.. keep it up with this kind of informative post..

    ReplyDelete
    Replies
    1. Thanks Kartik bro. I'm glad that your problem is solved.
      Stay connected ;-)

      Delete
  2. nice article and thanks i really very trouble so you help me thank
    www.engineeringsteam.blogspot.com

    ReplyDelete
  3. The problem with this is the Facebook Object Debugger says that the 72x72 image provided by data:blog.postImageThumbnailUrl is too small, and therefore Facebook falls back on guessing and substituting a larger image. Which, we know, it's going to screw up in doing.

    I'm searching for how to get a bigger image, and going by the comments I'm stumbling across others are looking for the same.

    ReplyDelete
    Replies
    1. that's right David, but it also show large images you just need to select other image while sharing your post.

      Thanks for your responce, will work on it soon. Stay connected.

      Delete
    2. Sure, if I was doing a manual post, yes. But I do automated posts to facebook using dlvr.it.

      It occurred to me that some of the templates my girlfriend use makes index pages with larger thumbnails. So maybe looking at the code of those templates would give a clue.

      Delete
    3. LOL :D
      you can also share your posts with larger thumbnails just change the thumb by selecting other image [Like we do in slider]

      Delete
  4. What if I make a neat graphic for each individual post on my blog and want that graphic to be the default image when my articles are linked to Facebook? How do I make sure the photo I want to be the default thumbnail will be the one that Facebook uses?

    ReplyDelete
  5. sorry i'm a complete beginner, how do i find out logo-link, app_id, fb_admins/

    thanks.

    ReplyDelete
    Replies
    1. logo-link : upload your logo file [.png or .jpeg] to any hosting site/drive [google drive, picasa]
      copy its direct download link,
      fb_admins : your fb page username

      Delete
    2. what about the app_id?

      Thank you!

      Delete
    3. app_id : you will need to go for Facebook API Developers, build app for your page insights, there you will find app id, I'm gonna soon write an article for it.

      Delete
  6. I didn't figure out the app_id as well, but it doesn't matter cause that f(*&^%in image I wanted to set up eventually shows up!!! Thanks a TON bro!

    ReplyDelete
    Replies
    1. app_id : you will need to go for Facebook API Developers, build app for your page insights, there you will find app id, I'm gonna soon write an article for it.

      Delete
  7. as soon as I pasted xmlns:og='http://ogp.me/ns#' before the closing tag I got an error. (Could not load template preview: Error parsing XML, line 3, column 248: Element type "html" must be followed by either attribute specifications, ">" or "/>")

    why?

    ReplyDelete
  8. Can u do a tutorial like this for google+ It worked for my fb but not my google+. Instead of my post image showing,it keeps showing my profile picture. thanks :)

    ReplyDelete
  9. Okay here's my problem. Everything else is fine, but no matter which page of my blog is shared, the description is always the blog description, which is, a lot of times, irrelevant to the post. I haven't added meta-descriptions on each post, there's just one meta-description for the blog. What should I be doing (adding a meta-description on each post isn't a feasible option). Not gonna spam you with links, but you can easily find my blog via my G+ profile (name of blog is Hacking With Kali Linux)

    ReplyDelete

  10. great informative blog..............properties

    ReplyDelete
  11. My problem hasn't been solved yet. When I post to Facebook, the article preview still does not show up. Possibly because I didn't input the app id? But where do I get it from?

    ReplyDelete
    Replies
    1. Same problem persists with me as well. When I share my blog on facebook. I get a blank white frame as the thumbnail. Please help.

      Delete
  12. Thank you so much for sharing such an informative blog here... Home solar panels

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  14. Rohit,
    How can I show thumbnails on feedburner feeds like this: http://feeds.feedburner.com/shoutmeloud ?

    ReplyDelete
    Replies
    1. You will need to add jump breaks in blogger posts, Joseph.
      I'll write detailed article about it :)
      thanks for query.
      stay connected !

      Delete
  15. Hi Rohit,
    Thanks for your reply. I've already inserted jump breaks in my blog. This is my blog: www.josephstutorialshop.blogspot.com And this are the feeds: http://feeds.feedburner.com/TutorialShop

    ReplyDelete
    Replies
    1. No need of jump break, I found best solution but yet can't show images, though check bloggerhero after 1 hour ;)

      Delete
  16. Thank you for showing me the way.

    ReplyDelete
  17. Thanks for sharing, I am trying it now will post another comment if it worked :]

    ReplyDelete
  18. Thanks for sharing this post.It was nice getting through your post and informative too.keep sharing

    ReplyDelete
  19. thanks a lot, and thanks for sharing bro... :)

    ReplyDelete
  20. Hi there. I have just set up a blog and when I copy and paste the link to a blog post into Facebook, the link works but at the bottom it has my blog name, and then says By Bryan Melgar. The problem is, I am not Bryan Melgar and I know nobody of that name! And I would like to have my name there as I am the one doing the writing! I have no idea where this is coming from and I have checked all the settings in Blogger. Would you be able to help please? Thank you! Natasha Richmond at 8760hrs blog.

    ReplyDelete
    Replies
    1. You need to set up the open-graph properly, If you use the FB debugger you can see all the errors. Bryan is probably the name of the owner of the app id you're using.

      Delete
  21. Thx,
    One thing:



    will work even better (larger image).

    ReplyDelete
  22. very helpfull .. thanks
    www.intipyuk.com

    ReplyDelete
  23. Nope, i do everything,step by step, app ID, FB:admins, i followed facebook debugger tool, and i still cant have title f article when i try to share. What ever i do, i get only main picture from blog,title of whole blog and blog description. I dont care for picture and description, but i would like AT LEAST to have relevant title when i try to share my blog to Facebook :( can anyone help me, please? some of posts from my blog is

    http://marepannoniumgarden.blogspot.rs/2016/01/semenke-za-sudnji-dan-4-deo-lokalni.html

    Thank you, in advance.

    ReplyDelete

Powered by Blogger.