Clarissa Johal: Thoughtful Thursday-Getting the Correct Thumbnail to Show on Facebook Posts

Wednesday, February 12, 2014

Thoughtful Thursday-Getting the Correct Thumbnail to Show on Facebook Posts

Have you ever shared a Blogger post on Facebook only to have a completely unrelated thumbnail show? For instance, your post is on, "Spiritual and Demonic Possession" and Facebook grabs a photo of a deer from somewhere in your blog. Not the impact you were going for! You can upload the correct picture with the link, but it doesn't look nice like a Blogger post should.

So, here's how to fix that.
I won't go into too much techno-babble, because if you're like me, you really don't care.

You will need to copy and paste an HTML code (called a Meta description) into the template of your blog.

Step 1: Go to your blogger dashboard.
Step 2: Go to your Template and Edit HTML
Step 3: Save and backup your template before you do anything! It's always good to have a backup of your template, especially if you're going to mess with the HTML.
Step 4: Find the <head> tag in your template. To find it, use Control F and a box will appear in the top right corner of your screen. Type <head>
Step 5: Paste this code right below the line where <head> shows.

&lt;meta content=&#39;article&#39; property=&#39;og:type&#39;/&gt;
&lt;meta expr:content=&#39;data:blog.postImageThumbnailUrl&#39; property=&#39;og:image&#39;/&gt;
&lt;meta expr:content=&#39;data:blog.title&#39; property=&#39;og:site_name&#39;/&gt;
&lt;meta expr:content=&#39;data:blog.pageName&#39; property=&#39;og:title&#39;/&gt;
&lt;b:if cond=&#39;data:blog.metaDescription != &amp;quot;&amp;quot;&#39;&gt;
&lt;meta expr:content=&#39;data:blog.metaDescription&#39; name=&#39;description&#39;/&gt;
&lt;/b:if&gt;

Preview your blog to see that everything looks the same. Save your template.
You're done!

It won't work on updating the thumbnail of anything that's been published in your blog already, even if you revert the post to a draft and re-publish it, but it works on everything on out. If you have any problems, let me know and I'll try and help. Happy sharing!

*Something I found out while writing this post. To show an HTML code in a blog post on Blogger (without actually coding the post itself) go to Postable
Paste the HTML code you want to share in the box there, press the "make it friendly" button. Copy and paste into your blog. Voila!