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.
Then add a code block, immediately after the "<HTML ... >" tag.
You will provide similar code, in your blog's template, when you do this. You'll add the code, as above.
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.
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 -->
<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.
- 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
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
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
Please post in Blogger Help Forum, so we can discuss your problem, in detail.