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 DialogFeed 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.
- 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.
- The next thing you should do is to create a facebook app. With your Facebook credentials, login to official Facebook developer apps platform https://developers.facebook.com/apps
- 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).
- 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.