- Як дадаць кнопкі сацыяльных сетак
- Кнопкі сацыяльных сетак і закладак 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 або паўсталі цяжкасці.
Буду ўдзячная, калі падзеліцеся з сябрамі інфармацыяй:
