Кнопки социальных сетей — ВКонтакте, Я.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 && 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 записки отчаянной«, то предлагаю подписаться на обновления блога в удобной для вас форме.
Возможно Вам это будет интересно:
Вам понравилась статья? Расскажите о ней друзьям!