Friday, August 21, 2015

Facebook Authorship for Blogspot Blogger. Confirmed working

Hello. As you can see using PC or mobile browser desktop view some people's blog or webpage link share on Facebook is written with author name written in blue link that people can hover to like or follow from the link itself without ever going to the person or page's FB profile.

Most of the links are wordpress based blog. You use blogger platform, you had tried the tutorials written by the others on the web but still the author name is shown either your name or no name or author name with a static text. Are you happy with that? Do you want to know how to change the author name to your FB profile link or FB page link? Read On

how to change author name in FB link shareThis thing is called Facebook Authorship. It was done using Facebook Open Graph. Facebook have it own crawler that find the Open Graph object  and properties and then translates them to human readable form. If the crawler couldn't find any OG propeties, it will use raw meta it could find. The author name will be derived from the blog's author name setting which is derived from the google's account profile








1. First thing first, create a page in FB if you want to be absolute anonymous. You can skip this step if you want to use your personal FB profile
2. Log In to your blogger account
3. Go to your blog name to go to your blog dashboard
4. Click on template, then click on edit HTML
5. Copy these line of texts and paste it in notepad or whatever editor you have

<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>
<meta content='article' property='og:type'/> 
<meta content='[[[[[[ Read this.. Got this ]]]]]]]]]' property='og:title'/>  
<meta content='https://www.facebook.com/learningtoolcheap' property='article:author'/> 
<meta content='https://www.facebook.com/learningtoolcheap' property='fb:profile_id'/>
<meta content='[[[[[[ Read this.. Got this ]]]]]]]]]' property='og:site_name'/>   

Let's see line by line

<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'> This line is used as the prefix. Don't do anything, just copy the line

<meta content='article' property='og:type'/> Nothing to be done. just copy the line

<meta content='[[[[[[ Read this.. Got this ]]]]]]]]]' property='og:title'/>  Replace the red font with your page title

<meta content='https://www.facebook.com/learningtoolcheap' property='article:author'/> Replace the red font with your page or personal FB profile link. This is the blue author line

<meta content='https://www.facebook.com/learningtoolcheap' property='fb:profile_id'/>  Replace the red font with your personal or page FB profile link. This is the facebook id of a user that can be followed. This is useful if you use your personal profile.

<meta content='[[[[[[ Read this.. Got this ]]]]]]]]]' property='og:site_name'/>  Replace the red font with your site name. 

6. Copy all the lines with your own values replacing the red fonts.
how to edit HTML blogger for FB authorship
7. Make space right below <head> line (put cursor at the beginning of the next line after <head> and press enter 7 times)
8. Paste the code right below the <head> line
9. Delete the original <head> line
10. Your template HTML will look like the picture on the right
11. Save the template
12. Open a new tab in your browser
13. Go to https://developers.facebook.com/tools/debug/og/object/
14. Enter your blog link address
15. Click on Fetch New Scrape Information

OG crawler
The picture on the left shows basic info FB crawler read you link. It shows the time, date and like, share, comment count
crawler data
 The picture on the right show OG properties FB crawler could read from your page
crawler data
The picture on the left shows how you link share will show up. Notice the author name had changed to blue link. Click on see this in the share dialog link to see the real appearance






share box
The picture on the right shows the final share dialog



For wordpress or other platform, the steps should be the same but this tutorial was done using blogger platform. This is the way to customize Facebook authorship for blogspot blogger. These steps are confirmed working for blogger patform. Don't forget to put this pages's link on your blog/website if this tutorial helps you then leave your link in the comment section. Your link will be inserted in this blog's link list. Happy trying.

P/S : For additional OG properties, refer
https://developers.facebook.com/docs/sharing/opengraph/object-properties





No comments:

Post a Comment

Yeah, tell me what you think