In order for images to appear correctly on Facebook, it is necessary to use meta tags. In this case for Facebook, a special set of meta tags as @Maicon has already mentioned, calls from Open Graph Protocol or abbreviated OG Meta tags.
To add them to your Blogger site, Browse to - Blogger > Dashboard > Template > Edit HTML
At the top of the editor, you will find a code that looks like this:
<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'>
Paste the code xmlns:og='http://ogp.me/ns#' before closing this tag html. Example:
<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#'>
Done this, it will now add the tag Open Graph Protocol which is the protocol used by Facebook to your Blogger. After this has been done, look for the tag <head> which should be just below the above tag, and below this tag head paste the code:
<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='IMAGEM_PERSONALIZADA_HOMEPAGE' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Ler artigo sobre " + data:blog.pageName + " em " + data:blog.title + ""' property='og:description'/>
</b:if>
<meta content='ID_DA_TUA_APP_FACEBOOK' property='fb:app_id'/>
<meta content='ADMINS_DA_TUA_APP_FACEBOOK' property='fb:admins'/>
Basically what this <b:if cond='data:blog.metaDescription'> will do, is catch the meta description if it exists and display it as og:description, but if this does not exist and/or is not available, then the text Ler artigo sobre ... will be implemented as og:description instead.
Meta description in Blogger
To activate the meta description you have to go up:
Definições > Preferência de pesquisa > Meta tags > Descrição Click edit.
And the following shall appear:
Add Meta description to individual publications
Simply edit your post or page and look for the option Description of the Research, and this is where we will add the description of each page that will now also be displayed as og:description to Facebook.
Don’t forget to replace the fields:
IMAGEM_PERSONALIZADA_HOMEPAGE - Image displayed on homepage(home page) and other pages
Here you should indicate the address of the image you want to be the default image to be displayed when you post the link to the home page on Facebook (for example - pt.stackoverflow.com) and this will also be the default image on other pages that are not publications.
Yes, it may be the logo of the site, but the image has to have at least 200px width and height. You must replace the text IMAGEM_PERSONALIZADA_HOMEPAGE for something like - http://i.stack.imgur.com/gL1sB.jpg
ID_DA_TUA_APP_FACEBOOK - Your Facebook app ID
Here you should put your app ID. This meta tag and also the next ADMINS are not very relevant here in this case, they are only necessary for implementation of the Facebook comment box on your site and things like that, so if you want you can remove this tag and the one below, because it will only add the name of your app/site when someone publishes something on Facebook, for example - O João publicou isto através da aplicação ______. To use this is required create an APP on Facebook. If you want to have here a site that explains how to create an app step by step.
This value should be changed to something like - 000111222333444555 which will be the app ID
ADMINS_DA_TUA_APP_FACEBOOK - The administrators of your APP
This won’t be very helpful either, because adding admins is basically adding admins to control your app. For example if you were using the Facebook comment box on your site, adding admins they could moderate comments on your site and things like that. But now it’s also possible to add admins to the app itself, so if you create an app you can delete this tag and add the admins directly to your app by accessing: My Apps > Roles > Administators on the page https://developers.facebook.com after you’ve created your app. You can find out which one is yours user id through the website findMyFacebookId
This value should be changed to something like - 12345678910,10987654321
After you replace all that, the meta tags should look something like this example:
<meta content='http://i.stack.imgur.com/gL1sB.jpg' property='og:image'/>
<meta content='000111222333444555' property='fb:app_id'/>
<meta content='12345678910,10987654321' property='fb:admins'/>
Remember, these last two tags are not necessarily mandatory, the code will work normally with or without them, so if you want you can remove them from the code and when you need them comes here in the answer and follows the example to implement them in your code.
At the end of this all be implemented, should look something like the code of this image below:
Thanks again! <p>Help me with this? <p>IMAGEM_PERSONALIZADA_HOMEPAGE - Image shown on homepage(home page) and other pages ID_DA_TUA_APP_FACEBOOK - The ID of your Facebook app ADMINS_DA_TUA_AP_FACEBOK - Administrators of your APP
– Diego Gomes
I will edit my reply
– Chun
Thanks bro, I’m on hold!!
– Diego Gomes
@DiegoGomes https://developers.facebook.com/apps/
– Maicon Carraro
Thank you Maicon and Chun, I did what you said, but the error persists :/ http://oi59.tinypic.com/157jg4i.jpg <p> What may be now?
– Diego Gomes
@Diegogomes the image is not working :/ Have you tried using the Tool Debugger as Maicon told you? Is there a mistake there? Paste the link from your site that you want to share in this Facebook Debugger tool, and click
Fetch new scrape informationlike 2 or 3 times until the desired image appears. Sometimes it doesn’t update right away.– Chun
Hi Chun, after a lot of fight I got when I stopped at home I explain how it worked out, thank you very much!
– Diego Gomes
You’re welcome to @Diegogomes :)
– Chun
Complementing, after the help of you, I went after more knowledge on own facebook, where I saw that I had to add a script offered by own facebook, I can not paste here because of the character limit, following the rest that you instructed me, it worked! Thank you very much :)
– Diego Gomes