Slyweb
На разработку сайта! Скидки 50%!

Интересные заметки про интеграцию социальных кнопок

jQuery и CSS

Здравствуйте уважаемые читатели!

Возможно ли для большинства социальных кнопок сделать интеграцию с сайтом с целью отслеживания количества оценок?

Можно ответить утвердительно на данный вопрос, если изучить Api Facebook, Twitter, Vk, Mail, Google.

Кнопки социальных сетей необходимо использовать, так как многие из них существенно влияют на позиции страниц в поисковой выдаче. Но в статье мы не будем говорить о влиянии кнопок на SEO или о других параметрах, на которые оказывают влияние кнопки социальных сетей. В статье мы рассмотрим возможности Api основных социальных сетей при работе с кнопкой и событием оценки, а так же правилами обработки указанного события. Это может пригодиться при построении обобщающего счётчика оценок на основе всех оценок, например для сохранения в базу днных, а затем на основании этого счётчика осуществлять вывод популярных статей либо отслеживать предпочтения пользователей.

По опыту использования социальных кнопок могу с уверенностью сказать: положительный эффект особо заметен от социальных кнопок Facebook и Twitter. Эффект от остальных социальных кнопок существенно не заметен. Кнопка Google+ на данный момент начинает развиваться, но не так популярна как кнопки Twitter и Facebook.

При этом почти все Api основных социальных сетей поддерживает функцию обратного вызова для события оценки (как правило, это событие like или liked):

Odnoklassniki не имеет поддержки события like или liked, но реализовать отслеживание возможно через совместную кнопку Mail (Кнопка Mail и Odnoklassniki (страница Api);).

Для того чтобы примеры работали корректно, не забудьте подключить jQuery на ваши страницы! (<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>)

Кнопка Facebook

Кнопка Facebook не требует каких-либо дополнительных действий для её использования, ниже указан пример подключения кнопки Facebook, а за ним пример отслеживания события оценки:

  • Код
  • Чистый код
  1.<div class="link_share">
  2. <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']; ?>&layout=button_count&show_faces=true&width=120&action=like&font&colorscheme=light&height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:20px;" allowTransparency="true"></iframe>
  3. </div>
  4.

        

Пример отслеживания события Facebook вместе с кнопкой:

  • Код
  • Чистый код
  1.<div class="link_share">
  2.<fb:like href="<?php echo rawurlencode('http://'$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']);?>" layout="button_count" action="like" show-faces="true" width="200" height="20px" scrolling="no" frameborder="0" locale="ru" allowTransparency="true" overflow="hidden" colorscheme="light" font="trebuchet ms"></fb:like>
  3.</div>
  4.<div id="fb-root"></div>
  5. <script type="text/javascript">
  6. <!--
  7. window.fbAsyncInit = function() {
  8. // Don't use my app id, use your own or it won't work!
  9. FB.init({status: true, cookie: true, xfbml: true});
10. FB.Event.subscribe('edge.create', function(href, widget) {
11. alert('Я кнопка Facebook отправила запрос на сервер')
12. var rel = jQuery("#idrecource").attr("rel");
13. jQuery.post("/ajax.php",{"rel":rel});
14. });
15. };
16. (function() {
17. var e = document.createElement('script');
18. e.type = 'text/javascript';
19. e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
20. e.async = true;
21. document.getElementById('fb-root').appendChild(e);
22. }());
23. //-->
24. </script>
25.

        

Нажмите на кнопку для примера и получите сообщение (в примере отправляется ajax запрос на сервер ajax.php, Вы можете заменить его либо использовать функцию обратного вызова "FB.Event.subscribe" для своих целей):

Кнопка Twitter

Api Twitter так же как и Api предыдущих социальных сетей достаточно подробно и хорошо продуманно, находится Api Twitter для работы с кнопками по адресу: https://dev.twitter.com/docs/follow-button#width-and-alignment. С его помощью можно изменять различные параметры кнопок: ширина, высота, тип кнопки, расположение и т.д.

Google+ Пример работы социльной кнопки
рис. 0

Пример отслеживания события Twitter вместе с кнопкой:

  • Код
  • Чистый код
  1.<a rel="nofollow" href="http://twitter.com/share" class="twitter-share-button" data-url="<?php echo rawurlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']);?>" data-width="108" data-count="horizontal" data-via="jquerydoc" data-lang="ru">Twitter</a>
  2.
  3.<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
  4.
  5.<script type="text/javascript">
  6. twttr.events.bind('tweet',function (twttr) {
  7. alert('Я кнопка Twitter отправила запрос на сервер')
  8. var rel = jQuery("#idrecource").attr("rel");
  9. jQuery.post("/ajax.php",{"rel":rel});
10.
11. });
12.</script>
13.

        

Кнопка Google+

Идём дальше, по моему мнению, далее по популярности следует кнопка Google+. Кнопка Google+ представляет наибольший интерес, так как позволяет отслеживать предпочтения Ваших друзей аккаунта Google+ и на основе этого строить результаты поиска для Вас. Кнопка Google+ так же как и другие кнопки влияет на CTR страницы, чем больше людей нажали на кнопку тем больше вероятность повышения страницы в результатах поиска. Однако до сих пор подробных данных от Google позволяющих судить о том, как отражаются результаты оценки пользователями той или иной страницы не представлено из-за секретности.

Google+ Пример работы социальной кнопки
рис. 1
  • Код
  • Чистый код
  1.<!-- Поместите этот тег туда, где должна отображаться кнопка +1. -->
  2.<g:plusone callback="plusClick"></g:plusone>
  3.
  4.<!-- Поместите этот вызов функции отображения в соответствующее место. -->
  5.<script type="text/javascript">
  6.
  7.
  8. window.___gcfg = {lang: 'ru'};
  9.
10. (function() {
11. var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
12. po.src = 'https://apis.google.com/js/plusone.js';
13. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
14. })();
15.
16. function plusClick(data){
17. var rel = jQuery("#idrecource").attr("rel");
18. jQuery.post("/ajax.php",{"rel":rel});
19. }
20.</script>
21.

        

Кнопка Vkontakte

Кнопка Vkontakte по-моему мнению вполне конкурента по возможностям и продуманности со стороны её авторов, хотя не имеет такого же веса как кнопки первых трёх рассмотренных социальных сетей. Следующий код вполне пригодится Вам и мне для отслеживания события оценки.

Кнопка Vkontakte
рис. 2
  • Код
  • Чистый код
  1. <script type="text/javascript" src="http://userapi.com/js/api/openapi.js"></script>
  2. <script type="text/javascript">
  3. VK.init({apiId: 2234113, onlyWidgets: true});
  4. </script>
  5.
  6. <div id="vk_like" style="width:120px;"></div>
  7.
  8.
  9. <script type="text/javascript">VK.Widgets.Like("vk_like", {type: "button"});</script>
10. <script type="text/javascript">
11. VK.Observer.subscribe('widgets.like.liked',function(response){
12. var rel = jQuery("#idrecource").attr("rel");
13. jQuery.post("/ajax.php",{"rel":rel});
14. });
15. </script>
16.

        

Кнопки Mail и Odnoklassniki

Для обоих кнопок так же получилось найти решение отслеживающее событие оценки. Сразу скажу, что кнопка Одноклассинки отдельно от кнопки Mail не поддерживает событие оценки и Api этой кнопки отсутствует. Ниже приведён код создающий кнопки Mail и Odnoklassniki, с последующим скриптом отслеживающим событие оценки.

Кнопки Mail и Odnoklassniki
рис. 3
  • Код
  • Чистый код
  1.<a target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share?share_url='.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'" data-mrc-config="{'type' : 'button', 'caption-mm' : '1', 'caption-ok' : '1', 'counter' : 'true', 'text' : 'true', 'width' : '100%'}">Нравится</a>
  2.<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>
  3.
  4.<script type="text/javascript">
  5. //<![CDATA[
  6. // этот вызов обязателен, он осуществляет непосредственную загрузку
  7. // кода библиотеки; рекомендуем всю работу с API вести внутри callback'а
  8. mailru.loader.require('api', function() {
  9. // инициализируем внутренние переменные
10. // не забудьте поменять на ваши значения app_id и private_key
11. mailru.connect.init(676933, 'a699d49eb41b5da6bea4da90a32c1779');
12. // регистрируем обработчики событий,
13. // которые будут вызываться при логине и логауте
14. mailru.events.listen(mailru.connect.events.login, function(session){
15.
16. });
17. mailru.events.listen(mailru.connect.events.logout, function(){
18. window.location.reload();
19. });
20. // проверка статуса логина, в result callback'a приходит
21. // вся информация о сессии (см. следующий раздел)
22. mailru.connect.getLoginStatus(function(result) {
23. if (result.is_app_user != 1) {
24.
25. } else {
26. // все ок, можно работать
27.
28. // получаем полную информацию о текущем пользователе
29.
30. }
31. });
32. mailru.events.listen(mailru.plugin.events.liked, function(result, params, elsevar){
33. var rel = jQuery("#idrecource").attr("rel");
34. jQuery.post("/ajax.php",{"rel":rel});
35. });
36.
37. });
38. //]]>
39. </script>
40.

        

Интересно, что при нажатии одной из кнопок сработает и другая, если Вы авторизованы, при этом фикция обработчик будет вызвана дважды (два alert()).

Если у Вас есть интерес к изучению других кнопок, от которых мало толку, можете попробовать поэкспериментировать, но заранее скажу, что отследить событие оценки для остальных кнопок не возможно правильным способом через Api той или иной социальной сети. Мне пришлось отказаться от остальных кнопок, в числе которых YaRu, LinkedIn и др.

Дополнительно к сведению...

Не мог удержаться не рассказать про Google+ авторство, ссылка, указаная ниже будет причиной появления фото и иинформации в поиске Google, если у Вас есть профиль в Google+! (на 1 рисунке рамочкой выделена данная информавция).

  • Код
  • Чистый код
  1.<a href="https://plus.google.com/u/0/110700972564095438258?rel=author"><img class="iamphoto" src="/img/iam.jpg" /></a>
  2.

        

Дополнительный пример таблицы с рабочими кноками Google, Facebook, Twitter, Vk.

  • Код
  • Чистый код
  1.<table>
  2.<tr>
  3.
  4.<td align="left">
  5. <a href="https://plus.google.com/u/0/110700972564095438258?rel=author"><img class="iamphoto" src="/img/iam.jpg" /></a>
  6.
  7.</td>
  8.
  9.<td align="left">
10.<div class="link_book">
11.<div class="link_share">
12. <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']; ?>&layout=button_count&show_faces=true&width=120&action=like&font&colorscheme=light&height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:20px;" allowTransparency="true"></iframe>
13. </div>
14. </div>
15.</td>
16.
17.<td align="left">
18. <a href="http://twitter.com/share" class="twitter-share-button" data-width="108" data-count="horizontal" data-via="jquerydoc">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
19.</td>
20.
21.<td align="left">
22. <div id="vk_like" style="width:120px;"></div>
23. <script type="text/javascript">
24. VK.Widgets.Like("vk_like", {type: "button"});
25. </script>
26.</td>
27.
28.<td align="left">
29. <!-- Поместите этот тег туда, где должна отображаться кнопка +1. -->
30. <g:plusone></g:plusone>
31.
32. <!-- Поместите этот вызов функции отображения в соответствующее место. -->
33. <script type="text/javascript">
34. window.___gcfg = {lang: 'ru'};
35.
36. (function() {
37. var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
38. po.src = 'https://apis.google.com/js/plusone.js';
39. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
40. })();
41. </script>
42.</td>
43.
44.</tr>
45.</table>
46.

        

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


Александр Ермаков