We are here talking about the automatic RSS feed from Blogger to
Facebook, through a medium. If you do manually post a link, you can
always select which image to display.
Basically, when a Facebook recieve a feed, it would first check the "<img " tags. However, Facebook only accepts images over 200x200 pixels. If
there is no avail, Facebook then would to go to webpage to search for
the images, according to links provided in the feed. For video, Facebook
does the same procedure.
So, if you want a image to be
displayed in your Facebook timeline, place that image at the first
position, followed by other images. Make sure the size of that image is
large enough.
Next, place following HTML codes to you blogger, via:
1. Go to Dashboard > Template > Edit HTML.
2. Move mouse to HTML code and click anywhere, then press Ctrl and F in your keyboard to search "</head>".
3. Add following lines just before words "</head>":
<meta property="og:title" content="Surf On Blogger" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://surfonblogger.blogspot.com/" />
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAWinnR65A2l2juYIp7zkEC2sKZk4s67YodsuvYCkKonpdjAVEPWfoyFEWQA8ZT-pXaqmpeAOqLj9xAK29orAl3ar4QOvZACJyCcftQex-Rpo6_6IetB2umdNYqnUJ1mdp76N6Tjyo8yg/s1600/SurfOn_logo_230.jpg" />
<meta property="og:description" content="Sharing experience of surfing on blogspot" />
<link rel="icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAWinnR65A2l2juYIp7zkEC2sKZk4s67YodsuvYCkKonpdjAVEPWfoyFEWQA8ZT-pXaqmpeAOqLj9xAK29orAl3ar4QOvZACJyCcftQex-Rpo6_6IetB2umdNYqnUJ1mdp76N6Tjyo8yg/s1600/SurfOn_logo_230.jpg"></link>
<link rel="image_src" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAWinnR65A2l2juYIp7zkEC2sKZk4s67YodsuvYCkKonpdjAVEPWfoyFEWQA8ZT-pXaqmpeAOqLj9xAK29orAl3ar4QOvZACJyCcftQex-Rpo6_6IetB2umdNYqnUJ1mdp76N6Tjyo8yg/s1600/SurfOn_logo_230.jpg" type="image/jpg"></link>
Please replace SurfOnBlogger's information with your blog's information.
4. Save template and Back.
Set
these metadata into your blogger's HTML <head>. It would just tell
Facebook when no valid image is available, goes to get this pre-set
image. This image can be your blog header image or an invisible image.
How to upload an invisible image? Click here for the answer. Very
important: make sure this image is over 200x200px in size.
What
about if you want an invisible image to be didplayed by Facebook for a
particular post/page only? There is no way to set with Facebook.
Follow link provided by
Facebook let you know if your setting is correct: https://developers.facebook.com/tools/debug/. If you see an error
message: "Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image '...' will be used instead." while your image indeed is larger than this, it means you are bad luck. This is a bug and Facebook seems having no plan to fix it. This bug is related to cache issue. Facebook uses akamaihd.net as third party cloud computing services, who hosts your images. While you may believe your image is directly extracted from original feed, actually you image has been resized to 144x144 and had been stored with akamaihd.net. Somehow, they can not process your request on time. That is why you see this bug. How long it would take for Facebook to update your new image? It may take days.
In addition, you should make sure all warnings are fixed.
If your RSS feed is through dlvr.it as medium, you have any even better control. See their page: http://support.dlvr.it/hc/en-us/articles/200401854-How-do-I-control-which-image-photo-is-posted-to-Facebook- .
Thanks. It seems facebook does not update the new image, how to enforce facebook to accept new thumbnail?
ReplyDelete