Кнопки “Стань другом” или “Следуй за мной” от сервиса AddThis.com

В данной статье и видеоуроке мы сформируем скрипт блока для кнопок “Стань другом” в социальных сетях на основе формы RSS-подписки из предыдущей статьи.

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

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

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

Кнопки социальных сетейКнопки “Стань другом” или, как их ещё называют “Кнопки следуй за мной”, добавим в форму RSS – подписки, полученную в предыдущей статье моего сайта:

Форма RSS подписки

Далее внесём в код коррекцию и разместим в сайдбаре полученную форму:

Кнопки "Следуй за мной"

 

Код кнопок “Стань другом” от сервиса http addthis.com

Для получения кода кнопок “Стань другом” сайта мы воспользуемся многофункциональным, замечательным сервисом AddThis, с которым мы уже познакомились в статье: “AddThis – кнопки социальных сетей для продвижения сайта“. В ней мы научились устанавливать блок кнопок, содержащий более 300 социальных сетей и закладок, чтобы гости Вашего сайта могли поделиться информацией со своими друзьями.

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

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

AddThis.com

Попадаем на страницу и выполняем следующее:

Настройка кнопок "Стань другом" или "Следуй за мной" от сервиса AddThis.com

1.Выбираем стиль “Горизонтальное большое меню”.

2.Задаём заголовок кнопок: “Стань другом” или “Следуй за мной”.

3.Заносим в окошки напротив социальных сетей ссылки на свои страницы в социальных сетях. Начальную часть ссылки убираем и оставляем только ту часть, которой не хватает в тексте ссылки перед окном. То есть в окне оставляем только продолжение ссылки, расположенной перед окном. В предварительном просмотре появляются добавленные кнопки.

4.После того, как занесены все ссылки, нажимаем “Получить код”.

Код кнопок "Стань другом" или "Следуй за мной" от сервиса http AddThis.com

Это готовый код кнопок “Стань другом”, который можно вставить в любое место на Вашем сайте.

Если хотите расположить кнопки “Стань другом” в форму RSS-подписки, то пойдём далее.

 

Внедряем код кнопок “Стань другом” в форму RSS-подписки

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

Заходим в “Пуск”, запускаем программу “Блокнот”.

Сюда вставляем сначала скрипт формы RSS – подписки, который можно сформировать в п.5 предыдущей статьи моего сайта. Скрипт имеет примерно такой вид:

Скрипт формы RSS-подписки

Далее копируем код кнопок “Следуй за мной” или “Стань другом” на сервисе AddThis.com и вставляем в указанное на рисунке место.

Выполняем небольшую коррекцию:

1.Заменяем строку в коде:

<p>Стань другом:</p>

на строку со стилями для заголовка формы:

<b style="color:#17586b;font-family:'Times New Roman', Times, serif;
text-align:center;font-size:1.4em;height: 45px;">Стань другом:</b>

2.Вставляем в трёх указанных местах непарный тег (непарный – значит не имеет закрывающего тега):

<br />

который выполняет перевод строки.

Скрипт блока кнопок "Следуй за мной" или "Стань другом" от сервиса AddThis.com

Окончательный код формы выглядит примерно так:

<div>
<form style=" color: #000000; /* цвет текста */
background: #EEEEEE; /* фон блока */
border: 3px #CCCCCC solid; /* стили рамки */
-moz-border-radius: 15px; /* закругление для старых Mozilla Firefox */
-webkit-border-radius: 15px; /* закругление для старых Chrome и Safari */
border-radius: 15px; /* закругление углов для всех, кто понимает */
padding: 5px; /* внутренние отступы */
text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" rel="nofollow"
method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=Ваш фид',
'popupwindow', 'scrollbars=yes,width=550,height=630');return true">
<!-- AddThis Follow BEGIN -->

<b style="color:#17586b;font-family:'Times New Roman', Times, serif;
text-align:center;font-size:1.4em;height: 45px;">Стань другом:</b>

<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<br /><a class="addthis_button_facebook_follow" addthis:userid="ledy.lilu"></a>
<a class="addthis_button_twitter_follow" addthis:userid="ingritlady"></a>
<a class="addthis_button_google_follow" addthis:userid="u/0/116081384572065150235/posts"></a>
<a class="addthis_button_rss_follow" addthis:url="http://feeds.feedburner.com/pib9"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-50419c475f684a0c"></script>
<!-- AddThis Follow END -->

<br /><div align="center">
<img class="alignleft size-full wp-image-13"
style="margin-left: 10px; margin-right:10px;"
title="Получать новые статьи сайта на E-mail"
src="http://pib9.ru/wp-content/uploads/2011/12/rss.gif"
alt="Получать новые статьи сайта на E-mail"
width="48" height="48" /><b>Получай первым статьи сайта
прямо себе на почту!</b>
<center><input name="email" type="text" style="width:150px" value=" Введите Ваш E-mail" class="subscribe_textieldpost"
onfocus="if (this.value == ' Введите Ваш E-mail')
{this.value = '';}" onblur="if (this.value == '') {this.value = ' Введите Ваш E-mail';}" />
<input class="naity" type="submit" value="ok" />
<input type="hidden" value="Ваш фид" name="uri" />
<input type="hidden" name="loc" value="ru_RU" />
</center></div>
<br />
</form></div>

Размещаем форму с блоком кнопок “Следуй за мной” или “Стань другом” на сайте

После того, как получен весь скрипт формы, переносим его в админпанель нашего сайта, расположив в сайдбаре, для этого:

1.Выбираем “Дизайн”=>”Виджеты”.

2.Перетаскиваем виджет “Текст” в то место сайдбара, где будет находится наша форма.

3.Открываем виджет и вставляем наш скрипт.

4.Нажимаем “Сохранить” и “Закрыть”.

5.Переходим на сайт и видим в сайдбаре форму с блоком кнопок “Стань другом” и RSS-подпиской.

 

Проверка работоспособности блока кнопок “Следуй за мной” или “Стань другом” сайта

Проверяем работоспособность каждой кнопки. При нажатии на каждую кнопку должна открываться Ваша страница в соответствующей социальной сети.

Проверьте так же работоспособность RSS – подписки, введя свой e-mail и следуя инструкциям п.6 предыдущей статьи.

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

Смотрите видеоурок, делайте форму с блоком кнопок “Следуй за мной” или “Стань другом” и продвигайте свой сайт с удовольствием.

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

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

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

Желаю Вашему сайту большого трафика!



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

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

13 комментариев

  1. Здравствуйте, Надежда! Сегодня я передаю заслуженную награду лучшим авторам сайтов «Кубок Признания»! Получить ее Вы можете пройдя по ссылке у меня на сайте http://bistroinfo.com/kubok-priznaniya (вторая часть). Желаю успехов Вам в развитии и продвижении Вашего сайта!

    • Спасибо огромное, Андрей, за такое внимание к моему сайту, которому неоднократно вручался такой приз. Мне очень приятно! Но, к сожалению, у меня другие приоритеты — я никогда не размещаю активные ссылки на своём сайте на другие ресурсы, кроме партнёрок, счетчиков и т.п. Поэтому я не могу выполнить условия награждения. Единственное, что я могу сделать — это оставить ссылку на Ваш сайт, которую Вы оставили в комментариях на моём сайте, но эти ссылки закрыты от поисковиков в файле robots.txt.

  2. Пожалуйста, Надежда! И вам спасибо за то, что пишете интересные статьи! После этой статьи планирую поменять блок на RSS подписку.

    Хочу вас обрадовать – у меня такие же приоритеты, как и у вас, по поводу активных ссылок на другие ресурсы! Посмотрите у меня на сайте, и вы все увидете. КУБОК ПРИЗНАНИЯ ваш и вы вправе сами решать, что и как с ним делать. Желаю попутного ветра вашей Ладье Интернет-Бизнеса!

  3. Здравствуйте,Надежда! Спасибо за то, как вы пишете о теме личного заработка. Очень воодушевила эта статья, в ней много интересного, полезного, ценного, прекрасно раскрыт материал. До встречи ! Успеха Вам в продвижении сайта и побольше таких материалов!

  4. Надежда, огромное спасибо за такой труд. Я полный ноль в ХТМЛ, но даже я смогла кое что поменять с помощью Ваших объяснений. А вот мужские объяснения я вообще не понимаю… :)

  5. Спасибо за толковую статью! Симпатично выглядит блок и удобно. Еще бы настроить автоматическую публикацию анонсов постов в социальных сетях. Не подскажете каким плагином или сервисом это можно сделать?

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

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

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