Review of domestic constructors and scripts of social media buttons for websites, as well as foreign analogues. Briefly, understandably and clearly.

Social media button designers for website

2. The easy way get links to the site - QIP.RU
Place the button on the site and give visitors the opportunity to add their favorite site materials to bookmarks, blogs and social networks. Three steps: where to mark up the button (site, Blogger or WordPress), style of the buttons (ready-made options) and get the button.

3. Buttons for adding content to social networks - Pluso
Place the buttons and give visitors the opportunity to share the pages they like on social networks, as well as print, send an email and add bookmarks.

4. Service of social activity - UpToLike
Customized social media buttons with the ability to set color, shape, size and special effects. Additional features are the PicShare picture sharing widget, the Quote function and the customized Following function.

5. One button! - for all services of bookmarks and social networks
Select the kind button. Where the button will be installed: website, Blogger or WordPress. Add a button.

Scripts of social media buttons for the site

1. Beautiful social buttons for the site - goodshare.js
Display buttons on almost any device. Clean code. Brief documentation. SEO friendly.

2. Script buttons for social bookmarks and networks - Share42
Select the size and mark the icons of the services you want to use on the site. Select the options you want. See how it will look and / or download a ready-made script. Install the script on your WordPress site, Drupal, etc.

3. Beautiful social media like buttons using jQuery - Social Likes
A script of "like" buttons with counters in the same style for social networks: Facebook, Twitter, VKontakte, Odnoklassniki, My World, Google+ and Pinterest.

Foreign analogues of social media buttons for a website

1. Share Buttons - AddThis
Sharing buttons will help you increase your site's audience by attracting visitors from other resources and social networks, through the distributed content.

4. Social Sharing - Po.st
Get more value from social media sharing. The service will facilitate the process of sharing in social networks for visitors, which will increase the organic traffic of the site.

5. Share Buttons for Any Website - AddToAny
Get social media buttons code for any website. Choose the button type and style, specify email and other options, or choose one of the platforms: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad, or FeedFlare. Get the button code.

at 8:00

Change message

6 comments

Social networks are a great tool for promoting your website on the Internet. Through social networks, you can set up enormous traffic to your resource completely free of charge using a common approach - buttons social networks... Buttons of social networks on the site can significantly improve not only traffic, but also the relationship with search engines, and accordingly again increase visitor traffic.

In this article, I have collected all possible ways connecting social media buttons for the site, if you do not find the one you need, then write in the comments, I will definitely add. What methods will be discussed:

To begin with, a small excursion into the topic of what is and why these same social media buttons are needed for a website.
An excellent video from the Pluso service will help you easily select, configure and embed buttons on absolutely any website:

At the moment, social networks play a huge role in the life of the average person. Almost every second person has at least one social media profile. For this reason, the use of the possibilities of website promotion in social networks is so relevant, it is a huge world of users and buyers.

I think since you are reading this article, then you know the approximate or exact purpose of the share buttons on the site, which means that we can proceed to the main part of the article, namely by adding icons.

Yandex social media buttons

The popular Russian-language search engine provides an excellent opportunity for a social media button on a site from Yandex. Everything is painfully simple here:

Now a few pictures for a better understanding, choose which sites we will use:

We select the appearance, buttons with or without a counter, small or large, and copy the embed code on the site:

Everything is extremely simple, it's even easier than using plugins, well, at least it seems to me so.

I will not review all possible services, their essence is the same:

1. Choose a social network.
2. Change the look.
3. Copy the code.
4. Paste it on your site.

Now the list of services:

• http://share.pluso.ru/
• http://share42.com/ru
• https://uptolike.com/
• http://social-likes.js.org/ru/

The settings are almost identical, you can choose more understandable for you or broader functionality. An example of the first service:

I will not describe for a long time, there is no need, everything is intuitively clear.

How to install social media buttons on a WordPress site

Usually the link buttons are located under the articles or on the side bars. To place social media buttons on your website, we need to install and configure the required plugin, or embed the code directly into the template. Let's look at plugins first, and then manually adding buttons. You can read how to install plugins.

For this case, we have chosen two convenient plugins, which are named as Social Share Buttons and Jetpack.

The first more advanced plugin for adding social media buttons to your WordPress site is Jetpack.

This plugin is created and maintained by WordPress developers, so there is more trust in it than others.

Then we press "Configure" and we are tossed into the social networks settings menu.

In this block, we select the buttons we need for social networks.

To select the ones we need, we just need to drag social media buttons from the top field to the bottom, below we will see the visual display of the icons.

In the next menu, we configure button style and places of their withdrawal on our website.

After we have configured what we need, click "Save changes" and our social media buttons will appear under our entries on the site.

Installing social media buttons on your WordPress site. Social Share Buttons settings.

So, let's not beat around the bush, but go straight to installing social media buttons... Go to the settings menu and add plugins. Through the search, we find the Social Share Buttons for WordPress proposed by us.

By installing and activating plugin for adding social media icons, go to the new menu that appears from the console of our WordPress - Share Buttons.

As you can see, our menu is divided into three submenus, we will consider and analyze each of them separately:

General settings for displaying social media buttons on a WordPress site.

What can we customize here?

• We can upload the logo of our site, which will give our buttons a certain visual link to our resource.
• Call text or something like that can be placed above the buttons.
• Automatic generation of meta data that will be linked to the published article on the social network.
• The positioning of the social media buttons, left-right-center in relation to the article.
• Vertical button positions, bottom or top.

And the checkboxes for choosing where your buttons are displayed, a check mark has been removed from the "Home" position because we do not need buttons under each announcement of articles on home page, you can also exclude articles on which button icons will not be displayed.

Share settings, choose the style of buttons for social networks.

1. We choose the style we like and sort our icons at our discretion.
2. We set up with which social. networks you want to interact with and where to market your product accordingly.
3. Adjusts the indents between icons.

In this cycle of button settings for interacting with social networks on a WordPress site, you need to deal with each button separately, if you are interested and you need to figure it out yourself.

Once all the settings have been made, we will be able to verify their usefulness and functionality already on your WordPress site.

Which plugin to use is up to you, but I recommend Jetpack, it's updated frequently and is faster to use.

Adding each social network button separately

Twitter also provides extensive customization for buttons. Link

If you are afraid that you are being watched on the Internet, turn off your computer.

Every webmaster, sooner or later, thinks about installing social buttons on his site. After all, now without social networks, some people cannot imagine their life, why deprive them of their opportunities in the sharing of your articles? But over time, many social button services lose their minds and do what they want with their codes, stuffing everything that is not needed there. It is for this paranoid idea in this article that you will find the codes of the cleanest social media sharing buttons for your website.

It's no secret that almost all social button services drain information about your users wherever they need it. Oh my God! Can not be! I just found out about it! - Congratulations! They also need to somehow use you, for their work and for their efforts. They did good services, with great functionality, convenience and "quality". You just have to choose what you need and put the code where you need it. And that's all. And what benefit to them doing such maneuvers on the Internet for free? Correctly. No. So from time to time, each such office and fired on the data drain into some DMP.

I will not describe each of these services, they all have good functionality, some unique features, but I have no desire to present them separately. I made a small list below.

List of the most popular social button services for the site

• share.pluso.ru
• uptolike.ru
• tech.yandex.ru/share
• share42.com
• sharethis.com
• pip.qip.ru
• www.addtoany.com
• www.po.st
• www.addthis.com
• sharebuttons.com

If you do not have enough time, or you are too lazy to do more than a couple of movements of the hands and phalanges of fingers, then you can safely use these services. They are great for websites as well as visitors. But no one guarantees 100% security of user data, 100% of their DNS and loading of your sites. Those. if there is a failure on the servers of social buttons, then your sites will load slower than usual. Yes, this is rare, but it happens. You can, of course, load these scripts asynchronously, optimize their work, but this is more than a couple of movements that I wrote about for the lazy.

Of course, there are social media codes on the Internet that are placed inside your site and do not leak information anywhere, but many of them contain external links to the same social networks. Webmasters do not like external links, and therefore, for the most paranoid webmasters, I have collected ready-made codes based on the goodshare.ru script, for which I actually thank them.

An example of installing this code is not for those who do not know the basics of HTML or CSS, but if you have hands and a little time, you will succeed if you follow the instructions strictly. And so we went:

They look like this:

Six social networks are configured by standard: Facebook, VKontakte, Odnoklassniki, Moi Mir, Google plus, Twitter. There are more than 30 of them in the script settings, but this is all set separately at will. The pros of these buttons, as stated by the authors, with which I completely agree:

1. Great display on any device (Yes, they are responsive to any screen size)
2. Clean code - fast and secure site (only script, CSS and Font are loaded, which are only on your server)
3. All share-technologies of mobile messengers in one script (Telegram`s all sorts,)
4. SEO friendly - no links
5. Does not contain pictures

What does the script itself do, and why was it necessary to do this script? All APIs of all social networks are written in the script of these buttons, and the script makes any place on the site an active sharing block.

For example, you can put it on empty DIV blocks, or Span, or pictures, or empty links, and almost any element of the site can be turned into these buttons. In my example, I used a script for empty Divs.

As for the pictures: they are not here. The icons you see are taken from the font, they are just symbols and nothing more.

You can download the archive of buttons by.

Installing these buttons is very easy. There are only four files in the archive: Font, CSS, JS, and TXT.

one). You need to upload the font to any folder on your server, you can drop it in the same place where your JS or CSS is located.

2). Then upload the JS to your server, and display it on your site using code anywhere, but I recommend at the very bottom of the page:

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

ВАЖНО : (для тех, кто убрал часть код Jquery) скрипт кнопок должен загружаться после скрипта Jquery.

3). После установки JS и шрифта, вам следует добавить CSS себе на сайт. Просто скопируйте все содержимое файла soc.css в один из ваших подключаемых CSS на сайте.

ВАЖНО : В 82 строке файла soc.css поменяйте URL на свое местоположение Шрифта!

4). После всего этого, скопируйте HTML код из файла HTML.TXT к себе на сайт, где вы хотите видеть эти замечательные кнопки.

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

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

Спасибо за внимание, если будут вопросы по установке, пиши комментарии.

С вами был, ленивый Staurus.

Не клюет? И средств на прикормку посетителей уже много потратили. А кнопки социальных сетей для сайта установили? Понятно! Все симптомы заболевания на лицо – асоциальность сайта. Будем лечить.

Зачем сайту нужны кнопки социальных сетей?

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

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

Что представляет собой обычная социальная кнопка?

Для примера возьмем скрипт социальной кнопки ВКонтакте. Ее код:

Эту часть кода нужно разместить в так называемой «шапке » страницы сайта. В этом коде указан адрес скрипта, который должен выполняться при нажатии на социальную кнопку. Вот вторая часть кода, которая отвечает за отображение картинки кнопки:

Второй кусок кода нужно поместить в той части страницы, где будет отображаться кнопка:

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

Варианты легкого размещения

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

Место расположения панели социальных кнопок можно выбрать на нескольких шаблонах. В бесплатной версии аккаунта доступна выдвигаемая боковая панель. Также есть бесплатная версия плагина для WordPress . После прохождения регистрации на сайте сервиса предоставляется доступ к статистике переходов по социальным кнопкам.

• Share42 – понятный и простой интерфейс с возможностью «тонкой» настройки внешнего вида панели социальных кнопок. При этом процесс настройки сопровождается пошаговыми инструкциями с описанием действий, которые необходимо осуществить. Поэтому сервис подходит даже для не опытных вебмастеров:

Еще одним плюсом данного сервиса является генерация скрипта панели социальных кнопок с поддержкой нескольких популярных CMS .

Социальные кнопки и WordPress

Для популярных CMS создано множество плагинов групповой установки социальных кнопок. Рассмотрим пример установки плагина Social Share Buttons for WordPress .

Положительными сторонами этого расширения является полностью русскоязычный интерфейс, простота настройки и «заточенность » под популярные социальные сети Рунета:

Порядок действий при установке плагина социальных кнопок для WordPress .

1) Заходим в административную панель сайта. Слева выбираем вкладку «Плагины », «Добавить новый ».
2) На странице «Установить плагины » в поисковое поле вводим название расширения и нажимаем на кнопку «Поиск плагинов »:

3) В результатах поиска находим имя нужного расширения. После чего нажимаем на ссылку «Установить»:

4) После загрузки архива и установки активируем плагин нажатием соответствующей ссылки:

5) После его активации в левой консоли инструментов появится новый раздел «Share Buttons »:

Настройки плагина состоят из нескольких пунктов:

Еще несколько проверенных плагинов для WordPress :

• Fixed Social buttons – этот плагин позволяет добавить на сайт плавающую социальную панель, которую можно «прилепить» сверху, снизу или сбоку;
• Html Social share buttons – данный плагин включает в себя социальные кнопки, созданные исключительно с помощью css и html.

Социальные кнопки и Joomla

Под этот движок также создано много плагинов для работы с социальными кнопками. Рассмотрим процесс установки расширения на примере SocButtons . Особенности этого плагина:

• Поддержка всех наиболее популярных версий движка;
• Простота настройки;
• Характеристики внешнего вида задаются для каждой кнопки отдельно;
• Малый вес инсталляционного пакета.

Порядок действий:

1) Заходим в административную часть сайта на Joomla и выбираем значок «Менеджер расширений ».
2) Здесь определяемся с источником для загрузки расширения:

3) После инсталляции расширения переходим в «Менеджер плагинов » и активируем только что установленное расширение. Для этого нужно нажать на зеленый значок вверху страницы:

4) Для настройки нажимаем на имя расширения в списке. В данном плагине настройки отображения задаются для каждой социальной кнопки отдельно:

Еще несколько проверенных расширений для Joomla:

• Social Bookmarking – данный плагин существует сразу в нескольких версиях. Каждая позволяет расположить социальную панель в определенном положении (горизонтально, вертикально, или вообще сделать ее плавающей );
• JL Like – этот плагин не производит дополнительную загрузку внешних скриптов, позволяет вести статистику голосов из социальных сетей.

Скрипт или плагин?

Установка плагина является самым простым и быстрым вариантом. Чаще всего после его инсталляции весь сайт работает исправно. Но все может разрушиться сразу после обновления версии движка на более новую.

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

В новой версии движка на php структура методов и функций меняется очень редко. Поэтому скрипт легко «переносит» процесс такого обновления.

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

В этом небольшом уроке мы создадим простые и кастомные кнопки для шаринга в социальные сети.

Предлагаемый мной вариант лишен этих недостатков — все файлы будут на вашем сервере (то есть упадёт вместе с сайтом), ничего не подгружая извне, и к тому же очень хорошо кастомизируется. Кроме того, у нас будет небольшой плюс — обыкновенно в состав социальных кнопок входит большая тройка (ВКонтакте, Facebook и Twitter). В нашем случае в обойме присутствует Mail.Ru, Одноклассники и Telegram, чтобы никто не ушёл с нашего сайта нерасшаренным.

Единственный существенный минус: количество нажатий на кнопки считаться не будет . Мы уходим за рамки простоты и гибкости.

Впервые вопрос о собственных кнопках соц.сетей меня посетил в тот момент, когда для страницы на сайте социальный шаринг был очень нужен, но все ресурсы не подходили по дизайну. И не меня одного — сама идея кастомных кнопок далеко не новая. Самое интересное решение, на мой взгляд, было мной обнаружено на Хабре и после непродолжительных поисков привела на GitHub . Я взял за основу логику работы таких кнопок шаринга и творчески их доработал.

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

Но у этого скрипта есть один недостаток — скрипт, который обрабатывал поведение браузера при нажатии на одну из кнопок. Привожу его часть, в которой вы сами легко увидите две проблемы:

Vkontakte: function(purl, ptitle, pimg, text) { url = "http://vkontakte.ru/share.php?"; url += "url=" + encodeURIComponent(purl); url += "&title=" + encodeURIComponent(ptitle); url += "&description=" + encodeURIComponent(text); url += "&image=" + encodeURIComponent(pimg); url += "&noparse=true"; Share.popup(url); },

Первая проблема небольшая и многие могут сказать мне: “Эй, чувак написал это в 2012 году! Просто поменяй строчку и всё”. И я с вами соглашусь, что можно просто поменять vkontakte.ru на vk.com и просто закрыть вопрос.

Вторая — под каждый сервис нужно писать новый блок. Который тоже сделать не очень-то проблемно, просто скопипастив и убрав/добавив нужные параметры.

Но что делает этот скрипт в итоге? Он просто создаёт всплывающее окно, в которое передаёт перечисленные параметры. Вот эти строчки:

Popup: function(url) { window.open(url,"","toolbar=0,status=0,width=626,height=436"); }

Вот именно работу этого скрипта я немного видоизменил. Но об этом чуть ниже. Рассмотрим сами кнопки и принцип их работы.

Вначале нам необходимо иметь несколько переменных для кнопок шаринга:

• $Title — Заголовок (название) страницы
• $Description — Описание страницы
• $ImageUrl — путь к изображению страницы
• $Link — прямая ссылка на страницу

Я назвал их условно, чтобы было наглядно понятно, сколько их необходимо и что они из себя представляют. Каким способом они будут браться на вашем сайте — вручную или автоматически — зависит только от приложения, на котором это будет исполнено. Например, в CMS WordPress это будет выглядеть так:

• $Title — это
• $Description —
• $ImageUrl —
• $Link —

Теперь в нужном нам месте вставляем следующий код, где на место переменных подставляем нужные значения (если необходимо):

ВКонтакте Facebook Mail.Ru Одноклассники Twitter Telegram

Готово. Код уже рабочий и его можно использовать — при нажатии на ссылку открывается новая вкладка социальной сети. А теперь давайте сделаем так, чтобы он не плодил вкладок, а открывал небольшое окошко поверх браузера. Чуть ниже добавим следующего кода:

What happens - the script monitors all clicks on with rel \u003d "nofollow" attribute. You can put any, but this one also tells the robots that you don't need to follow these links - we do the combo in one move. When pressed, it opens a window with a size of 626 by 436 pixels (parameters width \u003d 626, height \u003d 436), which can be changed to your taste.

That's all! You can see the result of the work at the end of this article.

Of course, this script has a significant drawback - it cannot count the number of clicks. But as a lightweight, fast and easily customizable solution, it is simply irreplaceable. Into tag you can stuff anything - text, pictures, svg graphics - nothing else limits you (except for imagination, of course).