Как отслеживать кнопки Like, Tweet, Мне нравится в социальных сетях

В прошлой статье о том как узнать количество твитов в Twitter, лайков и share в facebook, ВКонтакте, Одноклассниках, Google+ на PHP я сказал, что была необходимость выводить суммарное число лайков трёх соц. сетей. Помимо этого необходимо было, чтобы в случае, если человек лайкнет/дизлайкнет страницу, число изменилось. То есть, нобходимо отслеживать кнопки Like, Tweet, Мне нравится в социальных сетях.

Если покопаться в документации соответствующей соц. сети, то можно найти информацию о том, как подписаться на события кнопок. Решил выложить тут рабочий вариант, если кому-то лень копаться, да и себе на будущее.

Естественно, сначала надо инициализировать сие дело.

//для VK
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>
<script type="text/javascript">
VK.init({ apiId: идентификатор_приложения, onlyWidgets: true });
</script>

//для FB
<script src="//connect.facebook.net/en_US/all.js"></script>

//Twitter
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Ну и потом, собственно, подписаться на сами события.


//для VK
VK.Observer.subscribe('widgets.like.unliked', function(likeCount) {
// если убрали нажатие с кнопки "мне нравится"
});
 VK.Observer.subscribe('widgets.like.liked', function(likeCount) {
// если нажали на кнопку  "мне нравится"
});

//можно отписаться
VK.Observer.unsubscribe('widgets.like.unliked');
VK.Observer.unsubscribe('widgets.like.liked');



//для FB
//opt_pagePath адрес страницы
FB.Event.subscribe('edge.create', function(opt_target) {
//если нажали на кнопку  "рекомендовать"
});
FB.Event.subscribe('edge.remove', function(opt_target) {
// если убрали нажатие с кнопки "рекомендовать"
});

//можно отписаться
FB.Event.unsubscribe('edge.create');
FB.Event.unsubscribe('edge.remove');



//для Twitter
trackTwitterHandler_ = function(intent_event) {
  var opt_target; 
  if (intent_event && intent_event.type == 'tweet' || intent_event.type == 'click') {
    var socialAction = intent_event.type + ((intent_event.type == 'click') ? '-' + intent_event.region : ''); //тип нажатия
    //ну, как пример, проверка на то, твиттнули ли
    if(socialAction =='tweet')
    {
      //если в модальном окне нажали "твиттнуть", то можно тут обработать  
    }
    //аналогично можно обрабатывать нажатие по числу твиттов и т.д.
  }
};

intent_handler = function(intent_event) {
   trackTwitterHandler_(intent_event);
};
	
twttr.events.bind('click', intent_handler);
twttr.events.bind('tweet', intent_handler);


//можно отписаться
twttr.events.unbind('click');
twttr.events.unbind('tweet');

Можно и для других соц. сетей такое сделать, я думаю. Для mail.ru, чтобы отследить событие mailru.app.events.like используется, вроде как, mailru.events.listen.

  Категории: JavaScript, Соц. сети
  • Иван

    Добрый день!

    Стоит задача вести учет голосов VK в базе сайта. Нужно сделать это максимально безопасно, чтобы, по возможности, исключить накрутку. Таким образом я не могу посылать простой GET запрос в обработчике клика на кнопку (чтобы по запросу обрабатывать клик), так как в этом случае возможно прямое обращение к URL обработчика.

    Не могли бы вы подсказать решение?

    • http://suvitruf.ru Suvitruf

      Я решал подобное кэшем.
      То есть, раз в 10 минут запускался скрипт, который получал количество лайков по всем страницам и сохранял в базе.

      Как из php узнать количество твитов в Twitter, лайков и share в facebook, ВКонтакте, Одноклассниках, Google+.

      Если же хотите через js по клику лишь… А чем вам GET запрос не угодил? Даже, если попытаются накрутить.
      Вы просто проверяйте в php поле Referer – откуда пришёл запрос. И обрабатывайте лишь те запросы, которые были с вашего сайта. Тогда не накрутят.

      • Роман Кистин

        Можно подделать реферер)
        А если на странице несколько кнопок “Нравится” вконтакте, как узнать, по какой из них было нажатие?

  • Влад

    извините не думал что после отправки сообщения отображаться все будет не как код а как страничка. Подправте и ссылка в коде на ютуб просто первую попавшуюся вставил.

    • http://suvitruf.ru Suvitruf

      Я вам лучше на мыло напишу)

    • http://suvitruf.ru Suvitruf

      Для отображения кнопки надо:

      <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="ru" rel="nofollow">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js" > </script>

  • Марат

    похоже я нашел то что искал…)
    ну вообще вы даете докопаться так глубоко)класс
    У меня только один вопрос: Наверняка вы слышали про плагин “плати лайком”, хочу сделать такую свою) на странице есть несколько постов у каждого есть кн. “поделится”, когда наж. откр-ся всплывающее окно и там наж. кн. [поделится]. хотелось бы на эту кн. [поделится] создать событию, как только нажмет показать остальное и наче нет. Вы написали событию пр:
    VK.Observer.subscribe(‘widgets.like.liked’, function(likeCount) {
    06.// если нажали на кнопку “мне нравится”
    07.});
    Где “06.// если нажали на кнопку “мне нравится”” – сюда пишешь, например [показать остальной текст], да?

    • http://suvitruf.ru Suvitruf

      Ну, в 06 можно любой JS засунуть. Сработает после того, как человек лайкнет запись.

      • Марат

        КЛАСС!!!! Я СЧАСТЛИВ)))) СПАСИБО ЗА КОД!) извиняюсь за такое поведения, я просто долго мучился)))

        • http://suvitruf.ru Suvitruf

          Рад, что помогло)

          • Марат

            Рискну и все таки спрошу у вас:
            VK.Observer.subscribe(‘widgets.like.liked’, function(likeCount) {
            06.// если нажали на кнопку “мне нравится”
            07.}); – пользователь просто нажал like

            VK.Observer.subscribe(‘widgets.like.shared’, function(likeCount)
            {
            //Код
            }); – Пользователь не то что нажал ну и еще рассказал друзьям
            У меня эти не работает, оказывается у меня не VK.Widgets.Like а VK.Share.button, и пробовал так:
            VK.Observer.subscribe(‘Share.button.shared’, function(likeCount)
            {
            alert(‘Класс!!!’);
            });
            Но ответа не получаю. Подумал может вы знаете как на share действовать?

            • http://suvitruf.ru Suvitruf

              Марат, я что-то не встречал API по VK.Share.button, может и нельзя.
              Только VK.Observer содержит методы для реакции на возникающие в ходе работы платформы события.

              • Марат

                Аха, все понял, всё меняю кнопки на like) Спасибо

  • Андрей

    Так если от нажатия кнопки Like вконтакте, ссылка не появляется нигде – какой может быть положительный эффект для сайта? Нужно использовать только Share ?

    • http://suvitruf.ru Suvitruf

      Ну в целом да, Like как таковой ничего положительного сайту не даёт. Это так, пузомерка)

      Share лучше использовать. И Share, вроде как, помимо того, что шарит ещё и лайкает сразу)

  • Alex

    Отлично! Спасибо за код. Не подскажете, как отловить событие share для Share.button (Поделится ссылкой)? С Мне Нравится все отлично работает. А вот о Share в api ничего нет..

    • http://suvitruf.ru Suvitruf

      При нажатии на кнопку “Мне нравится” виджет передаёт события widgets.like.liked и widgets.like.unliked.
      Аналогичным образом передаются события widgets.like.shared и widgets.like.unshared при нажатии на галочку “Рассказать друзьям”.

      Так что, подпишитесь на widgets.like.shared и widgets.like.unshared и сможете отловить.

      • Alex

        Спасибо за ответ! Но я не тот виджет имел ввиду. Я спрашивал за http://vk.com/developers.php?oid=-1&p=Share
        VK.Share.button

        • http://suvitruf.ru Suvitruf

          Не могу найти никакой информации по поводу подписки на события VK.Share.button =/

  • Рафаэль

    Добрый день!
    Такая ситуация есть две кнопки like. Мне нужно, чтобы при нажатии только одной кнопки like возникало событие liked и unliked.

    • http://suvitruf.ru Suvitruf

      Повесить на нужную кнопку обработчик.

      • Den

        Каким образом? ведь не где не указывается id кнопки

  • Андрей

    Здравствуйте! Вот есть скрипт на Share (кнопка поелиться) _http://vk.com/js/api/share.js?11 , есть ли здесь возможность отследить, была ли нажата кнопка поделиться? Чтото не могу сам разобраться.
    Вызов кнопки document.write(VK.Share.button(false,{type: “round_nocount”, text: “Рассказать на стене”})); а как отследить нажатие?