Simple Blogger Tutorials

Sharing in Facebook Not Showing Blogger Post Description (Solved)

I have been always asked “why Facebook does not show the description of the post when it has been liked or shared by the readers”. In this post I will discuss different methods to solve this problem.

Blogger like post description

Facebook has updated its scripts and codes which results in showing a small description of the post and an image whenever it is shared within Facebook. But people who are using Blogger and have added the Facebook Like button (iframe or XFBML) finds that when anyone likes a post, the description of the post is not seen or scraped by Facebook, instead there is only the title of the post and your blog’s link. This is a concern for many bloggers who are blogging on Blogger platform and to be honest, there’s no problem from yours end as it’s a problem of Blogger’s Post Editor itself.

URL Linter states that Facebook pulls out the description of the post from the first paragraph found and is determined by the paragraph tags. It is represented by <p></p> tags. Thus, a paragraph will be created when it will be formatted as the example below in Edit HTML mode:

<p>The para starts.</p>

Blogger’s post editor has two modes for you to write namely “Edit HTML” and “Compose” mode. In Edit Html mode you have to format your post manually whereas in Compose mode, the editor will format it for you. In both the cases when you write your post and want to have a paragraph, you generally press “Enter” key on your keyboard. This creates line breaks (<br> tags) instead of <p> tags. As a result Facebook cannot extract the description from the post. Either it leaves the description part blank or if the post has comments then it will scrap the comment as post description, as it is formatted into <p> tags by default within the Blogger template. But there’s nothing to worry about as there are available remedies also. Try any one whichever works for you.

Option 1

Step 1: Go to Blogger’s dashboard > Design > Edit HTML tab and check “Expand Widget Template”.

Step 2: Find <data:post.body/> and add the <p> tags as shown below:

<p><data:post.body/></p>

Step 3: Save your template.

<data:post.body/> is the part where your actual post is displayed which is written in Post Editor. Adding paragraph tags ensures that the full post body remains in between these tags. As a result, you can write normally within the post editor and no manual formatting is needed. As you publish the post, it will automatically be inserted within the paragraph tags.

But there is a problem also. These tags will break in any div tags are used within the post editor. For example, adding images to your post in Compose mode will break these tags at that position. If you want to use this method and also want to add an image to your post then you have to write the first para, at least containing more than 150-200 words and then you can add the image for your post. In this way you will get the first paragraph with proper tags.

Option 2

You have to add these tags manually within the post editor. Write your post as usual in Compose or Edit HTML mode (it totally depends on you) and in Edit HTML mode add <p> tags as shown below:

<p>The first paragraph starts.</p>
<p>Second paragraph starts.</p>
<p>And so on…</p>
Blogger Post Editor
Post editor in HTML mode. Click to enlarge.

This comes handy when you are adding image at the beginning of the post but remember that it’s the last finishing touch that you have to do because once the formatting is done, you should not go back to Compose mode as it will remove all the formatting. Instead you should click Preview to see if there any finishing touch needed and then Publish the post.

Option 3 (Recommended)

If you are finding it difficult or time consuming to format your post every time you publish it then write your posts using Windows Live Writer, a great free software from Microsoft. Add your Blogger’s account, synchronize (update) the theme of your blog with it and start writing in Edit mode. You don’t have to add any formatting as it will automatically format the post for you. Plus there are also many things you will find common with Microsoft Word along with Blogger's post editor. When done writing you can publish the post directly or can save it as draft. I recommend it the most.

Need of CSS (Optional)

Sometimes it may happen that after formatting your post with paragraph tags you may find that there is no space between the two paragraphs. If so then find ]]></b:skin> and before it add:

.post p { 
margin: 1em 0; 
}

If you think that you need more space then increase 1em to 1.5em or 2em or more.

Remember

When you are writing a new post from post editor, find Options, check Press "Enter" for line breaks and click Done or Save. This is one time process and ensures that you don't see any <br> tags in HTML mode.

Facebook scraps the page every 24 hours, so, once your post has been shared or “Liked”, it would automatically add the description from blogger post. Thus, it’s solved.

25 comments :

  1. "in Compose mode, the editor will format it for you. In both the cases when you write your post and want to have a paragraph, you generally press “Enter” key on your keyboard. This creates line breaks (br tags) instead of p tags."

    Its wrong. No br or p tags when pressing the enter on compose mode

    ReplyDelete
  2. Care to explain? I mean, what do you get?

    ReplyDelete
  3. I already put Like button in my blog. But when my friends liked the post, it just turns out on their profile that they liked my post but it doesn't appear at Facebook homepage.

    It means, their friends cannot see that they liked my post. It only appear on their profile page. How to solve this?

    ReplyDelete
  4. It has nothing to do with the Like button. I think that your shared post is there under Most Recent link found on the top-right corner on your homepage on Facebook.

    ReplyDelete
  5. How could i set a featured image for my whole blog . When i post my link in Facebook . I get images from my posts as thumbnails . I want to my logo as thumbnail for my Blog . How to do that ?

    ReplyDelete
  6. To show your blog's thumbnail when someone shares your post on Facebook you need to add open graph protocol meta tags. It requires add namespace attribution and:
    <meta property="og:image" content="http://blog-logo.jpg"/>
    after <head>

    If you are not sure how to add open graph protocol meta tags to Blogger then wait for few days to post a tutorial.

    ReplyDelete
  7. Hi,
    I tried to add manually the tags, and folowed the "option 2."
    But something is wrong,it doesn't work for me, have you got any idea...
    my page is:www.endre.info

    ReplyDelete
  8. I think you should assign a meta data description. This will solve your problem.

    ReplyDelete
  9. Jelbee, adding <p> tags is more easy than adding description meta tags in Blogger for every post.

    ReplyDelete
  10. not workng in my blog.....

    ReplyDelete
  11. I didn't find any of your posts with paragraph tags. Use it properly.

    ReplyDelete
  12. you have to write the first para, at least containing more than 150-200 words and then you can add the image for your post

    following the p /p tag code alteration, i was able to post around 120-130 characters min. image ahead of it did not make any difference. what did, however, prevent the description from appearing were the blockquote and div tags.

    a post even with just 1-2 lines of text followed by a blockquote or a div, will not return a description. now, if/when i post at least, say 123 characters (inclusive of spaces/punctuation) prior to those tags, no problems then. took me many hours of figuring out.

    my 5c.

    ReplyDelete
  13. WLR is not publishing some posts. I wonder why.

    ReplyDelete
  14. Have you checked the settings?

    ReplyDelete
  15. So i downloaded and did the windows live essentials thing, and windows live writer and still only got one option on Facebook. So I tried writing a brand new blog to test with two pics and got a message that WLR is no longer doing the blog thing and pointed me to Wordpress! All I want is to have the option of thumbnails!! :(

    ReplyDelete
  16. Is that so? Then I've to again download and test it. In meantime try option one or option two. Option 2 will be best for situations like this.

    ReplyDelete
  17. I just tried using Windows Live Writer (option 3) after the first 2 options failed. I was able to post my blog successfully using Windows Live Writer, but the facebook like/share buttons still do not display an image and description! Any help would be greatly appreciated!

    ReplyDelete
  18. Okay, I'm going to see what is causing it, in the meantime, add open graph protocol and report me back by contacting me.

    ReplyDelete
  19. You will get a "Contact me" link at the top of this page.

    ReplyDelete
  20. not working at all.....even with windows writer!!!!!

    ReplyDelete
  21. Is it Legal to put music mp3 in a blogger???

    ReplyDelete
    Replies
    1. Music companies have some legal Rights. As long as you don't void them you are good to go.

      Delete

Don't SPAM! Read comment policy.

Like