22 Апр, 2012
Категории: Facebook, Google plus, SEO, SMO, Оптимизация сайта, Твиттер
Автор: Вовка

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

Партнерская программа Vulkanpartner

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

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

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

 

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

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

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

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

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

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

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

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

Просмотреть результаты

Генератор кнопок соц сетей Загрузка ...

 

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

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

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

 

 

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

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

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

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

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

Wordpress встроить кнопки социальных ctntq

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

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

 

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

Исчезла кнопка Facebook на сайте

 

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

<!-- 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() ?>

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

Cjw rgjrb djhlghtcc

 

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

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

 

Поэтому в код необходимо какой-то реальный адрес прописать, потом в полученном коде его найти и вписать <?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">
<script src="http://stg.odnoklassniki.ru/share/odkl_share.js" type="text/javascript" ></script>

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. Скрипт кнопки системы микроблоггинга Твиттер.

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

Кнопки соц сетей Twitter

 

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

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

 

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

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

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

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

Генератор кнопок Google plus

 

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

Wordpress все соц сети

 

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

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

Использование социальных сетей плагины для сайта

 

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

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

Cjlftv cjwbfkmye ryjgre

 

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

Кнопка в контакте с эффектами

 

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

Êíîïêà òâèòòåð

 

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

Кнопки соц сеетй

 

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

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

 

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

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

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

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

Генератор кнопки соц сетей

 

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

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

Wordpress виджет с соц сетями

 

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

Индексируются ли кнопки соц сетей

 

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

Blogspot

 

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

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

 

  

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

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

 

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

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

Кнопка Твиттер Wordpress

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

 

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

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

Вовочка спрашивает:
- Мама, а как я появился?
- Мы тебя в капусте нашли.
- А моя сестренка как появилась?
- А ее мы нашли в розе.
На следующий день Вовочка заходит в комнату к родителям и, застав их за интересным занятием, говорит:
- Ну что, садоводство в самом разгаре?

Робот блога считает, что это может быть вам интересно:

Похожие записи в блоге:

   

Нравится как я пишу? Давайте вместе формировать интересные материалы на моем блоге. Вы можете сделать ретвит данной статьи или подписаться на мою ленту в системе микроблогов Твиттер.
Читайте меня в Твиттере и будьте в курсе последних моих действий.

Комментирование Facebook:


  • Анекдот понравился)))

  • Владимир, у меня к вам вопрос по поводу плагинов, если не секрет, сколько стоит у вас? предпочитаете ли вы использовать скрипты?

  • У меня стоит 16 плагинов, в своем большинстве они организовывают работу сайта - RSS, XML, СПАМ...

  • Хорошо было бы найти сервис, где самому кнопки можно "нарисовать".

  • Не все сразу. Найдем что-то и интересненькое...

  •  Твиттер-клиенты на русском (не браузерные) есть в наличии?

  • Сергей

    А от Яндекса "Поделиться" чем хуже?

  • У меня только одна кнопка. Твиттера.

  • Здравствуйте, Владимир. У меня стоит плагин, о котором Вы пишете. Но кнопка однокласников никак не хочет работать ("Нет доступа к ресурсу). Более того, когда я вручную пытаюсь вписать в свою ленту на однокласниках ссылку на статью, пишет, что неправильный формат ссылки. Тем не менее, несколько раз мне все-таки удалось впихнуть туда ссылки на заметки. Как я понимаю, это что-то с настройками моего хостинга не так, как Вы думаете? Можно ли это изменить? Я ощущаю оттуда приток посетителей, когда мне удается проанонсировать там статью. 

  • А чем лучше то? Попробуйте собрать друзей над Яндекс-сервисом или уже с Твиттером...

  • По поводу Твиттер-клиентов писал здесь - 
    http://vovka.su/populyarnye-twitter-klienty/

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

  • А  как поставить кнопки соц. сетей на Blogspot?

  • Александр

    Добрый день. Скажите, что у вас за кнопки соцсетей слева в плавающей панели и как сделать такие же? Спасибо.

  • Спасибо! Действительно, плагин ощутимо тормозит сайт. Поставил через сервис share42.com и очень доволен.

  • За скрипты большое спасибо.Буду изучать и пробовать. Хотя загрузка у меня не превышает 2 сек. Все равно надо работать и лишние плагины удалять. По поводу самих кнопок-наибольшую пользу ощущаю от Twitter(приток трафа) И опять плагин:) Рекомендую простенький,так и называется Twitter plugin Сайт производителя bestwebsoft.com очень симпатичная птичка нарисовывается в нужном месте текста,если прописать [follow me]

  • Tkachenko_Serg

    Здравствуйте Владимир,
    Очень интересная статья!
    У меня такой
    вопрос: Нужно ли делать запрет индексации кнопок соц. сетей («Мне нравится» "Google+1" , «Твитнуть»). Прочитал
    уже довольно много статей по этому поводу, но однозначно никто сказать
    не может как лучше.
    Влияет ли это как то на сайт?
    Что лучше использовать скрипт или генерировать коды кнопок, чтобы не сильно затормозить загрузку страниц. ( движок сайта самописный и страницы сейчас грузятся довольно быстро).
    Спасибо!

  • Владимир, а чем реализовал кнопки у себя в блоге? Плагин какой, или скрипты?

  • Здравствуйте Владимир, я установил кнопки соц сетей на сайт голосований через соц.сети (http://www.vot.x10.mx), все кнопки работают кроме одноклассников, нажимаю на кнопку все появляется в окошке, как жму
    "поделится" так все вылетает, а на одноклассниках нужно опять авторизоваться, в чем может быть проблемма? Заранее спасибо !

  • Хорошая и нужная статья.

  • Спасибо, Владимир. Статья очень подробная, помогла мне определиться. Я выбрала путь плагинов, и, поскольку у меня длинные посты - Socialize It! Искала, чтобы было похоже на ваш вариант, и нашла! 
    Видимо, это относительно новый плагин - о нем мало информации. Надеюсь, 
    все будет хорошо. Удачи вам и еще раз спасибо за степень подробности!

  • vadzorro

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

  • Помогите с кнопками на сайте http://seo-times.ru
    Что то не получается

  • Мария

    Здравствуйте! Владимир, у меня стоит плагин social share buttons уже давно. Отлично работали все кнопки. Но с месяц назад кнопочка в контакте вызывает пустое белое окошко, без информации, но с кнопочкой отправить. Если нажать, на страницу вставляется только голая ссылка на главную страницу сайта. В чем может быть дело? Никак не найду причину. Спасибо!

  • Аида Ротская
  • Пендальф

    А я тоже ставил кнопки на дле от share42 на сайт http://sexojam.ru и почему-то половина кнопок вели просто на главную страницу сайта закладки, но ничего не добавляли.

  • Александр

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

Я в Google Plus

Блоггеру

Рекомендую

Мануалы

Опрос

Что для вас важно при выборе PPA партнёрской программы для долгосрочной работы?

Просмотреть результаты

Загрузка ... Загрузка ...

Вовкин блог на Facebook

SEO Powered by Platinum SEO from Techblissonline