Социальные кнопки (кнопки социальных сетей) AddThis для продвижения сайта: установка и настройка

By | 11/04/2013


AddThis – это всемирно известный сервис обмена ссылками, причем бесплатный. Его кнопки уже размещены на  миллионах сайтов, в том числе и на моих :)).

Раньше я пользовался плагинами и другими сервисами, но пришел к выводу, что этот сервис – самый лучший. Не случайно у них на главной странице написан лозунг – «14 миллионов сайтов не могут ошибаться».

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

Сегодня мы посмотрим, как можно эти кнопки легко разместить на своем сайте и как воспользоваться аналитическими возможностями сервиса.

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

Регистрация в сервисе AddThis предельно простая. Заходим на главную страницу:

сервис AddthisРис.1 (Для увеличения любой картинки — кликните по ней)

Прежде всего, на рис.1 посмотрим, что именно нам предлагает сервис установить на сайт и как оно выглядит (я обвел это красным прямоугольником). Далее все эти сервисы вы сможете посмотреть более внимательно.

Для начала регистрации нам следует кликнуть по ссылке Create Account (правый верхний угол). Можно кликнуть и большой синей кнопке, но потом все равно придется создавать аккаунт.

У вас откроется страница регистрации, где надо только указать свой e-mail и пароль. Вам сразу же будет отправлено поздравительное письмо, где ничего делать не надо, поэтому прочитать его можно и позже.

Выбор вида социальных кнопок

Входим на нашу страничку сервиса, для чего надо в правом верхнем углу нажать на ссылку «Sign In»:

регистрация в сервисе AddthisРис.2

В верхней части страницы находим вкладку «Get the Code» (Получить код), нажимаем на нее. Открывается новая страница:

сервис Addthis - получение кода кнопокРис.3

Прежде всего, здесь следует выбрать тип сайта: независимый ли это сайт (на любой CMS) или же платформы WordPress и Blogger. Нам надо оставить положение переключателя на «A Website».

Теперь выбираем стиль кнопок (левая нижняя часть страницы), причем в будущем вы всегда можете его изменить – достаточно зайти на эту страницу и выбрать другой стиль кнопок. Я выбрал второй сверху стиль: как будут выглядеть кнопки вы можете увидеть в правой верхней части страницы в поле «Preview» (Предпросмотр). В зависимости от выбранного стиля будет меняться код, который надо скопировать.

А перечень социальных сетей? – скажете вы. Можно менять сразу, а можно и чуть позже. Я предлагаю сразу установить кнопки и определиться с их количеством, а потом уже закреплять кнопки конкретных сетей. Пока же устанавливаем те кнопки, которые написаны по умолчанию.

Для этого кликнем по полю с кодом, все строчки кода станут отображаться на синем фоне, что означает, что выделен весь текст кода и он готов к копированию. Нажимаем кнопку «Grab It» (типа — Скопируйте), код попадает в буфер обмена (память) вашего компьютера.

Теперь нам предстоит работа с нашим сайтом.

Установка кода на сайт

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

Размещение кнопок AddThis в сайдбаре сайта

Заходим в административную часть сайта, наводим курсор на вкладку «Внешний вид» (в левом меню) и кликаем по ссылке «Виджеты». В открывшейся странице «Виджеты» ищем виджет «Текст», наводим на него курсов – он станет четырехстрелочным, т.е. виджет готов к перетаскиванию.

Нажимаем левую кнопку мыши и, НЕ ОТПУСКАЯ КНОПКИ, тащим виджет в поле «Сайдбар». Если у вас несколько сайдбаров, то предварительно уточните – в какой именно лучше всего установить кнопки. Главное требование — чтобы они бросались в глаза. Причем виджет (этот или любой другой) всегда можно переместить в другое место.

Установив его на нужное место, отпускаем кнопку мыши. Виджет должен сразу раскрыться, если у вас этого не произошло, то раскройте его принудительно, нажав на маленький серый треугольник в правом верхнем углу виджета (верхняя стрелка на рис.4):

сервис Addthis - установка кода на сайтРис.4

Теперь кликаем по большому полю виджета и нажимаем ПРАВУЮ кнопку мыши, в открывшемся меню нажимаем на «Вставить». Или на клавиатуре нажимаем одновременно клавиши CTRL и V. Скопированный ранее код вставится в окно.

Теперь кликаем по полю «Заголовок» и пишем заголовок виджета, после чего нажимаем кнопку «Сохранить».

Открываем сайт и смотрим что у нас получилось:

сервис Addthis - виджетРис.5

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

Что делать тем, у кого шаблоны (темы) не поддерживают виджеты? Открывать нужный файл (скорее всего, он будет называться sidebar.php), искать в нем нужное место и размещать код там. Ну, или менять тему :-)).

Размещение кода кнопок после статьи

Статьи размещаются на сайте с помощью файла single.php, не находятся в нем, они находится в базе данных на сервере, а с помощью этого файла они вызываются оттуда и располагаются в заранее определенном месте. Нам надо найти в этом файле это место, где будет расположена статья.

В админке сайта нажимаем (в левом меню) на вкладку «Внешний вид» и кликаем по ссылке «Редактор». Открывается страница редактора файлов, где в правой части имеется перечень всех файлов нашей темы. В этом перечне ищем файл single.php и кликаем по нему. В окне открывается содержимое файла:

сервис Addthis - размещение кода в статьеРис.6

Я выбрал место, на которое указывает стрелка, расположенная в окне (вертикальная черточка – это курсор). Кликаем по этому месту, потом нажимаем (при необходимости) клавишу Enter – у нас образуется новая строчка, конечно, пустая. Кликаем по этой пустой строчке и нажимаем клавиши CTRL+V. Код вставится в это место. Потом нажимаем кнопку «Сохранить файл» и смотрим на странице сайта, что у нас получилось:

сервис Addthis для продвижения сайтаРис.7

Мы видим, что кнопки надо немного подредактировать:

  • Написать заголовок (верхняя стрелка),
  • Сделать интервал между кнопками и местом для рубрик и меток (нижняя),

Делаем заголовок. Для этого надо прямо над кодом кнопок разместить вот такую строчку:

<h3>Уверен, что хороший человек всегда нажмет кнопочку:</h3>

Текст между тегами вы, конечно, указываете свой.

А для вставки разрыва я, без затей, написал тег перевода строки <br>

У нас получится вот так:

сервис Addthis - редактирование кодаРис.8

А на странице это теперь выглядит так:

сервис AddthisРис.9

Сравните с рис.7 – мне кажется, что так симпатичнее. Теперь предлагаю увеличить количество кнопок на сайте.

Изменение количества кнопок социальных сетей на сайте

Для этого нам опять необходимо зайти в редактор файлов и открыть для редактирования файл single.php. Находим код сервиса:

сервис Addthis - изменение количества кнопокРис.10

После строчки

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

делаем пустую строку, как сказано выше. Потом копируем строчку (на скриншоте выделена синим) и вставляем ее в пустую строку. И так повторяем еще 5 раз: пустая строка – копирование – вставка. Всего у нас должно получиться 10 строк.

 сервис Addthis - пример кодаРис.11

На самом сайте это выглядит так:

сервис Addthis - примерный видРис.12

Если нас это устраивает, то оставляем все как есть и переходим к очень ответственному этапу: нам надо определить, где тусуются наши читатели. От этого зависит, будут ли они кликать по кнопкам или нет. Если знакомых кнопок они не увидят, то вся наша работа будет насмарку – специально искать они их не будут.

Какие кнопки нужны на сайте

На рис.9 показано, что нам по умолчанию предлагается только 4 кнопки, причем те, которые вы видите у меня на рисунке и те, которые вы скопировали в сайта сервиса AddThis, будут отличаться – у меня уже сделаны некоторые доработки. Но это не имеет никакого значения – мы установим те, которые надо.

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

Я полагаю, что кнопки следует размещать так: разместите сначала 10 – посмотрите на сайте и решите, сколько еще можно добавить/убрать, исходя из расчета, чтобы они располагались в одну, максимум в две строчки.

И потом, следует учитывать, что большое их количество может замедлять работу сайта.

А вот какие социальные сети нам необходимы, это большой вопрос.

Нам необходимо разместить две группы сетей и сервисов: первая – российские социальные сети, которыми пользуется большинство наших пользователей, и всемирные социальные сети, где русскоговорящие пользователи также есть, хотя и в меньшем количестве. Кроме того, нам надо учитывать влияние кликов по социальным кнопкам (расшаривание) на продвижение сайта, а потому выбирать самые нужные.

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

ОЧЕНЬ ВАЖНОЕ ЗАМЕЧАНИЕ. Отбирая сервисы вы ни в коем случае не должны руководствоваться тем, в каких сервисах вы сами зарегистрированы – вашим читателям это не очень-то и интересно. Главное – в каких сервисах они сами зарегистрированы, где именно происходит их общение с друзьями. Они ведь хотят отправить сообщение СВОИМ друзьям, а не вашим.

Принцип здесь очень простой: кликая по кнопке, человек попадает в СВОЙ аккаунт, а не в ваш, или мой, или тети Тани.

Где можно увидеть перечень социальных кнопок, который предлагаем нам сервис AddThis?

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

перечень социальных сетейРис.13

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

Есть еще один способ. Надо перейти на страницу сервисов с описаниями и выбрать там:

 подбор социальных сетейРис.14

Кликнув по названию сервиса (1-й столбец) вы попадете на страницу с анализом этого сервиса, там есть интересные вещи, например, русским сервисом 100 закладок (первый в списке) пользуется гораздо больше американцев, чем русских.

Если вы кликните по категории сервиса, то сможете выбрать все сервисы относящиеся к ней. Подскажу: социальная сеть по-английски – это Social Network.

Если вам интересно узнать, какие сервисы наиболее популярны у нас в стране (это самый лучший способ определиться с кнопками), то кликните по ссылке Compare Countries (стрелка, см.рис.14). Вы попадете на страницу с анализом наиболее популярных сетей в той или иной стране (по данным AddThis):

самые популярные сети в РоссииРис.15

Кликните по любой кнопке выпадающего списка (стрелка) и выберите вашу страну – Россию, Украину, Таджикистан… Сервис вам покажет наиболее популярные сети в этой стране. Только учитывайте, что русскоговорящие пользователи могут жить не только в России, но и в других странах. Это же касается пользователей и на других языках.

Данные, представленные там, удивят вас. Например, Address Bar по популярности у нас в стране опережает Твиттер. Сервис Address Bar используется для подсчета количества копирований URL страницы вашего сайта в адресной строке браузера и последующей отправки его в электронном письме и т.д. А это означает, что люди используют письма гораздо чаще, чем вы предполагали. Или, например, распечатывание страницы происходит чаще, чем добавление в закладки Google и в социальную сеть Google+.

Здесь у вас может возникнуть вопрос – а как разместить все эти сервисы на сайте, если у меня количество мест ограничено?

Для этого можно использовать избранные сервисы.

Если вы посмотрите на сервисы, расположенные вверху на рис.13, и сравните с тем, что вы видите у себя, то обнаружите, что у меня вверху показаны совсем другие сервисы. Это произошло потому, что я ряд сервисов УЖЕ добавил в избранные, а избранные сервисы показываются в начале списка.

Другими словами, мы можем сделать так – определим сервисы, которые будут иметь свои кнопки на сайте. Предположим, что разместили 12 сервисов (социальных сетей). Еще 10 мы можем добавить в избранные и люди, кликнув на кнопку с плюсом, сразу их увидят без дополнительной прокрутки вниз. Итого, у нас получится 22 сервиса, 12 из которых видны сразу, а еще 10 расположены в одном клике. Я понятно изложил?

Тогда мы сможем самые популярные сети, например, Вконтакте или Одноклассники разместить на сайте, а менее популярные, но нужные для продвижения, например, Reddit или Linkedin расположить под «плюсом» и, причем, в самом верху.

Для того, чтобы составить свой собственный список избранных сетей и сервисов, нам необходимо кликнуть на ссылку «Войти», расположенную в правом верхнем углу (см.рис.13). У нас откроется новое окно:

Рис.16

В правой части расположены любимые услуги (т.е. избранное), сначала надо очистить этот список – полностью или частично. Кликаем по какому-то сервису (например, Bobrdobr), он становится желтым, потом нажимаем кнопку «Удалять» и БобрДобр переедет в общий список (в левое окно).

Потом выбираете сервис в левом окне (в общем списке) и нажимаете кнопку «Добавлять», этот сервис становится избранным, т.е. переезжает в правое окно. Таким же образом поступаем и дальше, пока не заполним весь список избранных сервисов.

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

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

Мы с вами определили нужное количество мест под кнопки, на сайте появились кнопки соц.сетей и у нас они даже, кажется, работают. Но беда в том, что при обновлении страницы у вас будут показываться разные кнопки, а нам надо, чтобы показывались те, которые мы определили.

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

<a class="addthis_button_preferred_1"></a>

надо вместо выражения preferred_1 указать код конкретной сети или сервиса. Где его взять? – На этой странице:

Рис.17

В левом столбце ищем нужную сеть (сервис), в столбце «Code» копируем его код и изменяем нужную строчку. Она должна стать такой

<a class="addthis_button_twitter"></a>

Только копируйте аккуратно, не допуская лишних пробелов, иначе сервис работать не будет.

После сохранения изменений и обновления страницы сайта, попробуйте покликать по кнопкам, посмотрите как они работают. Даже если в каком-то сервисе вы не зарегистрированы, то кнопка все равно должна вас туда привести – на страницу регистрации.

Анализ расшаривания статей

На сайте сервиса AddThis есть очень много интересных плюшек, но самая, пожалуй интересная – это анализ кликов по кнопкам. Его вы увидите каждый раз, когда заходите на сайт, а, кроме того, его можно увидеть, нажав на кнопку «Analytics» в правом верхнем углу (левая стрелка). Вот так выглядит основной (суммарный) отчет одного из моих сайтов, который я вчера добавил в сервис:

Рис.18

Показано количество кликов, сколько посетителей пришло на сайт из социальных сетей и какое-то процентное соотношение (толком не понял).

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

Как добавить второй сайт в свой аккаунт

Этот вопрос как-то не нашел отражения в пояснительных материалах сервиса, имеется только упоминание о том, что в аккаунте есть возможность добавления новых сайтов. Между тем, это делается очень легко, просто гениально. Вы просто размещаете код на новом сайте, как мы это делали выше, причем, С ТЕМ ЖЕ САМЫМ идентификатором и все. Проходят сутки и анализ готов.

Как сервис распознает тот сайт или этот – я не знаю. И знать не хочу, если честно. Но то, что не надо ничего изменять в коде или добавлять – это здорово. Кстати, рис.18 как раз и показывает анализ этого нового сайта.

Как можно посмотреть анализ конкретного сайта?

На странице анализа «Summary» в правом верхнем углу имеется ссылка «Change» (Изменить):

Рис.19

Кликнув по ней, мы увидим небольшую панель, где нас интересует правая часть.

Рис.20

Кликнув по кнопке выпадающего списка, выбираем нужный сайт и потом нажимаем кнопку «Go». В общем, все очень просто, как и во всем сервисе AddThis.

Конечно, в одной статье невозможно рассказать обо всех возможностях сервисах, я постарался рассказать только самое главное, естественно, — на мой взгляд.

Теперь очередь за вами – кнопки видите?

Удачи!

Похожие записи по этой теме:

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

Your email address will not be published. Required fields are marked *