Do you want to create a branded Facebook and Twitter application which can be used to send status updates to your Twitter profile, Facebook profile, Facebook fan page from a branded application developed and hosted within your website ?

You might have observed that every Facebook and Twitter update is accompanied by a “via source” field which can be used to brand your website, service or company on the social sites. When your fans and followers see that you’re tweeting or posting from a branded Twitter application, they might get curious about it and check your website, blog or whatever service you’re providing.

In this tutorial, we will learn how to create your own Twitter and Facebook status updater using PHP and oauth.

Demo: Web Based Facebook And Twitter Status Updater

Before trying this project, you can try a demo of the status updater here

Simply login with your Facebook and Twitter account, grant the necessary permissions and you are all set to post status updates and tweets on your social profiles. The app uses oauth for verification and never asks for your Facebook or Twitter account password.

Things You Will Need

You will need the following things to setup your own web based Facebook and Twitter application in your own website:

1. A Web hosting account which supports PHP5
2. A Facebook account
3. A Twitter account
4. The Source Code of the Facebook And Twitter Status Updater

Step 1: Register Your Facebook And Twitter Applications First

First you have to register your Facebook and Twitter application which will be used in the Twitter and Facebook status updater for sending updates to your  Twitter and Facebook accounts.

Setting up a combined Facebook or Twitter application is fairly simple, just follow these simple steps:

A. Register Your Twitter Application

1. Go to twitter.com/apps/new and enter a name and description for the application which you’re going to create. You can also upload a small thumbnail image but this is not mandatory

2. Next, enter the following details in the respective fields:

Application website: Enter the URL of your website where you would be hosting this project. So if you would be uploading all the files at domain.com/projects/twitterapp, enter the same in this field.

Organization and Website: Enter the name of your company and the URL of your company’s website. You can also skip these two fields, they are not mandatory.

Application type: Since you’re going to create a web based Twitter and Facebook application, choose the application type as “Browser”.

Callback URL: Enter domain.com/projects/twitterapp/twitterauth.php. I am assuming that you would be hosting all the files at domain.com/projects/twitterapp

Use Twitter For Login: Select this checkbox “Yes, Use Twitter For Login”. See example of my settings for this Twitter app

3. All set, now save your application settings and you will be given a unique consumer key and consumer secret (see example).

Take note of these two values, you will need them later.

B. Registering your Facebook Application

1. Go to Facebook.com/developers and click “Set up a New App”.

2. Enter a name of your application and a custom description. Remember to enter a good name because this name will be sent to your Facebook status update when you send a new status message. Example: Posted at 22:43 via Your Facebook App

3. After registering your application, click “Edit Application settings” and enter your project URL in the “Website” tab.

Note: You need to enter the same URL of your website where all the files of this project will be saved.

4. Note down the Application ID, API Key and Application secret, as shown in the above screenshot.

Step 2: Set Up The App And Upload To Your Website

1. Download this package which consists all the necessary files required for the status updater to work.

2. Extract the package and open the config.php file with notepad or an HTML editor application like Microsoft Frontpage or Adobe Dreamweaver.

3. Now enter the following details, as shown below:

• $config[‘base_url’]: Enter the address of your website where you will be hosting all the files of your project.
• $config[‘callback_url’]: The same address as above but followed by a “/index.php” (without quotes). See screenshot above.
• $config[‘fb_api’]: Enter your Facebook application’s API Key which you received during registering your Facebook app.
• $config[‘fb_secret’]: Enter your Facebook application’s secret Key which you received during registering your Facebook app.
• $config[‘twitter_consumer’]: Enter your Twitter application’s consumer key which you received during registering your Twitter app.
• $config[‘twitter_secret’]: Enter your Twitter application’s consumer secret which you received during registering your Twitter app.

4. All set, now upload all the files in the same directory of your website as specified in the $config[‘base_url’] field above.

5. Congratulations, you have just finished creating your own Facebook and Twitter status updater that works with PHP and Oauth.

One of the limitations of this project is that there is no support for an integrated URL shortener. But that’s fine considering the fact that you can always create a branded URL shortener and combine these two projects together by embedding the URL shortener page with an <iframe> tag.

Disclaimer: This project is inspired from the Open source Twitter and Facebook updater available at Google Code. Please refer to the original documentation if you want more customizations and are facing any problems setting it up.

If you have any questions or need help, please leave a comment below and we would be glad to help you out.