Adding a Featured Image in Blogger That Will Show Up on Facebook

This isn't so much a writing post as a how to post. Sorry, I don't have a more appropriate blog to put this on. If you are not interested in this technical stuff, you have my permission to skip this one.

Are you angry that your featured image doesn't get picked up by Facebook and other social sites? I used to be too, until I discovered something that worked.  Of course there are other things I'm not too happy about. But that would involve another post. This  would be a companion post to a similar one concerning Word Press blogs.

You only need to do the following one time.

Edit your template's HTML code. Insert the following code into the spot right before the head tag begins. You should have a section right before it that has something similar to the following, right before the head tag starts:

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'>

Except it will be one long line. You'll want to change it so it shows this addition:

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#'>

It is the

xmlns:og='http://ogp.me/ns#'

part that you adding just inside that tag on the end.

Then insert the following code anywhere into the head tags (between them) section of the template.

<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags END -->

Then with each post, you need to do the following.

1. Insert the image into your post using the "insert image" function on the toolbar.

2. Copy the url location of the image. You can do that by right-clicking on the image and selecting "Copy image's URL" or whatever the equivalent is for your browser.

3. Paste the following code into the very beginning of your blog post's HTML section and paste the link you copied in the previous step where this link says "image-URL".

<img style="display: none;" src="image-URL" alt="" />

4.  Save, and you're ready to post it to FB or other social sites and your featured image will show up!.