Saturday, January 14, 2012

Cara Timeline di facebook | Complete Facebook Timeline Tutorial

Complete Facebook Timeline Tutorial
Tutorial
Open Graph BetaOpen GraphTutorial

This tutorial will guide you through the key steps to build, test, and publish your first Open Graph app. We will build a sample app that allows users on your website to publish stories about cooking recipes.

If you're having issues publishing Open Graph actions, make sure to visit: Debug and Troubleshoot section. To help you get started quickly, we've also included the tutorial for download.
Step 1: Create a Facebook App


To create a Facebook app, go to the Dev App, click 'Create New App', and enter your app name and namespace to get started.

Image has been scaled down 8% (650x606). Click this bar to view original image (700x652). Click image to open in new window.
[Image: UM9km.png]


Once you have entered the initial information you will land on the app's basic settings page.[*]Basic Info:Your app namespace. This should be unique to your app and will be used to manage your objects and actions.[*]Select how your app integrates with Facebook:Select the 'Website' choice (For the tutorial, we will demonstrate a website integration with Open Graph)[*]Enter a Site URL.

Once you have set up the basic information you can add the Add to Timeline plugin for your website and define your Open Graph action and object.
Step 2: Authenticate Users


In order to publish Open Graph Actions for users, your app needs to prompt users with publish_actions permission. You can use the Add to Timeline plugin, which automatically prompts the user for this permission.

Here is some code, using the JavaScript SDK, to help you get started right way. Make sure to update with YOUR_APP_ID and the sample image URL.
Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"xmlns:fb="https:/www.facebook.com/2008/fbml"><head><head/><body><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><script>FB.init({appId:'YOUR_APP_ID', cookie:true,status:true, xfbml:true, oauth:true});</script><fb:add-to-timeline></fb:add-to-timeline><h3><font size="30" face="verdana" color="grey">Stuffed Cookies</font></h3><p><img title="Stuffed Cookies"src="http://example.com/cookie.jpg"width="550"/></p></body></html>

You'll notice that your plugin may generate a relatively empty preview and clicking the Add to Timeline button generates an empty permission dialog.

Image has been scaled down 3% (650x372). Click this bar to view original image (670x383). Click image to open in new window.
[Image: uYFxl.png]


To populate the Auth Dialog and the Add to Timeline plugin with app specific info, refer to the Auth Dialog guide.
Step 3: Define Actions, Objects, and Aggregations


The Open Graph tab of the Dev App shows the "Getting Started" tab of the tool:
Image has been scaled down 3% (650x372). Click this bar to view original image (670x383). Click image to open in new window.
[Image: uYFxl.png]


Define Action Type and Object Type


The Getting Started wizard walks you through the process of defining your initial action and object.
  • Click 'Open Graph' tab under your app settings.
  • Click 'Getting Started'.

In this tutorial you will set up your app so that users will take action and be able to cook a recipe.In order to do so, we will define an action (or verb) called cook and define an object (or noun) called recipe.
  • Enter cook in the verb field and recipe in the noun field.
  • Click 'Get Started'.

The next step in the wizard allows you to define your action, cook with custom properties and sample data. We will use the default action configuration in the tutorial. Click Save Changes and Continue.

[Image: 6gZQV.png]

The next step in the wizard allows you to define your object, recipe with custom properties and sample data. We will use the default object configuration in the tutorial. Click Save Changes and Continue.

[Image: 5qbtI.png]

Define an Aggregation

The next step in the wizard allows you to define an aggregation.

Image has been scaled down 8% (650x639). Click this bar to view original image (700x688). Click image to open in new window.
[Image: 7nYwG.png]


When a user interacts with your app in a meaningful way, we will also highlight the user's actions on the Timeline with an aggregation. Aggregations are also used to populate the Auth Dialog Showcase section.

Let's create an aggregation to highlight a list of recipes cooked:[*]Data to Display - We're looking for a list of cook actions, so enter cook here. [*]Layout Style - Select List[*]Sort By - Select Most Recent Cook[*]Aggregation Title - Enter a user friendly title for the aggregation, such as "Recipes I've Cooked"[*]Caption Lines - You can reference your object's custom properties, or action properties here. Let's leave this blank for our tutorial, more info about captions, can be found here. [*]In Timeline - Preview how your aggregation will appear in Timeline. Click Save and Finish to return to the Open Graph Dashboard.

Once your changes are saved you are done defining your objects, actions, and aggregations. The Dashboard view of your Open Graph settings will show a summary of your information.

The next section will walk you through how to publish your first actions and display an aggregation on a user's Timeline.
Step 4: Publish Actions


In order to publish an action for a user, first you'll need to create an object, based on the object defined in Step 3.

Once an object is created, you can use the Graph API to publish an action.


Create an Object


The Open Graph Dashboard page has a 'Get Code' link next to your object: Recipe. This contains the Open Graph meta tags for the object that you'll need to include on your web page.
  • Copy and paste your code snippet into a web page. Make sure to host your web page in a location where Facebook will be able to access it via HTTP GET.
  • Use the debugger tool to verify your meta tags are set up correctly by inputting your web page URL. Resolve any warnings generated.
  • Note the object URL because you will be using it to publish your action

Here is the updated page with the <meta> tags added. Make sure to update with YOUR_APP_ID and image URL:
Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"xmlns:fb="https:/www.facebook.com/2008/fbml"><head prefix="og: http://ogp.me/ns# YOUR_NAMESPACE:http://ogp.me/ns/apps/YOUR_NAMESPACE#"><meta property="fb:app_id" content="YOUR_APP_ID" /><meta property="og:type" content="YOUR_NAMESPACE:recipe" /><meta property="og:title" content="Stuffed Cookies" /><meta property="og:image" content="http://example.com/zhen/cookie.jpg" /><meta property="og:description" content="The Turducken of Cookies" /><meta property="og:url" content="http://example.com/zhen/cookie.html"></head><body><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><script>FB.init({appId:'YOUR_APP_ID', cookie:true,status:true, xfbml:true, oauth:true});</script><fb:add-to-timeline></fb:add-to-timeline><h3><font size="30" face="verdana" color="grey">Stuffed Cookies</font></h3><p><img title="Stuffed Cookies"src="http://fbwerks.com:8000/zhen/cookie.jpg"width="550"/><br /></p></body></html>


Publish an Action


Publishing an action connects the user to the object you created. The Open Graph Dashboard page has a 'Get Code' link next to your action. This contains curl code snippets that you can copy into terminal and run directly.

Publishing an action involves making an HTTP POST to the me/[namespace]:[action_type] Graph API endpoint with the following parameters:
  • [object_type]: a link to a web page representing an object.
  • access_token: a valid user access_token with publish_actions permissions.

For example, sending a POST to:
Code:
https:/graph.facebook.com/me/YOUR_NAMESPACE:cook?recipe=OBJECT_URL&access_token=ACCESS_TOKEN

This will publish a cook action for the recipe corresponding to the provided OBJECT_URL. Replace OBJECT_URL with your web page URL.

Here is the updated sample app with Action creation enabled for the Cook button click:
Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"xmlns:fb="https:/www.facebook.com/2008/fbml"><head prefix="og: http://ogp.me/ns# YOUR_NAMESPACE:http://ogp.me/ns/apps/YOUR_NAMESPACE#"><meta property="fb:app_id" content="YOUR_APP_ID" /><meta property="og:type" content="YOUR_NAMESPACE:recipe" /><meta property="of:title" content="Stuffed Cookies" /><meta property="og:image" content="http://example.com/cookie.jpg" /><meta property="og:description" content="The Turducken of Cookies" /><meta property="og:url" content="http://example.com/cookie.html"><script type="text/javascript">function postCook(){FB.api('/me/YOUR_NAMESPACE:cook' +'?recipe=http://example.com/cookie.html','post',function(response) {if (!response || response.error) {alert('Error occured');} else {alert('Post was successful! Action ID: ' + response.id);}});}</script></head><body><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><script>FB.init({appId:'YOUR_APP_ID', cookie:true,status:true, xfbml:true, oauth:true});</script><fb:add-to-timeline></fb:add-to-timeline><h3><font size="30" face="verdana" color="grey">Stuffed Cookies</font></h3><p><img title="Stuffed Cookies"src="http://example.com/cookie.jpg"width="550"/><br /></p><form><input type="button" value="Cook" onclick="postCook()" /></form></body></html>

Click the cook button, if the publish is successful you will get an id returned that represents the newly published action. Congratulations! You have now published an action and completed the basic steps in getting your Open Graph app up and running.

In order to view an aggregation on your Timeline, we need to create a few more actions. Create a few more objects using the method mentioned above and trigger a few more actions.You need to publish at least 5 actions to see an aggregation on your Timeline.

Go to your Timeline on Facebook and you may see your app's aggregation:

Image has been scaled down 16% (650x812). Click this bar to view original image (773x965). Click image to open in new window.
[Image: sIx6y.png]


Previewing Stories from Published Actions

You can preview News Feed stories created when publishing actions by going to https:/www.facebook.com/USER_ID/activity/STORY_ID, where USER_ID is the user's Facebook ID or username, and STORY_ID is the action-instance-id as described below. For example:

https:/www.facebook.com/dhirenp/activity/10100657260775943

The user must have appropriate permissions in order to view the preview.

Image has been scaled down 12% (650x602). Click this bar to view original image (732x677). Click image to open in new window.
[Image: UbfLC.jpg]


Step 5:Add Social Plugins

Add one or more Social Plugins available for Open Graph apps.

On your object web page, you can add any of these plugins to highlight Open Graph actions. For our tutorial, let's add the new Activity Plugin.
Activity


Activity Plugin has been updated to highlight your app's custom Open Graph actions.

To add an Activity Plugin:
Code:
<fb:activity actions="YOUR_NAMESPACE:ACTION-TYPE"/></fb:activity>

Here is the entire tutorial, with Add to Timeline, posting an action, and the Activity plugin on a single page:
Code:
<head prefix="og: http://ogp.me/ns# YOUR_NAMESPACE:http://ogp.me/ns/apps/YOUR_NAMESPACE#"><meta property="fb:app_id" content="YOUR_APP_ID" /><meta property="og:type" content="YOUR_NAMESPACE:recipe" /><meta property="og:title" content="Stuffed Cookies" /><meta property="og:image" content="http://example.com/cookie.jpg" /><meta property="og:description" content="The Turducken of Cookies" /><meta property="og:url" content="http://example.com/cookie.html"><script type="text/javascript">function postCook(){FB.api('/me/YOUR_NAMESPACE:cook' +'?recipe=http://example.com/cookie.html','post',function(response) {if (!response || response.error) {alert('Error occured');} else {alert('Post was successful! Action ID: ' + response.id);}});}</script></head><body><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><script>FB.init({appId:'YOUR_APP_ID', cookie:true,status:true, xfbml:true, oauth:true});</script><fb:add-to-timeline></fb:add-to-timeline><h3><font size="30" face="verdana" color="grey">Stuffed Cookies</font></h3><p><img title="Stuffed Cookies"src="http://example.com/cookie.jpg"width="550"/><br /></p><form><input type="button" value="Cook" onclick="postCook()" /></form><fb:activity actions="YOUR_NAMESPACE:cook"></fb:activity></body></html>

Step 6:Submit Your Actions For Approval

We are introducing a lightweight review and approval process before your app can publish Open Graph actions to all users.

Image has been scaled down 35% (650x545). Click this bar to view original image (994x832). Click image to open in new window.
[Image: MBHGJ.png]


Open Graph activity will be immediately visible to the administrators, developers and testers of your app. This allows you to do end-to-end testing of your integration. Once that is complete, submit your actions via the Dev App for review.

After we have verified that your use of the Open Graph meets our criteria, we will approve your app to publish your actions to all Facebook users. Please note that we are not approving your app, just your use of the Open Graph Actions.

See here for further details on the process.
Debug and Troubleshoot


Here are some helpful tips for when you're having problems creating objects or actions for your app:
How to verify your Objects are in the graph
  • Using the object debugger, you can validate your objects to make sure you have the needed meta tags.
How to verify your actions are published
  • Make sure your objects are properly defined with the object debugger
  • Make sure you are using the right namespace for your API call. Remember that namespace cannot be modified once saved.
  • Make sure you have removed the &expires token from your access_token before making the Graph API call
  • Make sure you are getting an id return from the Graph API POST call
Why am I getting "This method must be called with an app access_token" error when publishing an action?
  • Uncheck the "Require app access token to write" checkbox on the settingspage (advanced section) for your action type in the Dev App.
Sample Code


This tutorial is available for download in our Open Graph Samples.Report Documentation Bug


Facebook © 2011

No comments:

Post a Comment