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='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

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='https://plus.google.com/nnnnnnnnnnnnnnnnnnnnn/about' 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'/>
<b:else/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
</b:if>
<b:else/>
<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'/>
</b:if>
<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.
    xmlns:og='http://ogp.me/ns#'
  • 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.

Comments

Tom Ferrio 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 Morgan said…
Great post, thanks for your help!
Eric Leon said…
I'm lost on the 2nd part where you state the main code requires a change i inserted the code
xmlns:og='http://ogp.me/ns#'


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).
https://plus.google.com/nnnnnnnnnnnnnnnnnnnnn/about
The URL of your FaceBook profile photo (2 locations, above).
http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif
Chuck Croll said…
Eric,

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

Popular posts from this blog

Custom Domain Migration - Managing The Traffic

Your blog depends upon traffic for its success.

Anything that affects the traffic to your blog, such as any change in the URL, affects the success of your blog. Publishing the blog to a custom domain, like renaming the blog, will affect traffic to your blog. The effects of the change will vary from blog to blog, because of the different traffic to every different blog.Followers. People who find your blog because of recommendations by other people.Search engines. Robotic processes which methodically surf your blog, and provide dynamic indexing to people who search for information.Subscribers. People who read your content from their newsfeed reader, such as the dashboard Reading List.Viewers. People who read your content from their browser.No two blogs are the same - and no two blogs will have the same combinations of traffic sources.

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.