September 17, 2011

How to Personalize Your Pages using Open Graph Protocol




The Open Graph protocol enables developers to integrate their web pages in social graph. It is created by Facebook for publishers to fetch structured information into your pages and then it can represent more information about the object itself. Further, it conveys more specific details to search engines about your web pages too. Do I sound like Mr. Technical?

Simply, Facebook Open Graph allows you to define relevant details about your blog / website and its pages. It's about personalizing your web pages to deliver rich set of information to those who interested. Even such information can be very useful if you are gonna implement Facebook social plugins too. Would you like to know more?


Search Engines and Facebook Plugins


For example, human readers or visitors can decide either your site is a blog or static website. But when it comes to search engines and such tools crawling your web pages, they might need specific infromation to decide if yours is a blog or website. Now Open Graph tags come in handy to specify that if you would like to. Further, you can specify a custom title, description, image and so on, for your web pages too. Got the picture? I believe it makes sense as you proceed to the steps below too.

Again, Facebook itself make use of it. Facebook social plugins use the Open Graph tags implemented on your blog / website to personalize the experience for you and your visitors. For example, if you have Facebook comment plugin installed on your site, the moderation settings won't be available if you can't convince the plugin that you are the moderator of your site. Hence you can use an Open Graph tag to convey that you are the admin / one of the admins of your site eligible for moderating comments being left. Once Facebook comment plughin could identify you as the an admin, it will show moderation options for you but none others whose not specified via meta tag.


Keep in Mind


However, your blog or website should be open for public to make use of the Open Graph tags though. Unless, Facebook or search engines won't be able to crawl your pages to fetch the additional information you defined using the meta tags.

Did you come to know that Open Graph tags come in handy for you? You can proceed to steps below and learn how to make use of the basic tags for your blog or website.


Before You Go:

To implement Open Graph meta tags, you need an Facebook Application ID. Read How to Create a Facebook Application for Your Site.


Steps:

1. Search for following tag in your page's source code.

</head>

2. Now add following Open Graph meta tags right before </head> tag, after filling your required information. You should add these tags for each of your website pages.

Note: You should add Required meta tags. Optional meta tags can be added if required.

Required

<meta content='Your Page Type' property='og:type'/>

<meta content='Your Facebook User ID' property='fb:admins'/>

<meta content='Your Blog Name' property='og:site_name'/>

<meta content='Your Application ID' property='fb:app_id'/>


Optional

<meta content='Page/Post Title' property='og:title'/>

<meta content='Page Description' property='og:description'/>

<meta content='URL of Page / Post' property='og:url'/>

<meta content='Image URL' property='og:image'/>


Color Indication Information:

   - Your Page Type

Specify the type of your page here. It depends on the content or type your page. You can find available types here - Open Graph Object Types.

Generally to represent an entire blog or website, you should add below relevant tag to your homepage.

Blog

<meta content='blog' property='og:type'/>

Website

<meta content='website' property='og:type'/>

Now you homepage is done. If you have transient content on other pages (article, blog posts, audio, video), you should specify below tag for each page.

<meta content='article' property='og:type'/>

Note: If you are a Blogger user, you can't edit pages individually. Therefore, just add this code snippet to your template.

<b:if cond='data:blog.pageType == "index"'>
<meta content='blog' property='og:type'/>
<b:else/>
<meta content='article' property='og:type'/>
</b:if>

   - Your Facebook User ID

Add your Facebook User ID here. This will add Facebook admin privileges for your site.

http://graph.facebook.com/[Your Facebook Username]

Notes:

* If you don't know your user id, you can find your Facebook User ID by appending your Facebook username to below URL. If you don't know your Facebook username, you can find your username from http://www.facebook.com/username.

* If you don't have a Facebook username, you can claim one. Read How to Claim a Username in Facebook.

   - Your Website or Blog Title

Specify your website or blog title here.

   - Your Application ID

Application ID of your Facebook application created for your site. You can find your Facebook Application ID aka API key on Facebook Applications page correspond to your application.

   - Page Title

Specify your page title here. It is considered as optional because Facebook will crawl for your page title automatically via title meta tag specified on your page. If you can edit your pages individually and would like to specify this tag, you can add this one.

Note: If you are a Blogger user, you can't edit pages individually. Therefore, just add this code snippet to your template.

<b:if cond='data:blog.pageType == "index"'>
<meta expr:content="data:blog.title"  name="og:title" />
<b:else/>
<meta expr:content="data:blog.pageName" name="og:title" />
</b:if>

   - Page Description

This is your page description aka snippet of your page. It can use to describe your page and content briefly. However if you have description meta tag implemented in your page, Facebook will use it too. So this meta tag is not compulsory. But if you prefer, you can specify it for each of your pages.

Note: If you are a Blogger user, you can't edit pages individually. Therefore, just add this code snippet to your template.

<meta expr:content="data:blog.metaDescription" name="og:description" />

   - URL of Page/Post

Specify the URL of Page here. However it's not compulsory 'cause Facebook will detect your current page URL automatically.

Note: If you are a Blogger user, you don't need to specify this tag.

   - Post Image URL

Specify an URL of image to represent your page here. It will mostly the main image of your page. So when users share your page on their Facebook profile, this image will be added with the post. If you didn't specify this tag, plugin will automatically extract an image from current page.

Note: If you are a Blogger user, you don't need to specify this tag as Facebook will use your post image whenever share your post on Facebook. But usually your homepage could have mix of images. Therefore, if you prefer you can specify your site logo only for homepage, so whenever someone share your blog, it will show up.

<b:if cond='data:blog.pageType == "index"'>
<meta content='Image URL' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>


More Information:

* After adding Open Graph meta tags, you can use Facebook Debugger to see how Facebook treat your pages when Facebook crawl your pages.

* If you would love to learn more about Open Graph protocol, visit The Open Graph protocol website.


Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Mok said...

Hi Mayura,

This post helped me. Earlier today my blog's Facebook Recommendation Bar was showing error of page types. After I implemented the Open Graph meta tags into my blog, the error is gone. Thanks again.

Mok

Mayura De Silva said...

Hi Mok,

Really glad you sort it out :) Facebook recommends having Facebook OpenGraph tags implemented on your blog or website for Facebook Recommendation Bar.

Well, now enjoy Facebook Recommendation Bar on your site :)

Thanks for stopping by and commenting...

Cheers...

greatmenjmt said...

Hello. some days aggo i put the tags on my site and check that all was
fine here: https://developers.facebook.com/tools/debug but im still cant
admin my pages. what should i check? any advice will be appreciated!

Mayura De Silva said...

Hi Mate,


Do you use Facebook comment plugin on your blog or else why you need admin privileges there? :)



Cheers...

greatmenjmt said...

yes my friend, im gonna use it; also i wan to to be able to post things that will show up to my fans, see the insights, etc.

Mayura De Silva said...

Hi Mate,

Are you referring to Facebook pages? :) I feel so.

Well, this is not about Facebook pages but having admin privilege on your blog or website mate. It has no relation with Facebook page :)

You can see insights and post on a Facebook page only if you are an admin of that page :) If you have created it, you become the admin automatically.



Cheers...

greatmenjmt said...

hello

no, im not referring to facebook pages.

im talking about websites with open graph. as i read here: www.appliedi.net/blog/2011/04/08/integrating-facebook-open-graph-with-your-website-and-why-you-want-to-do-this/ and here https://developers.facebook.com/docs/opengraphprotocol/

Mayura De Silva said...

Oops... Now I get a clear picture :)

They are application pages that was available on Facebook and they are no longer exist on Facebook now mate :) Application pages were deprecated.

You can see all the information here related to your application integrated with OpenGraph tags ~ https://developers.facebook.com/apps

Make sure you have a Facebook application created, else you can read ~ How to Create a Facebook Application for Your Site.

Cheers...

greatmenjmt said...

thanks for clarifying it my friend :) but im still a bit confused, ill read about it; and i when i visit mi site i don't appear as admin on facebook plug-ins neither :(

Mayura De Silva said...

The way you have specified your admins tag is wrong mate :)

You have to specify your Facebook ID there not username. Read instructions related to admins tag in this post and make necessary changes there :)

Also you need to specify app_id tag too :) Follow instructions above and add it there mate.



Cheers...

Mayura De Silva said...

Yeah mate :) That's it. Unless you have define it, you won't see admin or moderation panel.

Make sure to create a Facebook app and define with app_id so you can view insights at the place I've mentioned in earlier comment :)


Earlier you could view 'em at application page and now it's changed.

There is no use of being admin than that though mate :) All other stuff matters for advanced Facebook developers to build their own custom apps and integrating in their websites.

Cheers...

Andres D.M said...

Thanks :)

Mayura De Silva said...

You're welcome Andres :)


Cheers...

Theo said...

Hello there, Mayura!
I have a quick issue I would like to address you, as I see you master the FB integration within a website.
Here it is: Until two days ago, whenever I would copy-paste an article link from my website, from browser, into FB, the preview in FB would show, correclty, Article title, picture, excerpt. However, now, when I do the same copy-paste procedure, the picture is fetched correctly (featured), but instead of the title I get the exact copy of the link (http://blahblahblah(dot)ro, and in excerpt I get first the category, author name, date and time and after that a part of excerpt. I hope I made myself understood in my explanation. I am using Add link to Facebook and Yoast SEO. Could you please direct me where to look for the error? Many thanks in advance!

Mayura De Silva said...

Hi Theo,

Most probably, the reason is that title is not being fetched when shared on Facebook mate :) Did you add or update any plugins lately?

First off, test out your links with Facebook Debugger to make sure they can fetch relevant information. If you are not familiar with the process, you can refer Why Link or URL Preview Not Working on Facebook?.

You can enable "Force rewrite titles" option in Yoast and try sharing the link on Facebook. If it doesn't work, turn off "Add Open Graph meta data" setting too and try sharing again.

I'm not sure if "Add Link to Facebook" plugin affects in any way. If anything doesn't work out, you can disable that plugin for a moment and try sharing the link on Facebook.

Let me know how it goes mate :)


Cheers...

Theo said...

Thank you for your reply, Mayura.

Yes, I've updated many plugins lately, due to the newest Wordpress update. As you know, most plugin updates follow wp update almost instant.

I am using the Facobook debugger. I get an old error for an og: value that was there before, but did not interfere with my sharing details fetched.

What I did in the meantime was putting some code lines in my theme's custom-function.php file, specifying the correct og: global values for my website:

function wpc_fb_opengraph() {

$wpc_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');

?>















<?php }

add_action('wp_head', 'wpc_fb_opengraph');



Now I get the title fetched properly, but the excerpt now consist in text that specifies related content titles. I can work with that, but I will lose the "teasing" effect of the excerpt that made readers click on the preview.
I am not sure if the above code did this, though. The change could be due to completion of propagation or something.
I did followed the steps you've kindly pointed out, but at the time nothing changed.
I will get to this later on and do those steps once again, as they make sense. However, I must admit that there are some theme functions and plugin functions that might conflict with each-other as per new updates, but I am afraid to make any changes, to avoid damage to my website.


This is a long block of text. I hope you had the time to read it all. I will try to keep it short in the future :)


Many, many thanks!
Theo

Mayura De Silva said...

Hope it worked out for you Theo :) Some plugins insert OpenGraph tags automatically, including Yoast. But Yoast was having few issues with 'em though. Well, last time I checked it out.


Unless an existing plugin adds OpenGraph tags for your blog, you are safe with custom implementation :)


Anyway, try sharing your links on other social platforms too mate :) Just to make sure.


Cheers...

Fredi Vela said...

Join The discusiĆ³n