AzoftCase StudiesUsing JavaScript for Facebook & Twitter Integration

Using JavaScript for Facebook & Twitter Integration

By Anton Kavytin on January 21, 2013

When ordering custom software applications, Azoft clients often request social network integration features. This is not surprising at all, considering that most businesses today use social media to maximize their online presence. One way to integrate websites with Twitter and Facebook is by using JavaScript. This is a relatively simple task because both social networking services provide very handy APIs. However, implementing customized login or publish buttons requires a bit of work. Here's how to do it.

Signing in with Facebook

Start by initializing all the scripts required for the API functioning:

Then, simply connect doFBLogin function to the button's click event.

Important! Don't forget to use the appId of your application to avoid authentication problems on the Facebook server. Not using the proper appId may result in authentication errors or other problems.

Signing in with Twitter

Just like in the Facebook example above, connect doTWSignIn function call to the button's click event. As you've noticed, using Twitter and Facebook as account providers for your website is a trivial task.

Let's see how to add buttons for publishing status updates to Twitter and Facebook via their APIs.

Publishing to Facebook

The example below shows how to publish a post on the Facebook Wall:

function doFBStreamPublish(message) {
	var name = ‘’;//your app name
	var hrefLink = 'http://87.251.89.54/iCarsWeb/index.html';//your app link
	var userPrompt = 'qwerty';
	FB.ui(
	{
		method: 'stream.publish',
		message: message,
		description: message,
		name: name,
		link: hrefLink,
		actions: { name: name, link: hrefLink 
	},
	function(resp) {
		if(resp ) {
			alert(‘You post a link to iCars on your wall on Facebook!');
		}
	});
}

As with the login button example above, it's enough to connect doTWSignIn function call to the button's click event.

Publishing to Twitter

To create custom Twitter publishing dialog first design an HTML "div" element with a unique ID. This ID should be passed as an argument to the publish function or stored in a global variable.

var block_id = ‘tweet-box’;
function doTWStreamPublish(message) {
	twttr.anywhere(function (T) {
//check if we have logged in. If yes, show the Twitter text block
		if(T.isConnected()) {			
			T("#tweet-box").tweetBox({
				height: 100,
				label: 'Tweet invites to iCars',
				width: 365,
				defaultContent: message,
				onTweet: function(tweet, HTML) {
					//any action after a twitt
				},
				data: {
					status : message
				}
			});
//else log in again, if all's fine - show the Twitter text block
		} else {
			T.signIn();
			T.bind("authComplete", function (e, user) {
				T("#tweet-box").tweetBox({
					height: 100,
					label: 'Tweet invites to iCars',
					width: 365,
					defaultContent: message,
					onTweet: function(tweet, HTML) {
						//any action after a twit
					},
					data: {
						status : message
					}
				});
			});
		}
	});
}

As with the login button example above, connect doTWStreamPublish function call to the button's click event.

Important! Twitter has a problem with duplicate tweets. If a tweet is published twice, the spam protection mechanism rejects the tweet and returns an error, but this error cannot be handled in the client. The documentation does not describe the error and there is no function that handles duplicate tweets.

To learn more about Facebook and Twitter integration possibilities read the API documentation for the appropriate service. It's very comprehensive and easy to follow, a highly recommended read.

VN:F [1.9.22_1171]
Rating: 4.4/5 (7 votes cast)
VN:F [1.9.22_1171]
Rating: +5 (from 5 votes)
Using JavaScript for Facebook & Twitter Integration, 4.4 out of 5 based on 7 ratings

Content created by Anton Kavytin