Как отследить, что пользователь поделился записью в facebook

Как отследить, что пользователь поделился записью в facebook

В последнее время стало очень популярно давать посетителям сайта что-нибудь бесплатно в обмен на их действие поделиться информацией в социальной сети. Например, пользователь "расшарил" статью у себя в ленте и в награду получает доступ к другой "закрытой" статье. Это имеет сразу несколько положительных факторов: привлекает дополнительных посетителей на сайт, повышает лояльность текущего пользователя, мотивирует его на дополнительные действия и т.д. и т.п.

Но как отследить, что пользователь не просто нажал на кнопку поделиться, а именно поделился. И только после этого давать ему "подарок". Давайте научимся это делать на примере социальной сети FaceBook.

Для начала нам нужно создать новое приложение в facebook. Предположим, что делиться будем информацией с сайта webkab.ru. Идем вот сюда: https://developers.facebook.com/apps и нажимаем Добавить новое приложение. Вводим название, email и жмем Создайте ID приложения.

Слева переходим в Панель, нажимаем по центру экрана на кнопку Выберите платформу, выбираем Сайт. Появляется код, запоминаем строку appId: '1668967343132979',. Внизу вводим Site URL - webkab.ru, нажимаем Next. Вот и все, подготовительный этап закончен.

Теперь сразу покажу код, который генерирует кнопку, при клике на которую пользователь делится информацией на своей странице и мы получает callback об успехе или ошибке действия.

<!DOCTYPE html>
<html>
<head>
<title>Share FB</title>
<meta charset="utf-8">
<style>
	body,
	html {
		margin:0;
		padding:0;
		width:100%;
		height:100%;
	}
	.fb-like {
		width:200px;
		height:200px;
		position:absolute;
		top:50%;
		margin-top:-100px;
		left:50%;
		margin-left:-100px;
		background:tomato;
		color:#fff;
		font-size:20px;
		line-height:200px;
		text-align:center;
		font-family:Arial;
	}
</style>
</head>
<body>
	<div class="page-site">
		<div id="fb-root"></div>
		<script>
			window.fbAsyncInit = function() {
				FB.init({
					appId: 1668967343132979,
					status: true,
					xfbml: false
				});
			};
			function popup(){ 	
				FB.ui({
					method: 'feed',
					link: 'webkab.ru'
				},
				function(response) {
					if (response && !response.error_message) {
						alert('Ура!');
					} else {
						alert('Беда!');
					}
				});
			}
		</script>
		<script>
			(function(d, s, id){
			   var js, fjs = d.getElementsByTagName(s)[0];
			   if (d.getElementById(id)) {return;}
			   js = d.createElement(s); js.id = id;
			   js.src = "//connect.facebook.net/ru_RU/all.js";
			   fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));
		</script>
		<div class="fb-like" onclick="popup()">Поделиться</div>
	</div>
</body>
</html>
 

Не забудьте поменять appId на свой.

Вместо строки alert('Ура!'); нужно написать обработчик при успехе, а вместо строки alert('Беда!'); - при ошибке.

Для того, чтобы при шаринге подтягивался нужный заголовок, описание и картинка - на странице, которую шарим необходимо прописать: og:title, og:description и og:image.

Также мы можем не шарить урл, а только нужную информацию, тогда в объекте FB.ui вместо link можно указать другие свойства (name, caption, description, picture и т. д.). Полный список можно посмотреть тут.


15.06.17
Для просмотра сайта обновите браузер.