How to set a custom Facebook post thumbnail for a blogger page?


#1

Hello, folks! I have been a big fan of mybloggertricks.com for more than three years.

Would you tell me how to set a custom Facebook thumbnail for a blogger page? When shared to Facebook, I want the first image on the page to appear as a thumbnail, but it gives me the image I have for my homepage. I also want to change the og:title to exclude my site’s name. I tried to add some coding in the HTML of my template, but I couldn’t do it without changing the thumbnail for my site’s URL. If this is the way, how to do it correctly?

Thank you very much in advance!

Veselin.


#2

Thank you for remaining a loyal reader! :smile:

What you are asking for is OpenGraph tags For Facebook which tells Facebook what title, Description summary snippet and Thumbnail image to pick. You need to add the following code inside your template just below <head> tag

<meta content='236033659940194' property='fb:app_id'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <meta expr:content='data:blog.pageTitle' property='og:title'/>
      <meta content='blog' property='og:type'/>
      <b:else/>
      <meta expr:content='data:blog.pageName' property='og:title'/>
      <meta content='article' property='og:type'/>
    </b:if>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <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='http://downloads.mybloggertricks.com/logo.png' property='og:image:src'/>
    </b:if>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
      <meta expr:content='data:blog.metaDescription' name='og:description'/>
    </b:if>

Note that you need to replace http://downloads.mybloggertricks.com/logo.png with your blog logo and this logo will appear only for your homepage thumbnail. For Posts, facebook will pick an image randomly from your post body using the tag data:blog.postImageThumbnailUrl . Facebook also then give you options to pick your prefered image if you have added multiple images on your post. To ensure facebook picks the first image of your blog post , make sure you use a good quality image in JPEG format with atleast 450px width. Facebook often avoids picking small resolution images.

The above code will also deliver the correct Post title to Facebook and Post description.

If you are also looking for showing rich snippets in Google+ correctly then you must also install the microdata tags be reading this post

Hope this fixes your problem instantly :smile:


How to add Open Graph Tags in Blogger?
How to add Open Graph Tags in Blogger?
#3

Thank you very much! It really corrected the thumbnail of the page, but this code created another problem - now the thumbnail of my homepage is not shown anymore through the Facebook debugger. I chose a bigger picture as a thumbnail, but it is still not among the images that could be chosen as a Facebook post thumbnail. It tells me:

Extraneous Property: Objects of this type do not allow properties named ‘og:image:src’. Parser Mismatched Metadata: The parser’s result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: ‘og:image:src’

My picture is a square, jpg., 815X815.


#4

Try this @Veselin :innocent:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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 cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
        <meta expr:content='&quot;Read article about &quot; + data:blog.pageName + &quot; on &quot; + data:blog.title + &quot;&quot;' property='og:description'/>
    </b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
        <meta expr:content='&quot;Visit &quot; + data:blog.pageTitle + &quot; To read more cool stuff.&quot;' property='og:description'/>
    </b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/><b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/><b:else/>
        <meta content='YOUR BLOG LOGO' property='og:image'/>
    </b:if>
</b:if>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@YOUR TWITTER USERNAME' name='twitter:creator'/>
<meta content='YOU FB ID' property='fb:admins'/>
<meta content='YOUR PAGE ID' property='fb:profile_id'/>  

I put some Twitter Card too on this code :wink:


#5

Your picture is quite big and sometimes Facebook does not accept square too better try with dimensions 623 X 324

Try a rectangular diension, bigger widthm shorter height


#6