Сторонние сервисы и JavaScript: интеграция с Facebook и Twitter

Заказывая приложения в Azoft, компании часто просят добавить интеграцию с целым списком социальных сетей, что сегодня, в общем-то, не удивительно. Интеграцию с Facebook и Twitter мы делаем с помощью JavaScript. Задача это не трудная, т.к. разработчикам предоставляется удобное API, и единственная сложность может возникнуть, если требуется сделать персонифицированные кнопки авторизации или опубликовать персонифицированные сообщения — именно об этом и пойдет речь ниже.

Авторизация через Facebook

Сначала нужно подключить все необходимые скрипты для функционирования API. Затем достаточно привязать функцию doFBLogin на щелчок по нужной кнопке.

Важно! Желательно указывать appId именно вашего приложения, чтобы не было проблем при идентификации его на серверах Facebook. В противном случае могут возникнуть ошибки при авторизации или выполнении других функций.

Авторизация через Twitter

Так же, как и для Facebook, привязываем вызов функции doTWSignIn по щелчку на нужную кнопку. Как видите, настроить авторизацию через Facebook или Twitter достаточно просто.

Теперь рассмотрим возможность публикации на стену в учетной записи Facebook, а также создание твита в Twitter через API.

Пост на стене Facebook

Отправка сообщения на стену в Facebook осуществляется следующим образом:

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!');
		}
	});
}

Как и в случае авторизации, достаточно привязать функцию doFBStreamPublish к щелчку по нужной кнопке.

Твиты в Twitter

Для того чтобы сделать персонифицированную публикацию сообщения в Twitter, необходимо сделать блок в HTML, присвоить ему уникальный ID, а затем этот ID передавать в функции публикации либо хранить в качестве глобальной переменной.

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
					}
				});
			});
		}
	});
}

Аналогично публикации поста в Facebook, привязываем функцию doTWStreamPublish к щелчку по соответствующей кнопке.

Важно! У Twitter есть проблема, связанная с дублированием твитов: если твит дублируется, срабатывает защита от спама и сервер отправляет ошибку на клиент, но ошибку эту обработать никак нельзя. В документации не описываются ни ошибка ни функция, которая бы отвечала за присутствие дублей твитов.

Чтобы ознакомиться с другими возможностями интеграции, рекомендую почитать документацию Facebook и Twitter, там все просто и понятно.