Thursday, October 11, 2012

Blogger + Facebook/Opengraph, Y U NO play nicely?

I recently realized that my Blogger posts showed a weird behavior in the Facebook sharer: Instead of the summary displaying the first few paragraphs of my actual post, it was using the first comment below the post.

A comment as a post summary? Really? This was bad.

At first I thought I might have messed up my Blogger template. After years of edits and tweaks, I just might have tinkered with something I shouldn't have. So, to test what was really going on, I made a completely new Blogger blog using the clean and untouched stock template titled 'Simple'. You're on it.

I created my first post, gave it a title: "This is my post title", and body text: "This is my post body. This is what OpenGraph should see and summarize from [...]". And I added an image of rainbow-colored licorice for good measure.

Next, I wrote a first comment below my new post saying "This is a comment, and should not be in an OpenGraph share summary [...]".

All set and ready to test. I brought my brand new post to the Facebook sharer. And, lo and behold:



Aha! Me messing with my template was not the issue. This is obviously the default behavior.

But, the problem exists nonetheless. And I realize that now I'm up against two giants: Google (the Blogger team) and Facebook (the OpenGraph team). Not exactly outfits you can just call up and say, "Hey, guys, mind fixing this?"

So that's basically where it's at right now. Back at my regular blog I have tried different kinds of hacks and tweaks (excuse the geekery here): explicitly providing the Opengraph meta-tags in my Blogger template for starters. But this deals only with the data that is already correct, i.e. og:site_name, og:url, og:type, og:title and og:image. I have as of yet not figured out a way to get a snippet of Blogger's post.body into an og:description since it seems to not yet exist up in the <head> portion of the page where the meta tags reside (//end of geekery portion). But even if I could figure out a way around this error, I shouldn't have to. Neither should anyone else on the Blogger platform.

So, are you experiencing the same problem? Sitting on an idea or solution? Working at Google or Facebook? Don't hesitate to make yourself heard in the comments! (Hell, you might even show up in the OpenGraph summary of this post).

Links
» My test post on this blog
» My test post in the Facebook sharing dialog
» My test post through the Facebook Opengraph debugger


EDIT: Tech-blogger George B. Moga was familiar with the issue. Hit the jump for more info.

This is my post title


This is my post body. This is what OpenGraph should see and summarize from. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac enim nec lectus tempor posuere vitae eget ipsum. Nam fermentum interdum scelerisque. Sed nunc augue, ultricies at porta at, vestibulum nec nunc. Ut congue, turpis ut dictum malesuada, sem ligula vehicula ipsum, et laoreet eros neque nec tellus. Quisque nec mauris a metus ultrices rutrum. Vestibulum erat neque, dapibus nec scelerisque sit amet, pulvinar vel justo.

Nam et dictum odio. Etiam nulla nulla, interdum nec porta vel, sollicitudin sed libero. Donec mollis, quam a mollis sollicitudin, arcu nunc porttitor nisi, nec placerat ante nibh tempor velit. Morbi porta ornare elit, in vulputate metus congue vel. Nullam neque ante, tempor et venenatis ut, facilisis sit amet arcu. Nulla id turpis ante. Donec sapien dolor, semper quis eleifend pulvinar, tincidunt quis tortor. Sed adipiscing risus eget mi laoreet tempor. In aliquet congue tempus. Curabitur id ipsum nec erat tempor vulputate.

Phasellus ullamcorper vulputate dictum. Etiam nec lorem est. Suspendisse potenti. Quisque congue venenatis faucibus. Donec vel nisl ipsum. Proin auctor dui non tellus pulvinar dignissim. Vivamus ullamcorper varius egestas. Sed ut nibh a justo sollicitudin placerat mattis sed odio. Proin vehicula ipsum convallis nisi pulvinar laoreet.