Кнопки социальных сетей для сайта
И снова здравствуйте друзья, сегодня я хочу вам рассказать про специальные кнопки социальных сетей, и их внедрения на свой блог. Это очень важный момент, на который обязательно стоит обратить внимание, если вы хотите раскрутить свой ресурс и сделать его популярным. На сегодняшний день, социальные сети так прочно вошли в нашу жизнь, что практически каждый человек уже пользуется ими, и тенденция эта будет только расти. Мы общаемся в этих сетях, делаем покупки, налаживаем связи, узнаем что-то новое, развлекаемся… Такой себе универсальный комбайн, где собрано огромное количество информации и многомиллионная аудитория пользователей. Так вот, начав взаимодействовать с соц.сетями мы погружаемся в этот круговорот, и он начинает давать эффект.
Какие полезности получим мы?
1) Увеличение количества посетителей на свой блог.
2) Улучшение индексации и ПФ (поисковые системы очень хорошо относятся к переходам из социальных сетей и анонсов ваших статей там).
Для того чтобы получить эти вещи нам необходимо установить на свой ресурс, кнопки социальных сетей и настроить их.
В данной статье мы рассмотрим 4 основные социальные сети, на самом деле их есть намного больше, но как показала практика эффект от прочих очень слабый.
1) Facebook — самая популярная сеть в мире, создав группу вашей тематики и пригласив в нее друзей, можно получать весьма приличный трафик. А на сайте Avi1.ru — можно накрутить большое количество лайков на кнопки соцсетей, виджет на сайте, на фото и посты.
2) Вконтакте — Наиболее динамично развивающаяся социальная сеть в Рунете. Присутствие ее на вашем блоге обязательно.
3) Google +1 — сравнительно молодая сеть, но успевшая удачно себя зарекомендовать. Многие эксперименты показали ее эффективность при использовании.
4) Твиттер – про эту сеть слышали практически все. Система микроблоггинга с каждым годом становится все более популярной и трафик оттуда можно получить весьма хороший.
Разберемся с технической частью и установим коды всех 4-х систем у себя на блоге:
Скрипт Facebook
Сконфигурировать кнопку этой сети можно на специальной странице, указав необходимы параметры. На самом деле, ничего сложного нет, если не хотите заморачиватся с параметрами, просто укажите настройки, которые приведены на скриншоте ниже и нажмите кнопку – «GetCode». Система сгенерирует необходимый код, который просто нужно вставить на блог.
Готовый код для использования:
<div data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, \'script\', \'facebook-jssdk\'));</script>
Скрипт Вконтакте
На этой странице сгенерируйте код. В принципе все просто, можно ничего не трогать в настройках которые предлагает нам система, а просто взять этот код и вставить себе на блог. Единственный момент – лично мне не нравится стандартная надпись – «Сохранить». У себя на блоге я использую надпись – «Мне нравится», но это уже на ваше усмотрение.
Готовый код для использования:
<!-- Put this script tag to the <head> of your page -->
<script charset="windows-1251" type="text/javascript" src="http://vk.com/js/api/share.js?11"></script><!-- Put this script tag to the place, where the Share button will be --><script type="text/javascript">// <![CDATA[
document.write(VK.Share.button(false,{type: "round", text: "Мне нравится"}));
// ]]></script>
Скрипт Google +1.
Для получения кода этой сети вам необходимо перейти на страницу конфигурирования. На скриншоте я привел оптимальные настройки, можете использовать их.
Готовый код для использования:
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">// <![CDATA[
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>
Скрипт системы микроблоггинга Твиттер.
Сделать кнопку ретвитов вы можете на этой странице. Ничего сложного в конфигурации нет, на скриншоте все указано, только в строке — с помощью (Параметры) – укажите свое имя пользователя.
Готовый код для использования:
<a class="twitter-share-button" href="https://twitter.com/share" data-via="seofiveru" data-lang="ru">Твитнуть</a>
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>
Кнопки социальных сетей от Яндекса
Если вы не хотите настраивать все эти кнопки, разбираться с кодом, можно воспользоваться готовым решением, которое предоставляет Яндекс. На этой странице отметьте необходимые кнопки социальных сетей, выберете режим отображения и вставьте сгенерированный код себе на блог.
Готовый код для использования:
<script charset="utf-8" type="text/javascript" src="//yandex.st/share/share.js"></script>
<div class="yashare-auto-init" data-yasharel10n="ru" data-yasharetype="button" data-yasharequickservices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div>
Вставлять код кнопок социальных сетей необходимо под каждой записью вашего блога. Прочел пользователь статью, она ему понравилась, он и отблагодарил вас нажатием на одну из кнопок. Конечно, вы можете вставить код, куда вам нравится, но наиболее практичное место это сразу после поста.
Для вставки кода придется немного подкорректировать шаблон вашей темы. В консоле вашего блога, перейдите на вкладку Внешний вид – Редактор и откройте файл – «Одна запись» (single.php). В этом файле вставьте код социальных сетей, обычно после строчки:
<?php the_content(''); ?>
Используйте социальные сети в вашей работе обязательно, с их помощью вам намного легче будет продвигать ваш ресурс.
и получай самую свежую информацию на свой e-mail!
Свежая информация в сфере SEO:
Сколько вы времени пишите один пост?
Ну наверное все зависит от человека,как он подкован в этой теме,ну конечно же и от сложности статьи.
По разному бывает, этот пост 3,5 часа писал.
Хорошая подборка, буду пробовать.
А возможно сделать такую функцию но именно со своими картинками. У меня есть свои иконки, которые при наведении меняются и чтобы при нажатии на кнопку рассказывалось друзьям в соц. сети?
Посмотрите в исходном коде страницы где расположены кнопки. Там скорее всего есть возможность сделать замену.
Спасибо, все отлично работает, если бы не кнопка в фейсбуке( Она вообще не появляется. Я вставляла код через гаджет в дизайне (на блогспоте), но знаю, что в контакте не работает пока в код шаблона не внесешь шапку, может это и для фейсбука? Где тогда найти такую шапку?
Для facebook не нужно дополнительный код в шапку вставлять. Просто копируете сконфигурированный код и вставляете в место для вывода. Если этот способ не работает, можете через кнопки от Яндекса попробовать вывести.
Да неплохая подборка сервисов. Хотелось бы добавить на плюсо ру. там в сервисе выбираете нужные кнопки и получаете скрипт который копируете к себе в шаблон страницы.
Я пробовал несколько подобных сервисов в течении года и плагины различные, но в конечном счете вернулся к кнопкам «Поделиться» от Яндекса.
Все элементарное просто))
Плюс у этих кнопок. что детальная статистика доступна в личном кабинете яндекс вебмастер и плагины не нужны 🙂
Здравствуйте, вписал в код шаблона «Блок социальных кнопок от Яндекса» на свой сайт но столкнулся с одной неприятностью — размером кнопок, подскажите как увеличить размер иконок социальных сетей?
Здравствуйте. Это вам нужно на биржу фриланса обратится.
А я скриптом от сервиса Плюсо пользуюсь,очень удобно,меня устраивает.
Кнопки хорошая идея, плохо что пользователи кнопки редко нажимают.
Да просто стараются не забивать странички соц.сетей.
А вы сами нажимаете?
У меня не нажимаются из за настроек какой то программы. Наверно антивируса.
Ну скорее всего из за антибанера.
Но я перенастроил для часто посещаемых сайтов отключил настройки.
Антивирус тоже блокирует то что ему кажется подозрительным. Каждый антивирус подозрительным своё считает.
Согласен,у меня браузерный антивирус тоже блокировал
Рад, что мой совет Вам помог.
Ну так и должно быть.Друг другу советами помогать
Добавлю – грамотными советами, а не с потолка взятыми.
Ну это то понятно
Хороший обзор внедрения кнопок соцсетей на свой блог.