Search This Blog

Facebook Javascript API : Feed and Share Dialog for Beginners

I received five emails last month especially from students on making their websites social. This post is for them and all others who are interested in social media programming. Facebook Graph API no doubt is a silver bullet and a primary way today that allows us to post and retrieve data from-to Facebook. I am using it since its inception. I must say it is amazing and easy to work with.

This post is all about an interesting Facebook dialog which is powerful and has potential to generate decent traffic for your webpages. If you are a webmaster or an app developer, this post is for you.

Facebook dialogs are cool because they do not require any additional permissions as each one do not require someone to directly interact with them. Facebook offers dialogs for various purposes. I will write about each one of them in coming days. This post will give an introduction to Feed and Share dialog to begin with.

Feed and Share Dialog

Feed dialog allows users to post a story on their/others timeline (Well, after you login). The dialog works even on IOS & Android mobile platforms with a little variation in implementation. In the phone world, we call the same feed dialog as a Share Dialog. Here is how it looks. You might have come across this dialog while browsing websites or when using social media plugins on the blogs yourself.

Javascript Implementation : The fastest way

Idea : Let us have a screen with a login button. Clicking on it should allow a user to login through his facebook credentials. After successful login, our application must show another button, clicking on which would launch the Facebook Feed dialog. Our code should decide what to display in the dialog.

Open Visual Studio, create a new website by name "FBPlayground". Right click on the website name in the solution explorer and add a new html file "FeedAndShare.html".

Open the new file you just created and clear the contents of it. Add the below code, and save it.

After login, just navigate to the "Apps" menu and select "Create a New App". A pop-up will be shown just like this.

Provide a name for your app (In my case, it is Dialo). It can be anything you wish. Leave the namespace field blank. You can select a category which is appropriate for your app. Then, click on the "Create App"
button. It will prompt you to complete a Captcha. Complete it. You are almost done.

Your app is now created. Let us configure it to work with our code. Select the Settings menu from the left pane. You will see the below screen.

Note down the APP ID. We need it later in our code.

Enter the name of App Domain as "localhost" in case you are running this sample on localhost.

Now, click on the "+Add Platform" button to see the below screen. Select "Website". The pop-up would close and you will be back to previous screen with a few additional controls displayed in it.

Now, enter the path to the virtual directory of the application you just created in the "Site URL" field. In my case, it was "http://localhost:62735/FBPlayground". (In your case, the port number would differ. Just run your website and copy the same port number).

Say for example, if the test application you created is available at http://localhost/MyDialogTest, provide the same URL in the Site URL box of the above screen. (In case your app will be hosted on a domain, provide the full URL of the site and virtual directory. This is where users are redirected after they login to your app using their facebook credentials. Just be cautious. This URL is very important and your app only works if you provide a valid URL. In case you are using Visual Studio and running the website using the built-in web server, the port number would vary when compared to the one above. I have provided a sample screenshot below which works for me.

Save the changes.

Do not forget to change the APP ID in the code above with the actual APP ID of your Facebook app.

Running It

In your Visual Studio, set "FeedAndShare.html"as a start page and run the website. You will see the screen below.

Click on the "Login with Facebook" button. You would then see the below screen. (If you don't see the below screen, there are two reasons. The website URL you provided while creating Facebook App is not correct or you have opened the html file directly without a web server.)

Login with valid Facebook credentials. You would then see a screen requesting permission.

Click on the "Okay" button. Now, you will see another option on the screen to launch Feed dialog. The login button would be hidden.

Click on the "Launch Feed Dialog" button. You see see the dialog with all the settings configured. You can just type something and share it on your wall.

Now, Login to facebook and check your wall. You will find the post you just shared. All your friends can see it and share it if they like.

The code is self explanatory. However, I have added a few comments. Go through them. Let me know if it worked for you and even if it doesn't, I will help you to fix it and make it work for you.

Popular posts from this blog

In this post, let us build a small proof of concept for SignalR with two basic screens. Users.aspx: A sample user home page.Admin.aspx: This page is for administrator for sending notifications to all Users. What are we doing? Admin can make announcements. Can just post a title, a message and send it simultaneously to all the users who have opened up Users screen at that point of time. Not a big deal? But, we are going to do that without making the Users screen to refresh to get notifications in any way. No timer is used. Users should see the notification via a live connection .Works like a call over a telephone!

In this post, i have listed the new Features in .Net framework 4.5. All the credits for collecting the features goes to Jouni Hekikneimi, Sami Poimala and Jani Jarvinen of Heikniemi Hardcoded blog.
I have just made an attempt to compile it to a document and share it. If you want to print the original poster, find it here