- Як додати кнопки соціальних мереж
- Кнопки соціальних мереж і закладок AddThis
- Як встановити кнопки соціальних мереж AddThis
- Код соціальних кнопок 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/
Якщо тут ще не зареєстровані натискаєте "Sign Up Now" і реєструєтеся. Якщо вже зареєстровані натискаєте: "Доступ до Google Analytics".
У своєму акаунті побачите ID Вашого сайту, який в подальшому будемо вставляти в код кнопки AddThis: 
2. Реєстрація в AddThis для отримання коду кнопок AddThis.
Для реєстрації в сервісі AddThis.com заходите на сторінку addthis.com, натискаєте "Створити обліковий запис", або входите в обліковий запис, якщо вже зареєстровані:
Після реєстрації Ваших кнопок AddThis присвоюється унікальний ID, який в подальшому за замовчуванням сформується в коді кнопок.
3. Отримання коду соціальних кнопок 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:
Тут перший стовпець - найменування соціальних мереж і закладок, а другий стовпець - сервісний код для вставки в наш основний код.
Для видалення іконок з кнопки видаляємо рядок опису цієї соціальної мережі або закладки.
Наприклад, додамо іконки кнопок 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, впровадження його на сайт і перегляду аналітики цих кнопок.
Для поліпшення якості перегляду відеоролика натисніть на значок "1" в правому нижньому кутку, який з'явиться при наведенні мишкою.
При бажанні можна збільшити розмір відео на весь екран, натиснувши на значок "2".
Якщо моя стаття і видеоурок здалися Вам корисними - поділіться ними в соціальних мережах і закладках. Напишіть в коментарях до статті: чи легко Вам вдалося встановити кнопки AddThis або виникли труднощі.
Буду вдячна, якщо поділитеся з друзями інформацією:
