AddThis – кнопки социальных сетей для продвижения сайта

Статья и видеоурок научат ставить на сайт кнопки социальных сетей AddThis и смотреть результаты работы в аналитике сервиса AddThis.com для продвижения сайта.

 

Как добавить кнопки социальных сетей

Всем известно “сарафанное радио”, когда пользователи сайта делятся  понравившейся статьёй с друзьями в социальных сетях и закладках, при этом значительно укрепляя репутацию Вашего сайта и таким образом продвигая его.

Для продвижения сайта предназначены замечательные кнопки социальных сетей.

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

Было рассказано об установке Яндекс кнопки социальных сетей  “Поделиться”  и возможности просмотра отчета по её работе в сервисе Яндекс Метрика.

 

Кнопки социальных сетей и закладок AddThis

Есть ещё одна замечательная кнопка, о которой пойдёт речь в данной статье –  AddThis. Это даже не кнопка, а сервис AddThis.com, который включает в себя работу более, чем с 300 социальными сетями и закладками.

Кнопки AddThis можно располагать горизонтально в любом месте сайта: в статьях, сайдбарах, шапках, подвалах и вертикально: с левой или с правой стороны сайта.

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

Красивые кнопки социальных сетей AddThis очень удобные и простые в установке и использовании, оказывают помощь в продвижении сайта, предусматривают сбор статистики и просмотр аналитики Google Analytics.

Рассмотрим подробнее где получить код AddThis, как установить его на сайт, как сделать видимыми желаемые иконки соцсетей и закладок, и как посмотреть результаты работы AddThis в аналитике.

 

Как установить кнопки социальных сетей AddThis

Установка кнопок социальных сетей AddThis на сайт включает в себя получение кода и размещение его на сайте с помощью админпанели.

Для удобства размещения кода на сайте рекомендую воспользоваться плагинами Header and Footer или Post Layout, либо внедрить код непосредственно в файлы WordPress.

Функциональность кнопок AddThis предусматривает сбор статистики и передачу данных в раздел аналитики сервиса AddThis и при желании в Google Analytics. Эти функции закладываются в код кнопок AddThis. Сформируем этот код.

 

Код социальных кнопок AddThis

Для получения кода социальных кнопок AddThis выполняем следующую последовательность действий:

1. Регистрация в Google Analytics для получения ID Вашего сайта.

Если Вам достаточно аналитики сервиса AddThis и Вы не хотите, чтобы статистика работы кнопок AddThis передавалась и накапливалась в Google Analytics – пропустите пункт 1 и пункт 5. В обратном случае выполняем следующую последовательность действий для получения ID Вашего сайта.

Заходим на страницу google.com/analytics/

Регистрация в Google Analytics

Если здесь ещё не зарегистрированы нажимаете “Sign Up Now” и регистрируетесь. Если уже зарегистрированы нажимаете: “Доступ к Google Analytics”.

В своём аккаунте увидите ID Вашего сайта, который в дальнейшем будем вставлять в код кнопки AddThis:
ID сайта в Google Analytics

 

2. Регистрация в AddThis для получения кода кнопок AddThis.

Для регистрации в сервисе AddThis.com заходите на страницу addthis.com, нажимаете “Создать учетную запись”, либо входите в учетную запись, если уже зарегистрированы:

Регистрация в AddThis

После регистрации Вашим кнопкам AddThis присваивается уникальный ID, который в дальнейшем по умолчанию сформируется в коде кнопок.

 

3. Получение кода социальных кнопок AddThis.

Для получения кода кнопок AddThis нажимаем “Получить код” и попадаем на такую страницу:

Код кнопок AddThis

Выбираем для чего будет использоваться кнопка (сайт, WordPress, Blogger, Jomla и т.п.) и её стиль. Если будете использовать для сайта – отмечайте чекбокс “Сайт”.

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

Кнопки AddThis работают с более 300 социальными сетями и закладками, поэтому независимо от того какие иконки будут отображаться на визуальных кнопках, все эти социальные сети и закладки будут рабочими.

После выбора параметров кнопки полученный код копируем в программу “Блокнот”, где будем  в него вносить изменения. Код имеет примерно такой вид:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-ZZZZZZZZZZZZZZZZ"></script>
<!-- AddThis Button END -->

В Вашем коде вместо “ZZZZZZZZZZZZZZZZ” будет ID кнопок AddThis, присвоеный после регистрации в этом сервисе.

 

4. Добавление и удаление иконок в коде кнопок AddThis. Получение кода иконок социальных сетей и закладок.

Этот пункт выполнять только, если хотите заменить или добавить другие иконки социальных сетей и закладок в визуальный вид кнопок AddThis. Если хотите оставить вид кнопок такой как есть – переходите к пункту 5.

Для добавления иконок социальных сетей и закладок копируем строку:

<a class="addthis_button_preferred_4"></a>

и заменяем в ней “preferred_4″ на сервисный код иконки, которую будем добавлять.

Сервисные коды иконок можно найти и скопировать на странице addthis.com/services/list :

Сервисные коды AddThis

Здесь первый столбец – наименования социальных сетей и закладок, а второй столбец – сервисный код для вставки в наш основной код.

Для удаления иконок из кнопки удаляем строку описания этой социальной сети или закладки.

Например, добавим иконки кнопок Google+ (сервисный код “google_plusone_share”), Twitter (сервисный код кнопки “twitter”), Одноклассники  (сервисный код кнопки “odnoklassniki_ru”), Facebook (сервисный код кнопки “facebook”) и удалим все четыре стандартные иконки. После этого наш код кнопок AddThis  будет выглядеть так:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_odnoklassniki_ru"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-ZZZZZZZZZZZZZZZZ"></script>
<!-- AddThis Button END -->

В нашем коде мы оставили иконку со знаком “+”, с помощью которой появляется выпадающее меню для работы с остальными социальными сетями и закладками.

 

5. Интеграция кода кнопок AddThis с Google Analytics.

Если Вы не выполняли пункт 1 для получения ID сайта и передачи статистики в Google Analytics, пропустите этот пункт.

Для интеграции кода кнопок AddThis с Google Analytics, необходимо в код кнопок внедрить код Вашего сайта, который получили в пункте 1.

Заменяем в коде кнопок AddThis строку кода:

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>

на:

<script type="text/javascript">
   var addthis_config = {
      data_ga_property: 'UA-ХХХХХХХХ-Х',
      data_ga_social: true
   };
</script>

Здесь вместо UA-ХХХХХХХХ-Х необходимо вписать код сайта, полученный в пункте 1.

 

6. Изменение размера кнопок AddThis.

Для увеличения размера иконок в коде кнопок AddThis заменяем строку:

<div class="addthis_toolbox addthis_default_style ">

на строку:

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">

 

7. Изменение положения кнопок AddThis с горизонтального на вертикальное.

Для изменения положения кнопок AddThis с горизонтального на вертикальное, необходимо в коде заменить строку:

<div class="addthis_toolbox addthis_default_style ">

или

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">

на строку:

<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:0px;top:250px;">

Эта кнопка будет расположена вертикально слева (left), с отступами 0 пикселей слева и 250 пикселей сверху. Эти параметры можно изменять. Для расположения кнопки вертикально справа вместо left пишем right.

 

8. Окончательные коды кнопок AddThis.

Такой вид имеет скорректированный нами код кнопок AddThis с горизонтальным  расположением маленьких иконок, интегрированный  с Google Analytics и с кодом Вашего сайта.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_odnoklassniki_ru"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
 var addthis_config = {
 data_ga_property: 'UA-ХХХХХХХХ-Х',
 data_ga_social: true
 };
</script>
<script type="text/javascript"
src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-
ZZZZZZZZZZZZZZZZ"></script>
<!-- AddThis Button END -->

Код кнопок AddThis с горизонтальным  расположением маленьких иконок, не интегрированный  с Google Analytics и с кодом Вашего сайта.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_odnoklassniki_ru"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript"
src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-
ZZZZZZZZZZZZZZZZ"></script>
<!-- AddThis Button END -->

Код кнопок AddThis с вертикальным расположением больших иконок, интегрированный  с Google Analytics и с кодом Вашего сайта.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:0px;top:250px;">
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_odnoklassniki_ru"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
 var addthis_config = {
 data_ga_property: 'UA-ХХХХХХХХ-Х',
 data_ga_social: true
 };
</script>
<script type="text/javascript"
src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-
ZZZZZZZZZZZZZZZZ"></script>
<!-- AddThis Button END -->

Код кнопок AddThis с вертикальным расположением больших иконок, не интегрированный  с Google Analytics и с кодом Вашего сайта.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:0px;top:250px;">
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_odnoklassniki_ru"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript"
src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-
ZZZZZZZZZZZZZZZZ"></script>
<!-- AddThis Button END -->

Не забудьте в этих кодах вместо параметра: “UA-ХХХХХХХХ-Х” вписать ID  Вашего сайта, а вместо “ZZZZZZZZZZZZZZZZ” вписать ID Ваших кнопок AddThis   После  этого код готов для размещения на сайте.

 

9. Размещение кода на сайте.

Код на сайте размещаем в том месте, где будут расположены кнопки AddThis.

Для размещения кода на сайт рекомендую воспользоваться плагинами Header and Footer или Post Layout, либо внедрить код непосредственно в файлы WordPress.

Более подробно о размещении кода на сайте с помощью плагина Header and Footer показанно в видеоуроке в конце статьи.

10. Просмотр аналитики сервиса AddThis.

Посмотреть аналитику работы кнопки AddThis можно на странице addthis.com, нажав на пункт меню: “Аналитика”.

Вашему вниманию предоставится аналитика взаимосвязи сайта с социальными сетями и закладками:

Аналитика AddThis - график по дням

Аналитика AddThis - график по соцсетям

 

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

Для улучшения качества просмотра видеоролика нажмите на значок “1” в правом нижнем углу, который появится при наведении мышкой.

Посмотреть видео в лучшем качестве

При желании можно увеличить размер видео на весь экран, нажав на значок “2”.

Если моя статья и видеоурок показались Вам полезными – поделитесь ими в социальных сетях и закладках. Напишите в комментариях  к статье: легко ли Вам удалось установить кнопки AddThis или возникли трудности.



Буду благодарна, если поделитесь с друзьями информацией:

Подпишись и получай новые статьи на почту:

33 комментария

  1. Очень симпатичная и полезная кнопка социальных сетей и закладок. Особенно мне нравится счетчик, который для каждой статьи показывает её уникальную статистику. Спасибо за подробное описание!

    • Андрей, Вы можете в визуальную часть кнопок AddThis подключить любые иконки социальных сетей, которые обслуживаются этим сервисом. Их коды можно скопировать по ссылке, приведенной в п.4. В этом же пункте описано как их подключить.

  2. Это всё замечательно, но… КАК сделать так, чтобы счетчик невозможно было накрутить? Ато так можно и 200 “лайков” нащелкать.
    ЗЫ: на стандартных счетчиках это невозможно. При повторном нажатии на одну и ту же кнопку – она минусуется.
    Заранее спасибо )

    • Так решили разработчики и заложили это в алгоритм данной кнопки, очевидно, руководствуясь тем, что если посетитель воспользовался кнопкой не единожды, при этом выполнив какое-то действие (работу), то это должно идти только в плюсы.

      • это тоже замечательно, НО не для “нашего брата”. Многие используют данную возможность для “накрутки”. Особенно, если рейтинга на сайте помимо кнопок соц. сетей нет.
        КТО-ТО может дать ЧЕТКИЙ ответ: КАК?

  3. Здравствуйте. В общем, у меня проблема возникла на первых же шагах: сайт addthis у меня на английском. Где же можно поменять на русский?Хотя можно и на английском работать, но все ж.

  4. Здравствуйте.
    Мне не понятен пункт3: “После входа в учетную запись проверяем наличие наименования нашего сайта на странице и нажимаем “Получить код””. Как сервис AddThis узнает наименование сайта, если я его нигде не вводил(пункт1 я пропустил)?
    Спасибо за ответ.

    • Здравствуйте, Семён. При регистрации в AddThis автоматически создаётся профиль с уникальным ID профиля, который внедряется в код при его формировании. URL и домен сайта здесь не обязательны. Когда код будет установлен на сайт и при использовании пользователями кнопок, в сервис AddThis через ID профиля будет идти передача статистической информации по этому профилю, т.е. по вашему сайту.

  5. Здравствуйте.
    Пожалуйста помогите. Зашла в гугл зарегистрировалась, получила ID сайта.
    Перешла ко второму пункту зарегистрировалась в AddThis, на странице не увидела наименования сайта, я его не куда не вбивала.
    Дальше перешла по ссылкам получила код, вставила на сайт, на сайте все отображается.
    Дальше мне не понятно пункт 10 проверка правильности кода кнопок, я не могу найти эту страницу.

    • Здравствуйте, Наталия! Сервис AddThis произвел у себя некоторые изменения. Теперь вместо регистрации сайта создаётся профиль с уникальным ID, который заложен в Ваш код. Проверить работоспособность кода можно нажав на какие нибудь кнопки соцсетей этого сервиса и, примерно через сутки, посмотрев статистику сервиса AddThis и, если информация появилась, значит код работает нормально.

  6. Добрый день Надежда! Мне понравилась ваша статья. Но мне тоже непонятно как производится проверка правильности кода кнопок AddThis. Наименование сайта нигде не вводили, а у вас в п. 10 “Доступные отчеты”, есть наименование сайта. Как и где его надо ввести? И еще вопрос: Почему-то мои кнопки на моем одностраничном сайте отобразились слева (а я хотела посредине странички). Если ответите, то большое спасибо!

    • Здравствуйте, Людмила! Выше в ответе на комментарий Наталии я уже писала, что сервис Addthis произвёл у себя изменения, описывала способ, как теперь можно проверить работоспособность кода с помощью нажатия на кнопки AddThis, установленные на Вашем сайте и просмотра статистики примерно через сутки. С учетом изменений на сервисе я внесла изменения в статью.

  7. Добрый день.
    Возник вопрос:
    Я выбрала три кнопки: Google+, Twitter, Одноклассники.
    ссылки, кот в себе содержат эти кнопки сформировались след. образом:
    Google+

    addthis.com/bookmark.php?v=300&winname=addthis&pub=ra-50f501383dac8181&source=tbx-300&lng=ru-RU&s=google_plusone_share&url=http%3A%2F%2Fklass.test%2F&title=%D0%A1%D0%B5%D1%82%D1%8C%20%D1%81%D1%83%D0%BF%D0%B5%D1%80%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%BE%D0%B2%20%22%D0%9A%D0%BB%D0%B0%D1%81%D1%81%22&ate=AT-ra-50f501383dac8181/-/-/5107c59b23c86e16/2&frommenu=1&uid=5107c59b231f42fd&ct=1&tt=0&captcha_provider=nucaptcha

    Twitter #
    Одноклассники

    addthis.com/bookmark.php?v=300&winname=addthis&pub=ra-50f501383dac8181&source=tbx-300&lng=ru-RU&s=odnoklassniki_ru&url=http%3A%2F%2Fklass.test%2F&title=%D0%A1%D0%B5%D1%82%D1%8C%20%D1%81%D1%83%D0%BF%D0%B5%D1%80%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%BE%D0%B2%20%22%D0%9A%D0%BB%D0%B0%D1%81%D1%81%22&ate=AT-ra-50f501383dac8181/-/-/5107c59b23c86e16/3&frommenu=1&uid=5107c59b13b61d6d&ct=1&tt=0&captcha_provider=nucaptcha

    Почему эти ссылки различаются??
    И, вообще, как мне самой формировать эти ссылки.
    Спасибо.

    • Марина, такие длинные ссылки формирует сервис AddThis для передачи через ссылки параметров и данных Вашей статьи на страницы социальных сетей Ваших читателей. Данные кнопки именно для этого и предназначены. Поэтому ссылки, через которые передаются данные не могут быть короткими. Конечно сервис мог бы сократить ссылки, но это делается только в случае передачи персональных или каких-то секретных данных. В нашем случае кнопки не несут передачу секретной информации, а наоборот отправляют данные Вашей статьи для публичного пользования, поэтому нет необходимости сервису AddThis сокращать (шифровать) ссылки, соответственно такие длинные ссылки – это нормально, не беспокойтесь по этому поводу. Главное, что кнопки и ссылки правильно работают.

  8. А возможно ли с помощью этого или может какого другого сервиса соц. кнопок влиять на информацию, которая будет в форме “Поделиться” в соц. сети по умолчанию? Охота задать свой заголовок, текст, картинку, ссылку. Я так понял, что эти виджеты берут только из заголовка текущей html-страницы. Но если у меня несколько таких блоков, разных по смыслу в разных частях контента?

  9. Pingback: Promonika

  10. Добрый день, Надежда
    Обращаюсь к вам уже второй раз, подскажите пожалуйста в адресной строке firefox отображается адрес страницы html#.UkqGrX-4rDc таким образом, в explorer адрес отображается корректно, я так понимаю я что-то нажала в настройках AddThis.com. Может подскажите как откорректировать?

    • Наталья, Вы всё сделали правильно. Сервис AddThis для сбора аналитики добавляет к URL-адресам страниц Вашего сайта специальные теги, которые представляют собой полу-случайные значения, идентифицирующие каждую страницу. Эти теги имеют такой вид, который Вы показали в своём вопросе: # UkqGrX-4rDc. С помощью этих идентификаторов сервис AddThis собирает для аналитики информацию: насколько часто пользователи посещают Ваш сайт. Эти типы тегов (называемые URL фрагментами) не повлияют на Ваш SEO, потому что они отбрасываются поисковыми системами во время веб-сканирования.

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>