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