Facebook's Blogger blog post preview is misbehaving.

September 20, 2010 10:43 PM

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?

posted by John Cohen to computers & internet (16 answers total)

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.
posted by John Cohen at 10:45 PM on September 20, 2010

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).
posted by PhoBWanKenobi at 10:51 PM on September 20, 2010

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.
posted by John Cohen at 10:55 PM on September 20, 2010

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" />


Documentation page about Facebook Share

Send me a memail if you need help.
posted by Memo at 11:24 PM on September 20, 2010 [5 favorites]

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.
posted by John Cohen at 11:37 PM on September 20, 2010

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.
posted by Memo at 12:40 AM on September 21, 2010

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.
posted by changeling at 2:01 AM on September 21, 2010

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.
posted by theichibun at 4:45 AM on September 21, 2010

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.
posted by John Cohen at 6:34 AM on September 21, 2010

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?
posted by John Cohen at 6:36 AM on September 21, 2010

Can you insert a picture (like a logo for your blog or a cropped version of the header image) in the right column? Where it starts with "New to this blog?" -- that would give Facebook something "higher up" than your profile picture to auto-grab.

I'm also curious what text facebook would grab if you got rid of the quote in the header, which is what facebook is pulling right now. Would it default to the next text block?
posted by polexa at 6:54 AM on September 21, 2010

Can you insert a picture (like a logo for your blog or a cropped version of the header image) in the right column? Where it starts with "New to this blog?" -- that would give Facebook something "higher up" than your profile picture to auto-grab.

Yeah, I should probably do that. Thanks.
posted by John Cohen at 7:14 AM on September 21, 2010

I'm also curious what text facebook would grab if you got rid of the quote in the header, which is what facebook is pulling right now. Would it default to the next text block?

Well, I'll try that ... but I really don't want to get rid of the banner text.
posted by John Cohen at 7:14 AM on September 21, 2010

I'm also curious what text facebook would grab if you got rid of the quote in the header, which is what facebook is pulling right now. Would it default to the next text block?

Well, I tried deleting the banner text, and this does fix the Facebook preview text! That is, Facebook now previews the opening text of the specific blog post. The problem is, as I said, that the banner text is important to me.

I suppose I should get to work on taking that text and adding it to the background image of my banner so that Facebook doesn't read it as text! How annoying!
posted by John Cohen at 7:21 AM on September 21, 2010

Can you insert a picture (like a logo for your blog or a cropped version of the header image) in the right column? Where it starts with "New to this blog?" -- that would give Facebook something "higher up" than your profile picture to auto-grab.

Actually, I tried this and it doesn't seem to work. Right now, I have a sidebar widget (right above my Blogger profile) that's just a screen shot of my blog's name, as if it were a logo. When I post one of my posts to Facebook, my face from the profile still shows up there.
posted by John Cohen at 7:35 AM on September 21, 2010

Well, thanks for the effort, everyone, but I've added the "stumped" tag.
posted by John Cohen at 12:38 PM on September 21, 2010