Кнопки социальных сетей. Социальные кнопки WordPress

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

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

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

Признанные социальные кнопки

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

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

Добавить кнопки социальных сетей вам просто необходимо из:

• Facebook – самая популярная мировая социальная сеть. Как бы то ни было, но трафик с данной социальной сети реален, особенно если у вас немало друзей или есть живая группа по интересам;
• Вконтакте – пожалуй, самая динамично развивающаяся за последние годы социальная сеть. Когда было анонсировано открытие индексации ссылок с этой социальной сети, произошел своеобразный БУМ. Русскоязычная часть интернета в любом случае в своем большинстве присутствует в этой социальной сети.
• Google plus – социальная сеть появилась относительно недавно, но уже четко вошла в Интернет. Главным аргументом добавления данной социальной кнопки является то, что поисковый гигант Google уже давно смотрит в сторону персонализации поиска. А именно теперь, исходя из интересов и круга общения конкретного пользователя, происходит и построение выдачи. Об эффекте социальной кнопки Google +1 я писал здесь. Как вы можете понимать – кнопка на сайте – эффект от выдачи.
• Одноклассники – очень популярная сеть и дает вполне ощутимый трафик при условии наличия в друзьях заинтересованных в предлагаемых материалах пользователей. Это более развлекательная социальная сеть, поэтому проекты не развлекательного характера мало что получают от социальной кнопки этой сети.
• Твиттер – хоть это и не социальная сеть, а своеобразная социальная сеть микроблоггинга, но не упомянуть ее в данном контексте было бы ошибкой. Кнопка этого социального сервиса как никакая упомянутая мною выше социальная сеть дает больше трафика. Помимо этого, любителям потягаться в рейтингах скажу, что тематические упоминания в Твиттере поднимают авторитетность по версии Рейтинга блогов Яндекс - http://blogs.yandex.ru/top/.

Все остальные социальные кнопки – это уже так называемый понт или неосведомленность владельца сайта об эффективности или не эффективности.

Пока мы далеко не ушли от этого списка, хотелось бы узнать у вас, какая из социальных кнопок дает вам больший эффект в области трафика и других плюшек?

 Загрузка ...

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

Добавить кнопки социальных сетей вы можете тремя способами:

• Через предоставляемые самими социальными сетями коды кнопок;
• Посредством установки специальных плагинов и модулей (в зависимости от того, какая у вас CMS);
• Через специальные сервисы, которые работают с наборами кнопок.

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

1. Скрипт кнопки социальной сети Вконтакте.

Социальная сеть Вконтакте огромна и живых душ в ней насчитывается около 70 миллионов. Представьте, какая это аудитория? Практически у каждого пользователя Рунета наверняка есть страничка в Вконтакте и если будет социальная кнопка от этой сети, то почему бы и не поделиться интересным и полезным материалом?!

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

Генератор кнопки выглядит так:

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

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

Самый популярный вид кнопки такой:

А код этой кнопки следующий:

<!-- Put this script tag to the <head> of your page -->

<script type="text/javascript" src="http://vk.com/js/api/share.js?11" charset="windows-1251"></script>

<!-- Put this script tag to the place, where the Share button will be -->

<script type="text/javascript"><!--

document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));

--></script>

2. Скрипт кнопки социальной сети Facebook.

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

Главное, если вы размещаете на свой блог кнопку, то в URL не забыть вписать:

<?php the_permalink() ?>

Но вот если вы пропишите сразу его в форму, вот так:

То система выдаст вам ошибку, вот такую:

Поэтому в код необходимо какой-то реальный адрес прописать, потом в полученном коде его найти и вписать <?php the_permalink() ?>, в итоге получим следующий код:

<div data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false" data-action="recommend"></div>

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

3. Скрипт кнопки социальной сети Google plus.

За кодом кнопки Google +1 вам придется пройти на эту страницу.

Как и во всех продвинутых сервисах, разработчики Google позаботились о распространении кода кнопки и создали интуитивно понятный интерфейс по созданию кнопки:

Ничего сверхъестественного, думаю, здесь вы не встретили.

Аккуратную кнопку этой социальной сети вы можете поставить, вставив этот код:

<script type="text/javascript">

window.___gcfg = {lang: 'ru'};

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script>

<div class="g-plusone" data-href="<?php the_permalink(); ?>" data-size="medium"></div>

4. Скрипт кнопки социальной сети Одноклассники.

Социальная сеть Одноклассники свою кнопку «Класс» предлагает в массе вариантов на этой странице.

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

Итак, чтобы вставить социальную кнопку Одноклассников, вам понадобится в следующей последовательности выполнить следующие действия:

1. В заголовок страницы включить ссылки на Javascript и CSS файлы, находящиеся на серверах Одноклассников.

<link href="http://stg.odnoklassniki.ru/share/odkl_share.css" rel="stylesheet">

2. Вставить HTML код кнопки в удобное для вас место на странице.

<a class="odkl-klass-stat" href="Абсолютный адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>

Код этой кнопки, в отличие от обычной кнопки «Класс!», модифицировать нельзя, всё, что находится внутри <a></a>, будет заменено.

Важно сохранить оригинальное имя класса CSS, так как оно используется как признак кнопки.

3. Чтобы появилась статистика, после окончания загрузки страницы необходимо ОБЯЗАТЕЛЬНО вызвать ODKL.init();, например:

<body onload="ODKL.init();">

5. Скрипт кнопки системы микроблоггинга Твиттер.

Кнопка ретвитов от сервиса микроблоггинга Твиттер генерируется здесь.

Это не что иное, как визуальный редактор, поэтому описание здесь излишне. Никаких подвохов нет, все очень просто и понятно. Кстати, у данной кнопки сразу предусмотрен выбор URL, данной страницы или конкретного адреса. Этот пункт убирает лишние заморочки с кодом в отличие от подобной ситуации с кодом кнопки Facebook.

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

Плагины кнопок социальных сетей

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

Поиск плагинов у многих отнимает немало времени, так как часть из этих «многих» даже не подозревают о существовании поиска внутри самого WordPress.

Заходим в администраторскую часть, находим пункт «Плагины», а в нем переходим в раздел «Добавить новый»:

В строке поиска имеющихся плагинов вводим «social buttons»:

После этого нажимаем на кнопку «Поиск», расположенную справа от поля ввода запроса.

Через секунду WordPress выдаст более 20 страниц с плагинами. Выглядит это приблизительно так (кликабельно):

Дальше, думаю, интуитивно все понятно, нужно выбрать понравившийся плагин, установить его, активировать и настроить. Я рассказывать о всех плагинах подобного рода не стану, так как принцип их работы и настройки приблизительно одинаков. Этот процесс весь я покажу на примере одного плагина «Social Share Buttons».

Итак, после установки плагина кнопок социальных сетей Social Share Buttons в панели администратора в WordPress появляется такой пункт:

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

Далее вам просто понадобится зайти в разделы «Share настройки» и «Like настройки», где установить вид кнопок, их состав и порядок:

Все плагин готов к работе и выглядит вот так:

Согласитесь, красивые кнопки социальных сетей?!

WordPress плагин социальные кнопки легко ставит, но все же дает и свои минусы – нагрузку на работу CMS.

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

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

Вполне интуитивно-понятный сервис на уровне «Выбери и все». Сервис позволяет выбрать свой «социальный компот» из 45 сервисов.

Вначале необходимо осуществить этот выбор – просто нажимаете на нужны вам кнопки, при этом не забыв предварительно определить размер кнопок (кликабельно):

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

После выбора кнопок создаем нужную конфигурацию, определяя опции:

Как вы сами понимаете, уже определенно есть какой-то результат. Система в следующем шаге предлагает посмотреть нам на него:

Все! Дальше вам только остается установить данные кнопки не хитрым способом, который четко описан в системе (кликабельно):

В чем же главный плюс использования сервиса социальных кнопок:

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

Скрипт кнопки социальных сетей или плагин?

Как вы понимаете, любой из способов, будь то скрипт кнопки социальных сетей или плагин кнопок социальных сетей, вносит свою лепту в скорость загрузки сайта. Но, так или иначе, размер этой лепты может быть абсолютно разным. Естественно, плагин гораздо серьезнее затормаживает скорость загрузки страницы. Это можно четко понять, если вы сравните работу плагина кнопок социальных сетей и скрипта кнопок социальных сетей путем определения числа запросов к сторонним сервисам и к самому WordPress. У плагина этот показатель будет на 10, а то и больше процентов выше. Раз число обращений больше, логично, что скорость загрузки страницы медленнее. На примере своего блога скажу, что разница между скоростью загрузки страницы при установленном плагине социальных сетей и установленном скрипте социальных сетей достигает 2-х секунд. Это время в области создания и оптимизации сайтов не такое уж и маленькое.

Социальные кнопки и скорость работы сайта

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

Это позволило убрать сразу несколько десятков не нужных обращений к сторонним сервисам и ускорить сайт на 3 секунды.

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

Желаю вам успехов, ставьте кнопки социальных сетей и работайте над их результативностью!