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

18.03.2013 | Автор Алексей

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

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

Только представьте возможности социальных сетей, если одну только ВКонтакте ежедневно посещает более 40 млн. пользователей.

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

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

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

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

Итак, сделаем наш сайт более открытым читателю и поставим:

1. Кнопку «Нравится» ВКонтакте:

Как установить кнопку "мне нравится" вконтакте на сайт

2. Кнопку «Нравится» от Facebook:

Кнопка "Нравится" социальной сети Facebook

3. Кнопку «Твитнуть»:

Как добавить кнопку твитнуть

 

Либо можно установить блоки кнопок от различных сервисов в интернете:

Блок кнопок «Поделиться» от Yandex.

Вид блока социальных кнопок "Поделиться"

Сервис share.pluso.ru - позволяет выбрать один из трех размеров кнопок, их форму и положение — горизонтальное или вертикальное, со счетчиком и без.

Блок кнопок социальных сетей от Pluso

Сервис Share42.com — три размера кнопок, вертикальное или горизонтальное положение, на выбор кнопки 45 социальных сетей. Если к вашему сайту подключен jQuery, то можно добавить и счетчик.

Блок кнопок социальный сетей от сервиса Share42

Сервис Addthis.com. Чтобы попасть на страницу выбора кнопок, выберите пункт «Get the Code» в главном меню. У сервиса довольно много настроек. Для сайтов на WordPress, есть возможность установить кнопки с помощью плагина, чего я бы не советовал делать. Зачем перегружать свою CMS лишними плагинами, кнопки легко ставятся и вручную.
4 варианта исполнения, также вертикально либо горизонтально. На выбор кнопки более полусотни социальных сетей.

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

 

 

1. Кнопка «Мне нравится» ВКонтакте

Чтобы установить кнопку этой сети, Вам предварительно нужно зарегистрироваться ВКонтакте и получить API ID – персональный код.

Как получить кнопку "Мне нравится" ВКонтакте

На странице разработчиков ВКонтакте, в открывшейся форме заполняете следующее:

Сайт/приложение: Подключить новый сайт.
Название сайта: Вводите название своего сайта.
Адрес сайта: Введите полный адрес своего сайта/блога, вместе с «http://».
Основной домен сайта: адрес сайта введется автоматически, только обязательно  добавьте в конце домен — .ru  .com и т.д.

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

Далее выбираете «Варианты кнопки». Мне больше нравится кнопка с миниатюрным счетчиком, ее вид сразу же отображается внизу страницы, после формы.

Полученный код для вставки копируете в файлы вашей темы. Код состоит из двух частей – собственно сам скрипт и код для вывода кнопки.
Скрипт удобнее поместить в Footer, в виджет “Текст”. Потом не придется искать его в файлах темы. Если в вашей теме нет Footer-а, то вставляем код в файл header.php. Находится по адресу:

http://www.ваш_сайт/wp-content/themes/тема_wordpress/

Откройте файл и вставьте код перед закрывающим тегом

</ head>

Код вывода кнопки скопируем в файл  single.php, который находится там же. Вставьте код после строки:

<?php the_content(); ?>

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

Теперь на вашем сайте появится вот такая полезная кнопка:

Вид кнопки  "Мне нравится" социальной сети ВКонтакте

 

2. Кнопка «Like» от Facebook

Ее установка практически ничем не отличается от установки «Мне нравится» Вконтакте. То есть сначала необходимо зарегистрироваться в Facebook и затем перейти на страницу Facebook-Developers для получения кода кнопки.

Получить код кнопки "Нравится" социальной сети Facebook

Поля в форме заполняем следующим образом:

URL to Like:оставляем пустым
Send Button: Не буду описывать для чего эта кнопка, в большинстве случаев она тоже не понадобится. Снимаем галочку
Width: ширина кнопки
Font: шрифт надписи. Мне больше нравится tahoma
Color scheme: цветовая схема. Два варианта — на светлом либо на темном фоне.
Verb to Display: Выберите надпись, которую хотите видеть на кнопке. Также можно выбрать из двух вариантов: «Нравится» или «Я рекомендую»

Нажимаем «Получить код»

Скрипт из пункта 1 (см. рис. ниже) копируем в файл header.php перед закрывающим тегом

</ head>

Код вывода кнопки из пункта 2(см. рис.), соответственно вставляем там, где хотим видеть ее на странице. В файл single.php, после строки:

<?php  the_content(); ?>

 

Получить код кнопки "Нравится" Facebook

Собственно и все шаги. Теперь читатели вашего блога, могут легко поделиться статьей с друзьями в Facebook.

Кнопка "Нравится" социальной сети Facebook

 

3. Кнопка «Твитнуть»

Код кнопки можно получить на странице конструктора Твиттер.

Получить код кнопки "твитнуть"

В полях заполняем только:

Выберите кнопку: например отправить ссылку
С помощью: ваш ник в твиттере
Язык: русский

Все остальные поля оставляем без изменений. Полученный код также копируем в файл single.php:

 

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

 

Блок кнопок — “Поделиться» от Яндекс

Если по каким-то причинам, кнопки социальных сервисов описанные выше не уживаются на вашем сайте, можете поставить этот небольшой блок. В нем есть кнопки 12 социальных сетей, как говорится все в одном флаконе. Выглядит он не менее стильно и ставится в два шага.

Код для блока берем в сервисе Яндекса

Как установить блок "поделиться" от Яндекс

Готовый код также имеет две части.

Вот так будет выглядеть блок:

Вид блока социальных кнопок "Поделиться"

 

Кнопки от остальных сервисов Share42.com, Addthis.com и других ставятся аналогичным образом. Думаю, не должно возникнуть сложностей.

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

 

На этом пока все. Желаю успехов в продвижении сайта.

 

Анекдот:

Как заработать в ВКонтакте?
Для этого необходимо зайти в настройки, после чего удалить аккаунт и начать работать.

Добавить комментарий

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

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