Using Javascript SDK popup dialog to post to facebook wall

3,848

January 29, 2012 by admin

With the new  javascript SDK  you can create a “post to wall facebook dialog”  that will work in an iframe application and on your external website.

This is a great feature because you do not need any server side interpretation from your server, which mean all you need is just a hosting area .

The post to wall dialogue is known by anybody who uses facebook. People are more likely to share your content if the they see an item they trust and recognize. The facebook dialogue box is one of them.

I am going to show you how to create one, for use anywhere on your site.

Before you start you need to register an application on facebook. This is because facebook needs to use a secret key and application id to do these task. So even thogh you may not use the application you will need its secret key and app ID to generated the publish to wall dialogue.

Creating an application is easy. At the time of writing this tutorial i have not completed my three part series on how to creat an application on facebook, so if you dont know how just google “Creating an application on facebook”. Once you have created this come back to this tutorial.

Once you created the app you will be presented with a secret key and application id, this is all you need to get started.

The JavaScript SDK enables you to access all of the features of the Graph API and Dialogs via JavaScript.

So lets go:

You load the SDK using the standard <script> element and calling (FB.init()). You must specify a <div> element named fb-root within the document as well. Below is an example of initializing the SDK with all the common options turned on:

[HTML]

<script >
window.fbAsyncInit = function() {
FB.init({appId: <APP_ID>, status: true, cookie: true,   xfbml: true});
};   (function() { var e = document.createElement(‘script’); e.async = true;
e.src = document.location.protocol +   ‘//connect.facebook.net/en_US/all.js’;
document.getElementById(‘fb-root’).appendChild(e);  }());
</script>

[/HTML]

Put this at the top of your page.  Make sure you put your app id in place of  APP_ID

Now to build the post to wall dialogue:

All we are doing is creating a JavaScript function with the post to wall facebook ui in it.

[HTML]

<script>
function publish_to_wall(){
FB.ui({ method: ‘stream.publish’, message: ‘This is a simple post to appshack.tv’ });
}
</script>

[/HTML]

Now create a link to activate the function

 [HTML]<a href="javascript:publish_to_wall()">Publish to your wall</a> [/HTML]

fig 1


As you will notice this will not bring up the facebook themed pop up unless the user has already approved your application. Normally you do not want to force a user to authenticate your application just to post to their wall unless it is tied to some special task before or after posting. This is also a breach of facebook terms and condition.

But assuming your application did require a user authentication before/after posting  the code should look like this:

[HTML]

<script>
function publish_authenticated(){ FB.login(function(response) { if (response.perms) { publish_to_wall(); } }, {perms:’publish_stream’});}
</script>

[/HTML]

This checks if the user has authenticated your application (If user has not authenticated it brings up the standard facebook authentication box) before bringing up the publish dialog box. Once the has authenticated, it then calls the earlier function publish_to_wall(). The last bit in the code is where you can set what extra permissions/authentication is required before the user can post. If left empty it just does a standard level of authentication which should be enough. If you needed extra permission by the user you just need to list them seperated with a comma i.e

 [HTML]........
}, {perms:'publish_stream,offline_access'});} [/HTML]

The user experience should look like this:

When they click to post they will be prompted to grant access

fig 2

Once they have granted access or click in allow they will now see this:

fig 3

As you can see comparing fig 1 and fig 3 shows they do pretty much the same thing but because in fig 3 the user has granted access you get the facebook themed popup.

So what happens if the user doesn’t authenticate  i.e they click Don’t allow ..well nothing the box disappears. Now this is not good for user experience.  In other words if a user was going to use your app to post to their wall closed the permission dialog you may loose that engagement as they may not bother to go through the process that prompt the post to wall in the first place.

 

So let us refine the code to

1. prompt a post to wall
2. Ask for extra permission first
3. If they click on dont allow then just revert to the normal post to wall that does not require authentication.

The code should now look like this:
[HTML]

<script>
function publish_universal()
{
FB.login(function(response) {
if (response.session) {
if (response.perms) {
publish_to_wall();
}else {
publish_to_wall();
}
}else {
publish_to_wall();
}
}, {perms:’email’});
}
</script>

[/HTML]
This function will prompt the post to wall dialog regardless of if the user has granted permission or not, (If the user clicked on “don’t  allow” button on fig 2 they will be presented with fig 1 type post dialog.) It will also check if the user is logged into facebook, if not they are prompted to login, then prompt permission, and then prompt to post.

If they don’t complete the posting process , they probably didn’t like your app in the first place, but you have done your bit.

Click here for a life example 

Like now to activate download link

Download the source  here 

Related posts:

  1. Using Javascript SDK popup dialog to post to facebook wall
  2. Create a Customizable facebook Dialogue with Javascript SDK
  3. Removing Scrollbar from iframe facebook page tab Part 1
  4. How to get more fans with the like button on facebook
  5. Creating a fangate for your facebook pages

Category Downloads, How To, Tutorials | Tags: , , , ,

»
«