Сайт о телевидении

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

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

• Вконтакте
• Фейсбук
• Одноклассники
• Гугл «+1»
• Твиттер
• Мой Мир

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

1.1. Вконтакте 1.1.1 Кнопка «сохранить»

Кнопка достаточно гибкая, надпись на ней можно менять на любую желаемую (по умолчанию «сохранить»).

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

Здесь можно выбирать один из 5 стилей : кнопка, кнопка без счетчика, ссылка, ссылка без иконки, иконка.

Поле «текст » позволяет изменять стандартную надпись «сохранить» на свою.

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

Код для вставки состоит из двух частей: первая должна располагаться в любом месте между тегами и , вторая – в том месте, где должна отображаться кнопка. Об установке кнопки на сайт читайте в пункте .

1.1.2 Кнопка «мне нравится»

Второй вариант кнопки – виджет «Мне нравится ». Его будет проще установить на сайт, т.к. в конце вы получите всего одну часть кода, которую нужно будет разместить в нужном месте сайта.

Для настройки кнопки перейдите по этой ссылке . Здесь также необходимо заполнить ряд параметров.

Название сайта – здесь лучше указать краткое и настоящее название вашего сайта.

Адрес сайта – укажите адрес главной страницы вашего сайта.

Основной домен сайта – укажите главное зеркало сайта (его можно найти в в качестве параметра оператора «Host»), если затрудняетесь это сделать – то оставьте предлагаемое ВКОНТАКТЕ.

Варианты кнопки – это различные стили кнопки, они влияют на ее внешний вид.

Высота кнопки – геометрические размеры «Мне нравится».

Название кнопки – доступно два варианта (мне нравится, это интересно).

Код для вставки – тот код, который нужен для отображения кнопки социальной сети Вконтакте.

1.2 Фейсбук

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

URL to Like – url-адрес страницы для кнопки (если поле не заполнено, то будет браться адрес страницы, на которой расположена кнопка).

Send Button – наличие галочки включает новую возможность – отправлять ссылку в Фейсбук (отобразится дополнительная кнопка – «отправить»). При включении будет одновременно отображаться две кнопки.

Layout Style – стиль кнопки, влияет на ее внешний вид (стандартным считается button_ count ).

Width – ширина кнопки в пикселях.

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

Font – тип шрифта кнопки.

Color Scheme – фон пространства рядом с кнопкой (белый и черный).

Verb to display – название кнопки (нравится, я рекомендую).

Get Code – кнопка, формирующая код скрипта.

1.3 Одноклассники и Мой мир

Данные социальные сеть приобрели широкую популярность в русскоязычном интернете, там обитает огромное число людей, поэтому не стоит пренебрегать установкой кнопки «Класс» от сервиса «Одноклассники» и «Нравится» от сайта «Мой мир».

Для настройки кнопок нужно перейти на . Можно добавлять кнопки по отдельности, настраивая каждую по-своему, а можно редактировать обе кнопки одновременно.

Размер по высоте – геометрический размер кнопок.

Вид – внешний вид рамки кнопок.

– выбор кнопок (нравится, класс)

Счетчик – включение и выключения счетчика нажатий на кнопки (справа, сверху – расположение счетчика).

Текст на кнопках – выбор одного из трех названий, доступных для кнопок.

Код для вставки – код скрипта, который нужно будет устанавливать на сайт.

1.4 Гугл «+ 1»

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

Все подробности об этом, а также установка и настройка кнопки находятся .

1.5 Твиттер

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

Сначала нужно выбрать нужную кнопку (нас интересует первый вариант – кнопка «отправить ссылку»).

После этого на странице появится форма с несколькими полями, которые нужно заполнить.

Отправить ссылку – выбор страницы, на которой расположена кнопка, или любой другой.

Текст – выбор текста, который будет появляться рядом с кнопкой (НЕ НА САМОЙ КНОПКЕ).

Показывать счетчик – включить или выключить отсчет количества нажатий на кнопку.

С помощью – выбор способа добавления сообщения ссылки в Твиттер (практически ни на что не влияет).

Отметить – выбор метки, которая будет публиковаться в Твиттере (практически ни на что не влияет).

Большая кнопка – увеличение геометрического размера кнопки.

Отказаться от адаптации Твиттера – отказ от стилей Твиттера (лучше оставить поле без галочки).

Язык – выбор языка кнопки.

Справа будет сформирован код, который нужно добавить на сайт.

1.6 Я.ру

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

Размер – маленький или большой размер кнопки.

Стиль – выбор между кнопкой или иконкой.

Наличие счетчика – включение или выключение счетчика нажатий на кнопку.

Внешний вид кнопки – пример того, как будет выглядеть кнопка.

Заголовок – выбор заголовка для страницы (произвольный или заголовок текущей страницы).

Код для вставки – нужный код, который добавляется на сайт.

2. Готовые кнопки для сайта

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

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

Набор сервисов – выбор кнопок социальных сетей для сайта (те, что с галочкой – будут отображаться на сайте).

Код – нужный скрипт, который необходимо добавить на сайт.

2.2 Кнопки «PLUSO»

В последнее время широкую популярность приобрел конструктор кнопок социальных сетей – PLUSO. Перейти на сайт можно по этой ссылке .

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

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

Затем необходимо настроить ряд параметров, выбрав

• расположение блока (вертикальный, горизонтальный);
• цвет кнопок (яркие, темные);
• величину блока (крупный, маленький);
• счетчик (наличие или отсутствие);
• фон (бесцветный или цветной);

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

S hare42

Еще один сервис, позволяющий сконструировать кнопки для своего сайта – Share42.com/ru .

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

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

Тип панели с иконками – отображение блока кнопок (очень интересен вариант «вертикальная плавающая»).

Ограничить видимое кол-во иконок – выбор числа отображаемых кнопок (другие будут скрыты за ссылкой).

Кодировка сайта – выбор кодировки вашего сайта.

Добавить иконку сайта Share42.com – возможно, следует убрать галочку.

Показывать счетчики – включение счетчика нажатий по кнопкам (только при работающем jQuery).

Установка данного скрипта довольно сложная, но она пошагово описывается на самом сайте Share42.

3. Как устанавливать кнопки на сайт

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

Первую часть кода нужно добавить между тегами и . Для этого зайдите в админ-панель WordPress и перейдите к редактору шаблона.

В редакторе шаблона нужно найти файл «Заголовок» (header. php) , если такого нет, тогда – «Основной шаблон» (index.php) . Теперь необходимо найти тег или . Если в указанных файлах таких тегов нет (все темы разные, такое вполне может быть), тогда вам придется открывать для редактирования все файлы и искать в каждом из них тег . Для поиска можно использовать сочетание клавиш «Ctrl+F».

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

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

Чаще всего кнопки добавляются перед статьей или в ее конце. Проще, конечно, второй вариант. Его мы и рассмотрим.

Вам нужно найти то место, где заканчивается статья (основная текстовая часть страницы). Для этого нужно редактировать файл «Одна запись» (single. php) .

Теперь нужно найти тот оператор, который отвечает за вывод основного содержимого статьи. В моем случае это «the_content», сразу после него и размещается код кнопок.

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

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

Социальные сигналы так же учитываются и поисковыми системами при ранжировании вашего сайта. Большое количество расшариваний в качественные аккаунты в Твиттере, Google+, Фейсбуке (возможно, что Вконтакте и другие сети тоже учитываются) может позволить вам подняться на определенное число шажков повыше и, возможно, войти в Топ и удержаться там, если поведенческие факторы не подкачают.

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

Также имеется возможность отображения на кнопках числа расшариваний в отдельно взятую социальную сеть. Причем учитываются все посты, а не только те, что были сделаны с помощью этого блока (подгружаются данные по API). Поддерживаются правда не все социальные сети (только facebook, Google+, Мой Мир, Одноклассники.ru, ВКонтакте), но большинство основных. Печально, что недавно из этого списка был исключен Твиттер, т.к. он перестал предоставлять эти данные по API.

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

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

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

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

Если захотите добавить счетчики к кнопкам в этом блоке (с выпадающим меню), то просто на сайте вставьте к его код (между тегами Div) еще один атрибут: data-counter="« и все. Как я говорил, проще некуда. Счетчики можно будет добавить и к маленьким кнопкам, которые рассмотрены чуть ниже:

Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"

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

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

Как вставить социальные кнопки от Яндекса на сайт

Поэтому код вызова скрипта я вставляю вместе с блокм Div в том месте, где необходимо отобразить кнопки соцсетей. Ну, а чтобы его загрузка не повлияла на скорость загрузки основной страницы, я по совету, данному в документации Яндекса , добавил в него атрибут async="async" инициируя тем самым его асинхронную загрузку скрипта :

Проблема может возникнуть с тем, чтобы найти среди множества файлов движка своего сайта тот, который отвечает за формирование самой нижней части Html кода с закрывающим тегом /BODY или же того, который формирует Head. А так же найти место в файлах темы оформления, где нужно вставить фрагмент кода в тегах Div (для размещения самих кнопок).

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

Если вы работаете с WordPress , то для вставки кода вызова скрипта вам потребуется открыть на редактирование файл footer.php (там найдете закрывающий тег Body или header.php (там найдете теги Head) из папки :

/wp-content/themes/название_папки_с_используемой_темой_оформления/footer.php

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

Кстати, еще раз оговорюсь, если вы захотите удалить какую-либо кнопку из этого блока, то не обязательно опять идти в конструктор на сайте Яндекса. Можно будет просто убрать ее запись из этого списка (вместе с запятой идущей после нее, например, «vkontakte,»). Ну, вы поняли...

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

Li.ya-share2__item {background:none!important;padding:0 7px 0 7px!important;}

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

Li.ya-share2__item {padding:0 3px 0 3px!important;}

В общем, где-то так в том аспекте, что касается моего блога на WordPress. В Joomla для вставки этого блока, наверное, проще всего будет воспользоваться модулем Произвольного Html кода, расположив его в позиции шаблона где-нибудь сразу под текстом статьи.

Официальные кнопки социальных сетей

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

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

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

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

Получится примерно так:

Получится примерно так:

Ну и, конечно же, не могу не упомянуть про официальную кнопку Twitter , которая появилась относительно недавно. Ее конструктор расположен . Естественно, что в ней предусмотрена возможность подсчета числа ретвитов и у вас будет возможность задать ее внешний вид:

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

Другие варианты получения кнопок соцсетей для сайта

Как я уже говорил, всевозможных онлайн-сервисов, где можно бесплатно взять скрипт кнопок социальных сетей и поставить к себе на сайт много. Все они преследуют разные цели: «от души» (как в случае сервиса Димокса), для сбора данных нужных для работы других сервисов (как в случае с АпТуЛайк) или для наживы (вирусы и прочие незаконные махинации с имеющимся у вас на сайте трафиком). Есть и просто платные решения, например, как упомянутый ниже плагин.

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

В общем, сами смотрите, сравнивайте и выбирайте.

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на ");">

Вам может быть интересно

Создаем для блога на WordPress кнопки добавления в социальные сети и закладки (без плагинов и скриптов) Лайкли - автономные социальные кнопки для сайта
Кнопки для мобильных сайтов от Uptolike + возможность делиться ссылками в мессенджерах UpToLike - конструктор социальных кнопок для вашего сайта с расширенным функционалом

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

Преимущества и недостатки

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

Недостатки

Может снизиться скорость загрузки страниц.

При узкоспециализированной направленности интернет-проекта, можно не получить желаемого эффекта.

Обзор сервисов кнопок социальных сетей

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

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

Сервис предлагает более трехсот вариантов разных кнопок! Можно очень просто выбрать наиболее понравившиеся.

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

Это, наверное, один из самых интересных онлайн сервисов, при помощи которого имеется возможность сгенерировать кнопку по нескольким параметрам: размеру и внешнему виду. Кроме этого можно выбрать, как будет располагаться панель с кнопками (горизонтально или вертикально). Можно также указать кодировку. После выбора всех необходимых настроек, сгенерированный скрипт нужно скачать и поместить на свой интернет-проект в необходимое место. В основном, сразу после статьи.

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

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

Данный сервис предлагает пользователям разместить на своем сайте очень красивые и стильные кнопочки социальных сетей. Созданная сервисом форма использует css и javascript. Сгенерированная форма будет прекрасно вписываться в дизайн любого интернет-проекта. Кнопки «лайков» выполнены с использованием современной технологии jquery. Подключение очень простое и не вызовет трудностей даже у начинающих. Загрузка происходит очень быстро.

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

Кроме этого сервис рассказывает, как нужно добавить созданный код в шаблоны .

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

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

P.S. Спасибо за внимание. А какой сервис предпочитаете вы? Жду ваши комментарии. :)

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

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

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

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

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

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

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

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

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

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

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

• AddThis – данный сервис обладает англоязычным интерфейсом. Но в тоже время позволяет добавить кнопку любой социальной сети мира:

Место расположения панели социальных кнопок можно выбрать на нескольких шаблонах. В бесплатной версии аккаунта доступна выдвигаемая боковая панель. Также есть бесплатная версия плагина для 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 . Он поддерживает создание социальных кнопок для популярных движков. Порядок действий.

В последнее время каждый второй (если не первый) заказчик в требованиях по разработке сайта просит непременно связать его с социальными сетями. «Социальные» кнопки на сайте — средство номер 1 для привлечения целевой аудитории, распространения контента и пиара в целом. Причем совершенно бесплатное!

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

Каковы возможности и функции?

Если ваш сайт ориентирован на людей которые общаются популярных соц. сетях, например, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest и прочее, и вы хотите охватить их все, то чтобы не устанавливать кнопки каждой из них по отдельности, учитывая то, что они могут отличаться по размерам и дизайну, советуем воспользоваться сервисами-агрегаторами. Это простые и удобные инструменты, которые позволят посетителям сайта быстро делиться информацией со своими друзьями вне зависимости какой социальной сетью они пользуются. Ниже мы разберем наиболее популярные сервисы.

Кнопки социальных сетей Share Pluso