How to share a Blogger post description when I share on Facebook

Question

I just recently made my first blog on Blogger. When I share a post on Facebook, it just shows an image, the title and the blog URL. But I want to add a description as well. This happens when I share via the "what's on your mind" space on Facebook as well as when I share via the Facebook share button on my blog. I found this question, I turned the search preferences on and made descriptions for my posts, but they still don't show. Should I wait more? It's already been a day since I tried this. Should I try something else?

My blog is http://smellslikebaking.blogspot.com/

Answer 1

Open Graph tags are not working

I've studied this a lot and didn't managed to make it work with the Open Graph tags. Because they have to be on the head part of the page and you can have a hold of the post variables in the body.

Open Graph from the raw tags

So the next variant is to let Facebook guess where is the description from the raw tags.

Unfortunately the "guessing algorithm" is not documented.

See it for yourself on their debugger: https://developers.facebook.com/tools/debug/

note :

Happened to me, while their debugger showed there is computed a description, on the actual share the description wasn't there. And no way to test it.

Caches

On the other thoughts, Facebook reads the pages once and not on every click of the share button, therefore if there was no description computed when their scraper read the page, and its added later it won't appear until their cache is invalidated.

Make sure you added the description before the post is published.

The Hack

For my situation I have changed the share buttons in the the template. For Facebook I have used the feed API and constructed the share URLs like this:

https://www.facebook.com/dialog/feed?app_id={{appId}}&display=popup&caption={{caption}}&link={{shareUrl}}&redirect_uri={{redirectUrl}}&description={{description}}&name={{name}}&picture={{picture}}

Answer 2

1. For your blog overall, enable post-description in the Settings > Search panel
2. For each post, enter a description in the Description field in the right bar of the post-editor.
3. Install the Open Graph tags into your blog - including testing them using Facebook's OG validator

To do step 3, you need to edit your template. When you are in the template editor, find the closing tag and put the following code immediately before it:

<!-- Begin Open Graph metadata --> 
<meta expr:content='&quot;en_US&quot;' property='og:locale'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if> 
<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='URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST' property='og:image'/>
</b:if> 
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
</b:if>
<!-- End Open Graph metadata -->

There is a more detailed explanation of this here - but the above is the basic information you need, including how to put the tags into your Header.