You are only in a hurry till you get to the front of the queue

Friday, 2 January 2015

Tutorial: Integrate your Website with Facebook's Open Graph & Social Plugins

Tutorial: Integrate your Website with Facebook's Open Graph & Social Plugins:



'via Blog this'



Tutorial: Integrate your Website with Facebook's Open Graph & Social Plugins

Now that you have created a Facebook App ID for your website, you need to associate that App ID with your website, by modifying the <html> tag for your site and, on each page, adding the Open Graph meta data to facilitate the Facebook Social Plugins.

The essential meta tags you need to add to your website pages

NOTE: This part requires at least some knowledge of Web coding, as you must edit the HTML of your website pages.
NOTE: If your website is built on the WordPress CMS, read our tutorial on adding the Open Graph meta tags to your WordPress website or blog.

Step 1: Modify your <html> Tag

You’ll need to modify your <html> tags to include some Facebook-specific tags:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">

Step 2: Add the Open Graph Meta Tags

These meta tags communicate to the Facebook APIs the information necessary to integrate your website with the Open Graph protocol. (Facebook calls this “turning your web pages into graph objects.) The tags must be placed within the <head> </head> tags of your HTML file.
The required Open Graph tags are:
  • fb:app_id This is the numeric value provided when you created your Facebook app;
  • fb:admins Numeric Facebook User IDs. Separate multiple IDs with commas if you want more than one user to access Insights. (See feature box, below);
  • og:title The title of your page/object as it should appear within the graph, e.g. “My Page Title”;
  • og:type The type of your object, e.g., “movie”. Here’s a complete list of supported og types;
  • og:image The full URL to the image to represent your object within the graph. It must be at least 50px by 50px, have a maximum aspect ratio of 3:1, and be in either PNG, JPEG or GIF format. You can include multiple og:image tags to associate multiple images with your page;
  • og:url The full URL of the page on which the tag is added.

How to find out a Facebook user’s numeric Facebook ID

Navigate to the user’s personal profile.
If the user has a “vanity URL” (eg facebook.com/timware):
From your browser’s address bar, copy just the user name (whatever is between“facebook.com/” and, if there is one, “?”):
Facebook Vanity URL with Parameters
or
Facebook Vanity URL - No Parameters
Then go to this URL: http://graph.facebook.com/[username], substituting the username for “[username]”, and you’ll see the info about that user that’s available in the Open Graph, including the user’s ID:
Facebook Open Graph Data
If the user doesn’t have a vanity URL:
Just visit their Facebook profile and, in your browser’s address bar, you’ll see something like this:
Facebook Profile User ID
The string of numbers following http://www.facebook.com/profile.php?id= is the value you want for the user’s Facebook ID.
You now have the numeric user IDs for use with your Open Graph meta tags.

Adding the Open Graph meta tags to your website page(s)

Here are the Open Graph meta tags that should (You can place them after the <title> tags and “description” meta tag):
<head>
<meta property="fb:app_id" content="YOUR-APP-ID" />
<meta property="fb:admins" content="USER_ID,USER_ID"/>
<meta property="og:title" content="Page Title"/>
<meta property="og:type" content="TYPE"/>
<meta property="og:url" content="http://www.mydomain.com/page-url"/>
<meta property="og:image" content="http://URL-TO-IMAGE"/>
<meta property="og:description" content="Description of page content" />
...
</head>
You can read more about this on Facebook’s Open Graph Protocol page.

Step 3: Add the Like Button or other Social Plugins to your Website Pages

Facebook’s Social Plugins integrate your website with Facebook, once you have created a Facebook application for your website to make it an “object” in the Open Graph.
First, as mentioned earlier, you must add a call to the JavaScript SDK, if you use the XFBML/HTML5 version of the social plugin (which I recommend).
You will add the below code right after the opening <body> tag on each Web page.
<div id="fb-root"></div><script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR-APP-ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Adding the Like Button to your Web Pages

Facebook generates the Social Plugins code for you, on its Social Plugins page.
You should choose one of the two flavors of XFBML, either HTML5 or XFBML. If you use the iFrame version, you won’t get user-interaction data via Insights, and users won’t be able to add a comment to the Like they make.
However, for users who can’t modify their WordPress code, either the iFrame method or the use of a WordPress plugin will be their only options.
The Social Plugins you can use on your website are:
For each plugin you wish to add to your Web pages, simply visit the plugin page, add the parameters into the “configurator” (as Facebook calls it), then click the “Get Code” button.
Facebook now enforces your associating the plugin with an existing App ID that you admin. You will probably want to associate with the Facebook application you created for your site or blog to get an App ID, and your site should appear in the pull-down menu next to “This script uses the app ID of your app”.
Just add the code Facebook provides for your plugin where you want it to appear on your Web pages.

“Like” or “Recommend”?

The Like Button comes in two flavors — “Like” or “Recommend” — and, for some types of content, “Recommend” may be more appropriate than “Like”, say an article on a natural disaster or other such bad news. Otherwise, we generally recommend using Like over Recommend.

0 comments :

Post a Comment

Thank you for taking the time to comment. Your opinion is important and of value and we appreciate the positive feedback! If you are "Negative Nancy" then please do us, and humanity, a favor and piss off.

Total Pageviews

Google+ Followers

Interesting pages

Blog Archive

Popular Posts

Recent Comments

Rays Twitter feed

Ads

Web sites come and go and information is lost and therefore some pages are archived. @rayd123 . Powered by Blogger.