Как установить кнопки социальных сетей, без плагинов!

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

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

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

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

А устанавливают социальные кнопки в основном, В контакте, Facebook, Twitter, Google +, я думаю что больше кнопок и не надо, этих кнопок будет вполне достаточно вам, и смотреться они у вас будут достаточно красиво, и будут привлекать внимание, на них так и будет хотеться нажать.

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

Как установить кнопки социальных сетей?

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

Установка кнопки В Контакте:

Чтобы установить эту кнопку нажмите вот здесь.

Эту кнопку можно устанавливать примерно вот таким способом, сначала вы вставляете вот эту часть кода в папку header.php, обязательно над закрывающимся тегом head;

<!-- Put this script tag to the <head> of your page --><script src="//vk.com/js/api/openapi.js?71"></script><script>// <![CDATA[
VK.init({apiId: Ваш ID, onlyWidgets: true});
// ]]></script><script>// <![CDATA[

Далее вот эту часть кода вы вставляете туда где вы хотите видеть эту кнопку, вот и все, кнопка готова;

 
 
 
 
 
 
 
 
 
 
<div id="vk_like"></div>
 
 
 
 
 
 
 
 
 
<script type="text/javascript">VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20});
// ]]></script>

Установка кнопки Feisbook:

Эту кнопку устанавливать еще проще, что бы ее установить нужно нажать здесь.
И вы увидите примерно вот такое:

Советую не указывать URL вашего сайта, так как указывать надо его, если вы хотите что бы кнопка лайкала только конкретную страницу вашего сайта. Ну а так делайте настройки которые вам подходят и жмите Get Code(получить код).
Код выглядит примерно так:

Верхний код вам нужно вставить в папку (header.php) после открывающегося тега (body), ну а нижний где вы хотите видеть кнопку.

Установка Кнопки Twitter:

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

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

Установка кнопки Googl pluse:

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

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

И все готово, вот как примерно они будут у вас выглядеть:

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

Что бы выстроить все кнопки в ровненький ряд, вы можете вставить примерно вот такой код в css, как он выглядит у меня:

.post-meta-social{
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
display: inline;
}
.post-meta-social #vk_like{
margin-left: 40px;
width:169px!important;
float:left;
}
.post-meta-social .fb-like{
width:149px!important;
float:left;
}
.post-meta-social #tweet_like{
width:119px!important;
float:left;
}
.post-meta-social .g-plusone{
float:left;
}

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

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

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

 С уважением,  Тарас

комментариев 5
  1. 27 августа 2012 в 18:42 Ответить

    отлично всем советую сам проверил работает

  2. 9 сентября 2012 в 08:44 Ответить

    Очень полезно, так как продвижение через сой.сети очень эффективно.

  3. rus
    10 января 2013 в 03:36 Ответить

    Автор, внимательно просмотрите как пишется название соцсетей фейсбук и гугл плюс на англ. языке

  4. Тарас Марко
    10 января 2013 в 10:13 Ответить

    rus, спасибо исправил.

  5. 20 ноября 2015 в 09:19 Ответить

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

Добавить комментарий