Skip to main content

Adding Author Identification, To Post On FaceBook

Similar to the Google Authorship feature, FaceBook provides an author identification feature.

FaceBook uses "Open Graph" code to accomplish what Google provides, with simple back and forward links. The required FaceBook OG code is added to the blog template, as metadata.

To add open graph FaceBook authorship identification to this blog, I added the necessary code to the blog template. You can do the same, with your blog.

Adding FaceBook author identification to a Blogger blog is simply a matter of adding the right meta code to the template header.

(Update 3/14): Blogger Engineering recently added OG code to the standard template header - and some of this tweak may be unnecessary for many blog owners.

Use the Template Editor. Start by locating the "<HTML ... >" tag, at the top of the template header.

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='' xmlns:b='' xmlns:data='' xmlns:expr='' xmlns:og=''>

Then add a code block, immediately after the "<HTML ... >" tag.

<!-- BEGIN Open Graph tags -->
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta content='' property='article:author'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
<meta expr:content='"en_US"' property='og:locale'/>
<!-- END Open Graph tags -->

You will provide similar code, in your blog's template, when you do this. You'll add the code, as above.

  • One small snippet, added to the HTML tag.
  • The main code block, following the HTML tag.

You'll need to change two details, in the main code block, just added.

This is the basic code which is required, for FaceBook Authorship.

The end result - for this blog, home page.

The end result - for this post.

Having added the code to your template, you can verify the code, using the FaceBook Debugger. If necessary, you may need advice from FaceBook Support.

And please, backup the template, before and after you make this change!

This feature should make it easier to publish Blogger links and posts to FaceBook - and to allow us to publish posts containing photos, more reliably. For a version that's slightly easier to understand, one can add simpler Open Graph code to enable proper sharing of posts with photos.


Tom said…
In your suggested code the "postImageThumbnailUrl" resolves to a 72 pixel image (at least for me) which ends up being ignored by Facebook. I had better success with "postImageUrl".
Kacie said…
Great post, thanks for your help!
Unknown said…
I'm lost on the 2nd part where you state the main code requires a change i inserted the code

however the instructions below are hard to understand I just copy and pasted the yellow entire yellow colored script above, it didnt work so I presume I copy/pasted wrong? Does the change happen instantaneously or does it take time?

The main code block, following the HTML tag.

You'll need to change two details, in the main code block.
The URL of your Blogger / Google profile (above).
The URL of your FaceBook profile photo (2 locations, above).
Nitecruzr said…

Please post in Blogger Help Forum, so we can discuss your problem, in detail.

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.