Как сделать кнопки «Подружиться в социальных сетях» |

Привет читателям Молодого блога. Сейчас уже практически каждый сайт не может обойтись без социальных кнопок и виджетов. На любом блоге вы с легкостью найдете массу социальных кнопок, будь то хоте «Мне нравиться» или же «Твитнуть». Сегодня мы поговорим, как установить кнопки для добавления в друзья в социальных сетях.

Как вариант для этих целей можно воспользоваться плагином Social Media Widget, но мне больше нравиться работать с чистым HTML-кодом.

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

1. Иконки

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

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

После того как вы определились с набором иконок и их размерами, заливаем картинки на хостинг.

Лучше создать для этого отдельную папку, например «social buttons».

2. HTML-код

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

<br />
&lt;a href=&quot;http://vkontakte.ru/xxxxxx&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;<br />
&lt;img title=&quot;Подружиться в ВКонтакте&quot; src=&quot;/image/vk.png&quot; alt=&quot;Подружиться в ВКонтакте&quot; width=&quot;32&quot; height=&quot;32&quot; /&gt;&lt;/a&gt;<br />
&lt;a href=&quot;http://www.facebook.com/xxxxxx&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;<br />
&lt;img title=&quot;Подружиться в Facebook&quot; src=&quot;/image/facebook.png&quot; alt=&quot;Подружиться в Facebook&quot; width=&quot;32&quot; height=&quot;32&quot; /&gt;&lt;/a&gt;<br />
&lt;a href=&quot;https://twitter.com/xxxxxx&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;<br />
&lt;img title=&quot;Подружиться в Twitter&quot; src=&quot;/image/twitter.png&quot; alt=&quot;Подружиться в Twitter&quot; width=&quot;32&quot; height=&quot;32&quot; /&gt;&lt;/a&gt;<br />
&lt;a href=&quot;https://plus.google.com/xxxxxx&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;<br />
&lt;img title=&quot;Подружиться в Google+&quot; src=&quot;/image/g+.png&quot; alt=&quot;Подружиться в Google+&quot; width=&quot;32&quot; height=&quot;32&quot; /&gt;&lt;/a&gt;<br />
&lt;a href=&quot;http://www.odnoklassniki.ru/xxxxxx&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;<br />
&lt;img title=&quot;Подружиться в Одноклассниках&quot; src=&quot;/image/odnoklassniki.png&quot; alt=&quot;Подружиться в Одноклассниках&quot; width=&quot;32&quot; height=&quot;32&quot; /&gt;&lt;/a&gt;<br />

rel=»nofollow» поможет избежать утечки ссылочного веса, ну а target=»_blank» оставит посетителя на сайте.

3. Установка

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

Активируем виджет “Текст” в сайдбар и вставляем туда заготовленный код. Нажимаем кнопку “Сохранить” и смотрим результат.

В результате должно получиться что то подобное:

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

________________________

Недавно нашел интересный SEO блог, заглядывайте.