Кнопки социальных сетей — ВКонтакте, Я.ru, Twitter, Mail на wordpress

Добрый день уважаемые читатели! Признайтесь чесно: сидите наверно иногда в социальных сетях и общаетесь. Делитесь всем интересным, обмениваетесь новостями, приглашаете на свои проекты друзей. А почему бы не предложить вашим знакомым возможность поделиться с их друзьями ссылочкой на вашу статью с блога на wordpress? И тем самым привлечь дополнительных читателей с социальных сетей. Так вот чтобы облегчить вашим знакомым задачу будем сегодня устанавлить кнопки социальных сетей — ВКонтакте, Я.ru, Twitter, Mail

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

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

Кнопка  Вконтакте

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

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

Так можно выбрать просто кнопку, кнопку со счетчиком, ссылку или выбрать просто иконку. Не хотите закругленные углы , тогда выбирайте прямые, не нравится текст на кнопке — пишите что хотите. Определились? Тогда копируем код. Только будьте внимательны, вам предлагаются два кода для вставки в шаблон. Так как мне неоходимо установить кнопки для начала на wordpress,  то и объяснять я буду на его примере.

Первый код нам необходимо вставить в файл header.php непосредственно перед закрывающимся тегом

</head>

<script src="http://vkontakte.ru/js/api/share.js?10" type="text/javascript" charset="windows-1251">// <![CDATA[

Второй код вставляем в файл single.php в удобное для нас место

1
2

<script type="text/javascript"><!--document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
// ]]></script>

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

Кнопка Mail.ru

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

Здесь уже у нас меньше возможностей по визуального вида кнопочки. Все что мы можем себе позволить так это выбрать текст на кнопке и определиться с ее видом — либо кнопка или же ссылка с иконкой. Копируем сгенерированный код и так же вставляем в файл single.php

Кнопка Я.ру
Вы не вкурсе, что есть такая социальная сеть? А ведь поставив такую кнопочку у вас появляется шанс делиться ссылкой на проект в яндекс .блоги. Там зарегистрировано не одна сотня блогов и пользователей и я там есть, надо только им сообщить о вашем проекте.

Для размещения этой кнопки нужно получить код на этой странице

Здесь все на столько просто и легко, что вам останется только скопировать код и разместить его в файле single.php

<a type="button" name="ya-share"></a> <script type="text/javascript" charset="utf-8">// <![CDATA[
if (window.Ya &#038;&#038; window.Ya.Share) {Ya.Share.update();} else {(function(){if(!window.Ya) { window.Ya = {} };Ya.STATIC_BASE = 'http:\/\/img\-css.friends.yandex.net\/';Ya.START_BASE = 'http:\/\/wow.ya.ru\/';var shareScript = document.createElement("script");shareScript.type = "text/javascript";shareScript.async = "true";shareScript.charset = "utf-8";shareScript.src = Ya.STATIC_BASE + "/js/api/Share.js";(document.getElementsByTagName("head")[0] || document.body).appendChild(shareScript);})();}
// ]]></script>

Кнопка Twitter

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

И так заходим на страницу,

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

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

Для начала следует объяснить читателю что это за кнопки, поэтому создаем произвольный текс. Например: Не забудь поделиться играми с друзьями в: или Понравилось? Тогда сообщи о нас другим. Здесь уже все зависит от вашей фантазии. Теперь необходимо выделить текст и кнопки, для этого создаем с помощью css стилей границу, предварительно заключив код текста и коды кнопок в <div></div>  и создав класс стилей knopki и text

Открываем для редактирования файл style css и в любом месте прописываем стили

.knopki
{
border:1px dashed #F2C284;
margin-top:10px;
padding-left:150px;
}
.text
{font-weight:bold;
color:#E89120;
}

Где,

border:1px dashed #F2C284; — размер границы, ее вид и цвет

margin-top:10px; — расстояние между границей и контентом располенным сверху

padding-left:150px; — расстояние от границы до кнопок с левого бока

font-weight:bold; — начертание текста

color:#E89120; — цвет текста

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

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

А вот сейчас, пожалуйста не сотресайте воздух кулаками, вебмастер должен уметь делать все, я расскажу о сервисе с помощью которого вам и потеть — то особо не придется. Дело в том, что многоуважаемый Яндекс  сделал универсальную кнопку социальных сетей. Это  блок Поделиться.

Кнопочка у Яндекса получилась очень аккуратная и удачно впишится в любой дизайн блога(прокрутите страницу вниз, там на примере вы сможете в этом убедиться ). Чтобы установить блок Поделиться от Яндекс проходим вот на эту страницу

Здесь вам предлагает выбрать социальную сеть, поставив против нее галочку в пункте «Набор сервисов». Как это будет выглядеть можно увидеть в пункте «Внешний вид блока», кстати здесь же вы можете вместо кнопки выбрать ссылку «Поделиться». Сделав все настройки копируем сгенерированный код и устанавливаем его в файл single.php вашего шаблона.

<script src="//yandex.st/share/share.js" type="text/javascript" charset="utf-8"></script>

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

<?php the_content(‘Читать полностью’); ?>

Не забудьте заключить код в тег <noindex></noindex> и сохранить изменения.

Ну как получилось? Тогда на этом я завершаю. Всем удачи!

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

Вам понравилась статья? Расскажите о ней друзьям!