Get Facebook to show feature image for your Blog's Homepage

Facebook seemingly exclusively uses Open Graph protocol (og:image)  tags to determine which image to feature. As a result, sharing your content to Facebook from blogspot has no image or a broken image for the homepage.

To fix this, you can explicitly specify the feature image on feed pages.
  1. Select your image, and copy the URL
  2. Go to Template => Edit HTML
  3. Search for the 'all-head-content' tag
  4. Underneath that tag, add the following XML, replacing [Your image URL] with the URL of the image you want to feature.
    Note: Make sure to leave the single AND double quote-marks wrapping the URL.
<b:if cond='data:view.isMultipleItems'>
  <b:with var='image'
          value='"[Your image URL]"'>
    <meta property='og:image'
          expr:content='resizeImage(data:image, 1200, "1200:630")' />
  </b:with>
</b:if>

Resizing the Feature Image

If the image you have uploaded is hosted on a Google product, it can be resized to the dimensions that Facebook recommends (1200x630). If it is not correctly resizing, upload the image to Blogger (in the post editor) and get the URL from there, and try again.

How it works

Take, for example, this 'Medium' image which I've added to this post.



Its url is

https://1.bp.blogspot.com/.../s320/PANO_20140810_102814.jpg

In bold is /s320/, we see the sizing parameters of the URL - s320. If we change this to be w1200-h630-p-nu (width 1200, height 630, smart crop and no upscale), we get a nice feature image for facebook. (You can follow the link to see the size it displays at.)

https://1.bp.blogspot.com/.../w1200-h320-p-nu/PANO_20140810_102814.jpg

Note that for this to work, you'll need a nice big original image.

Happy Blogging!

Comments

  1. Food and More with Hansie30 March 2016 at 22:20

    Hi! Tried doing this, but its not helping! Pl suggest

    ReplyDelete
  2. Friederika Mons27 June 2016 at 21:19

    Same with me!

    ReplyDelete
  3. Olena22 August 2016 at 09:36

    Could you please help me out?
    Here is a link :)
    http://lifexplorers.net/switched-32kg-luggage-backpack/

    ReplyDelete
    Replies
    1. Luke22 August 2016 at 20:24

      You have a bunch of og:image tags on that page (you can see this if you right-click and view source). Which image are you wanting to be the FB feature image?

      Delete

Post a Comment

Popular posts from this blog

Rotate my Blogger images

Image
Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270). Take, for example, the image below. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG If we switch the s200 to s200-r90 , we get the following image instead. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG Happy rotating!
Read more

Remove the header image for posts in Emporio

The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan! Head to Theme => Edit HTML Search for ' data:view.isSingleItem ' The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'> <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'> <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/> <div class='bg-photo-container'> <div class='bg-photo'/> </div> </b:if> </b:if> Delete the XML including the <b:if> tag code. Happy Emporio'ing!
Read more

Get nicer thumbnails for my Post snippets

I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator . Note: This post leverages the techniques described in the article about  Responsive images for Google photos . A note: The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work. Creating a responsive, resized Thumbnail The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image. <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ /> In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of thes...
Read more