Find solution
How to create a simple Facebook status update Application?

Facebook's Blogger blog post preview is misbehaving.

  • I have a Blogger blog. People other than me have been semi-regularly sharing my blog posts on Facebook. Neat! But I don't like how Facebook previews the content of my blog post. It shows a photo of my face (from my Blogger profile) and the permanent text from my blog's banner. I wish it would preview the beginning of the blog post (and, ideally, not show my face). This issue seems to be Blogger-specific. That's basically my question. So, if you have an answer to that, feel free to skip straight to answering now! But just to elaborate to make sure this is clear... First of all, I realize I can adjust the preview if I want. And anyone can do this. I'm not that annoyed (only slightly annoyed) that I need to take a couple extra steps to adjust the preview. That's not the issue. The issue is: most people don't take the trouble to do this. If they're going to share one of my blog posts on Facebook, they'll probably use the default method. That's what people do, right? They do the default. So the problem is: the default is not what it should be. Let's say my blog always has this at the top (the banner):John's Blog The latest random musings by me!And a typical post of mine will start out like this:Today's Economy The New York Times has an article today saying that the economy is still pretty bad... [More text]And I also have a standard Blogger profile with an icon-like photo of my face. Now, let's say one of my readers shares one of my posts on Facebook (either by copying and pasting the link into their status update or by using the AddThis button on my blog). By default, the preview that will show up on this person's wall and in people's feeds will look like this:John's Blog: Today's Economy The latest random musings by me!To the left of that, there'll be a thumbnail image of my face, which is usually going to be irrelevant to the substance of the blog post. I wish the Facebook preview were more like this:John's Blog: Today's Economy The New York Times has an article today saying that the economy is still pretty bad...Now, I realize that if I really wanted to get my face out of the preview, I could change my Blogger profile photo to something else, like a blog logo. That would be irksome since I like having my face icon on my blog and in my actual Blogger profile -- just not in the Facebook preview. (I suppose I could even create a makeshift thingy for my blog's sidebar that would have my face, by writing up the HTML from scratch.) But the picture is actually a secondary concern. My main concern is the preview text. The fact that it's always my banner tagline is simply inappropriate; that space should be previewing the text of the specific blog post so that readers are enticed to read the whole thing. By the way, I've noticed that this isn't universally the case. With some other Blogger blogs, the preview text is the first comment on the post (which isn't so great either). With other Blogger blogs, there is no preview text at all (which is even worse since that prevents you from adding the appropriate preview text). In contrast, Facebook's preview seems to work well (i.e. preview the opening text) with posts from Tumblr. And Wordpress. And Posterous. And Typepad. So the problem seems specific to Blogger -- but it's not even the same problem for all Blogger blogs. I asked this on Blogger help and they said I should go to Facebook help. I couldn't find an answer on Facebook help. I tried Googling for an answer, but all the search terms I could think of (facebook share blog post preview) are ridiculously broad. There doesn't seem to be a distinctive term for what I'm referring to (aside from "preview," which is so commonly used that it's a useless search term). So I come to you. Does anyone know a way around this?

  • Answer:

    You need to add the following meta tags to your theme using blogger's template tags to dynamically change their content according to the type of page. <meta name="title" content="title" /> <meta name="description" content="description " /> <link rel="image_src" href="thumbnail_image" /> http://developers.facebook.com/docs/share Send me a memail if you need help.

John Cohen at Ask.Metafilter.Com Visit the source

Was this solution helpful to you?

Other answers

If anyone would find it useful to have the URL for my blog so you can try this out, feel free to use the "website" link from my profile; I won't link to it here.

John Cohen

With the pictures, is that the case even when you have an image in the post itself? With wordpress, I know that facebook lets you choose from any photo on the front page (though this isn't automated--I have to pick the relevant picture manually when I link to my site on facebook).

PhoBWanKenobi

With the pictures, is that the case even when you have an image in the post itself? No, and that's a good point. If I happen to have an embedded image in the post (which isn't usually the case), that image will show up in the preview instead of my Blogger profile photo. Of course, this still leaves the main problem of the preview text.

John Cohen

So, am I supposed to copy that code and paste it into my template? I've tried that and it doesn't seem to have an effect. If there's something else I'm supposed to do, I don't know what that would be.

John Cohen

Sorry, apparently what I posted doesn't work. Blogger's modern template system has no way to pull the necessary data to customize the description meta tag, and the classic template system doesn't seem to interpret template tags in the <head>. In an ideal world this <meta name="description" content="<data:posts.body/>" /> would work but it's invalid xhtml and blogger doesn't like that kind of tag outside the page content widget. I don't want to say it's impossible but I honestly have no idea how to accomplish this without doing something crazy like manually defining a new description meta tag for each and every entry and updating your template every time you post. <link rel="image_src" href="yourdefaultimage.jpg" /> should work though, but it may overrule images inside the linked post.

Memo

Lately, when I post a blogger post to facebook, mine's been displaying not a preview of my post, or the banner text, but the text of the post's first comment. Which is even more uncool. Here's hoping someone knows a way to squash this buggy.

changeling

Facebook wants to put a picture with what you're sharing. It scans down the page until it finds some. When you don't have a picture in the post it uses that picture of you because that's what's on the page. The simple answer right now is to put images in your post. Or to take that picture of you off. Either way the idea is make it so something not irrelevant to the post shows up with what is shared. It's not a Blogger issue, it's a Facebook wanting to automagically have something visual since text is boring issue. With anything that has more than 1 image on the page Facebook lets you pick what shows up. I put my own site in there (self hosted WordPress) to share and got a choice of 17 images. Granted, the first one was from the 5th post down the page and the newest post had some of the last images. Obviously it would work better if I was sharing a single post and not the entire site. I don't know how it decided on the order of the images for sharing, but I do know that when I share a single post it uses the NES box art image I have in the post with the second choice being the thumb up or down.

theichibun

Blogger's modern template system has no way to pull the necessary data to customize the description meta tag, and the classic template system doesn't seem to interpret template tags in the . In case it matters, I'm using the new template.

John Cohen

OK, theichibun has convinced me that I'm not going to solve the picture problem (except by including more images in my posts). Anyone have an idea for the text problem?

John Cohen

Load more

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.