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.
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..
ReplyDeleteThanks Kartik bro. I'm glad that your problem is solved.
DeleteStay connected ;-)
nice article and thanks i really very trouble so you help me thank
ReplyDeletewww.engineeringsteam.blogspot.com
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.
ReplyDeleteI'm searching for how to get a bigger image, and going by the comments I'm stumbling across others are looking for the same.
that's right David, but it also show large images you just need to select other image while sharing your post.
DeleteThanks for your responce, will work on it soon. Stay connected.
Sure, if I was doing a manual post, yes. But I do automated posts to facebook using dlvr.it.
DeleteIt 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.
LOL :D
Deleteyou can also share your posts with larger thumbnails just change the thumb by selecting other image [Like we do in slider]
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?
ReplyDeletesorry i'm a complete beginner, how do i find out logo-link, app_id, fb_admins/
ReplyDeletethanks.
logo-link : upload your logo file [.png or .jpeg] to any hosting site/drive [google drive, picasa]
Deletecopy its direct download link,
fb_admins : your fb page username
what about the app_id?
DeleteThank you!
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.
DeleteI 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!
ReplyDeleteapp_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.
Deleteas 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 "/>")
ReplyDeletewhy?
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 :)
ReplyDeleteOkay 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
ReplyDeletegreat informative blog..............properties
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?
ReplyDeleteSame problem persists with me as well. When I share my blog on facebook. I get a blank white frame as the thumbnail. Please help.
DeleteScrape your url through Facebook Debugger, let me know if you need more details
DeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
Deletewhats the app id, logo id?
ReplyDeleteRohit,
ReplyDeleteHow can I show thumbnails on feedburner feeds like this: http://feeds.feedburner.com/shoutmeloud ?
You will need to add jump breaks in blogger posts, Joseph.
DeleteI'll write detailed article about it :)
thanks for query.
stay connected !
Hi Rohit,
ReplyDeleteThanks 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
No need of jump break, I found best solution but yet can't show images, though check bloggerhero after 1 hour ;)
DeleteGreat post bro! keep it up :)
ReplyDeleteThank you for showing me the way.
ReplyDeleteThanks for sharing, I am trying it now will post another comment if it worked :]
ReplyDeleteDoesn't work for me. :(
ReplyDeleteThanks for sharing this post.It was nice getting through your post and informative too.keep sharing
ReplyDeletethanks a lot, and thanks for sharing bro... :)
ReplyDeleteHi 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.
ReplyDeleteYou 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.
DeleteThanks, heps me a lot
ReplyDeleteThx,
ReplyDeleteOne thing:
will work even better (larger image).
Thank you! :)
ReplyDeletevery helpfull .. thanks
ReplyDeletewww.intipyuk.com
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
ReplyDeletehttp://marepannoniumgarden.blogspot.rs/2016/01/semenke-za-sudnji-dan-4-deo-lokalni.html
Thank you, in advance.
Will blog posts get shared automatically .. ??
ReplyDeleteNo, you need to share them manually
Delete