Добавляем кнопки известных социальных сетей для сайта или блога. Как добавить на сайт кнопки социальных сетей


Как добавить кнопки социальных сетей на сайт: плагин GetSocial

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

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

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

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

Если вы все-таки предпочитаете «классический» вид социальных кнопок, могу вам порекомендовать мою статью, где я подробно описала, как можно установить социальные кнопки от Яндекса.

Плагин GetSocial кнопки социальных сетей

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

Я легко «подружилась» с одним из таких плагинов под названием GetSocial. Этот плагин предназначен для движка wordpress, условно бесплатный. Если вы хотите воспользоваться его расширенным функционалом, то вам придется вносить ежемесячную  плату.

Тем не менее, бесплатных функций плагина GetSocial лично мне вполне хватило.

Как установить плагин GetSocial

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

В поиск плагинов вбить GetSocial, выбрать его и нажать Установить, а затем Активировать. Все, плагин моментально устанавливается на ваш сайт.

plagin-getsocial

Далее в меню консоли у вас появляется вкладка GetSocial. Вам сюда! Немного настроек, и все будет готово.

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

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

Все, что помечено значком Starter, требует дополнительной оплаты. Все остальное – предоставляется бесплатно!

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

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

Вертикальные кнопки от GetSocial

Для того, чтобы добавить вертикальные кнопки социальных сетей на сайт вам необходимо в настройках плагина выбрать вкладку Floating Sharing Bar и нажать кнопочку Install App.

vertikalnyie-knopki-sotsialnyih-setey

Следующее окно предлагает выставить нужные вам настройки:

  • Выбрать кнопки соцсетей, которые вы хотите видеть у себя на сайте

kak-dobavit-knopki-sotsialnyih-setey-na-sayt

  • Размер кнопок

knopki-sotsialnyih-setey-na-sayt

  • Справа, слева, в верхнем углу, в нижнем углу сайта

plagin-knopki-sotsialnyih-setey

  • Со счетчиком или без него.

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

После того, как вас удовлетворил результат, вы можете нажать на кнопочку Save and Activate.

sotsialnyie-knopki-kak-ustanovit

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

Горизонтальные кнопки от GetSocial

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

Для этого выбираем другую вкладочку под названием Horizontal Share Bar.

gorizontalnyie-knopki-sotsialnyih-setey

В настройках данной вкладки вы так же можете выбрать:

  • Кнопки соцсетей
  • Их размеры
  • Со счетчиком или без счетчика
  • Позиции размещения: слева, по центру, справа

sotsknopki-ot-yandeks

  • Над статьей, под статьей, сверху и снизу статьи.

getsocial

Сохраните изменения.

Если вы все сделали правильно, то кнопки соцсетей отобразятся в вашей статье.

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

Для лучшего понимания предлагаю вам подробный видеоурок:

Денежные ручейки

denezhnye-ruchejki.ru

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

21.07.2013 | Автор Алексей

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

Установить кнопки социальных сетей можно 3 способами:

1. Используя плагины. Плюсы — удобство настроек, минусы — большая нагрузка на сайт. 2. С помощью конструкторов различных сервисов. Преимущества и недостатки те же, что и у первого способа, гибкие настройки и увеличение времени загрузки сайта. 3. Самостоятельно добавив код в шаблон WordPress. Самый легкий вариант. Кнопки практически не нагружают сайт, но для их установки потребуются хотя бы начальные знания в html.

О том, как установить кнопки от различных он-лайн сервисов описано в статье Как установить кнопки социальных сетей на сайт.

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

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

Установив кнопки популярного сервиса share.pluso.ru мне стало интересно как сильно они нагружают сайт и я проверил скорость его загрузки по сервису WebPageTest.org.

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

webpagetest_alexisakov_ru

 

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

Достоинство этого способа в том, что он практически не влияет на время загрузки страницы.

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

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

 Варианты размещения кнопок социальных сетей на сайте

Кнопки в конце статьи

Чтобы кнопки появились под каждой статьей вставим небольшой код в файл single.php находящийся в корневой директории вашей темы по адресу:

http://ваш_супер_сайт/wp-content/themes/тема_wordpress

после инструкции:

1 <? php the_content() ?>

добавим такой код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div> <p>Поделитесь статьей </br> <a title="Добавить в Twitter" href="http://twitter.com/intent/tweet?text=RT @AlexeyVLFF <?php the_title(); ?>: <?php the_permalink(); ?>" target="_blank" rel="nofollow"></a> <a title="Поделиться в Facebook" href="http://facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"></a> <a title="Поделиться в Google +" href="http://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"></a> <a title="Поделиться ВКонтакте" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow"></a> <a title="Опубликовать в LiveJournal" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" target="_blank" rel="nofollow"></a> </p> </div>   <div> <p>Приглашаю присоединиться ко мне в социальных сетях</br> <a title="Twitter" href="http://twitter.com/AlexeyVLFF" target="_blank" rel="nofollow"></a> <a title="Facebook" href="http://www.facebook.com/AlexeyI78" target="_blank" rel="nofollow"></a> <a title="ВКонтакте" href="http://vk.com/ivalexey" target="_blank" rel="nofollow"></a> <a title="Одноклассники" href="#" target="_blank" rel="nofollow"></a> <a title="Мой мир" href="#" target="_blank" rel="nofollow"></a> <a title="Google +" href="#" target="_blank" rel="nofollow"></a> <a title="Live Journal" href="#" target="_blank" rel="nofollow"></a> </p> </div>

Это можно сделать через файловый браузер в личном кабинете хостинга либо с помощью FTP клиента. Способ работы с файлами на сайте посредством FTP описан в статье Как снять ограничение WordPress на загрузку файлов в 2МБ.

Не забудьте вместо моих ссылок и заглушек href=”#” поставить настоящие ссылки на ваши страницы в соцсетях.

Далее в файл style.css, который находится в той же директории, в самый конец добавим строки:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 /*SOCIAL ICONS*/ .social_vertical {position:fixed; margin-top:210px; margin-left: -6px; display:block; z-index:9999999;} .social_vertical a{text-decoration:none; color:#FFF; width:36px; height:36px; text-indent:-9999px; } .social_vertical ul{ margin:0; padding:0; background-color: #dfdfdf; width:38px;} .social_vertical ul li{ list-style-type:none;} .social_vertical ul li a { text-decoration:none; color:#FFF; width: 36px; height:36px; display:block; text-indent:-9999px;}

alexisakov.ru

Как добавить кнопки социальных сетей на сайт. Что это такое и зачем они нужны

31.12.2016

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

 

 

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

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

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

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

К оглавлению

 

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

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

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

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

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

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

К оглавлению

 

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

Справой стороны находится готовый код кнопок для вставки на ваш сайт. Чуть выше кода находится пример внешнего вида блока «Поделиться». На этой странице можно настроить внешний вид кнопок блока.

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

Как видите, не все социальные сети передают счетчик расшариваний в API Яндекс. В левой стороне представлен небольшой список соцсетей, работающий с блоком Яндекса.

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

Количество отображаемых иконок можно настроить в коде блока, а именно здесь:

Цифра «3» отвечает за количество иконок, которое будет отображаться в блоке Яндекс, остальные иконки будут скрыты в POP-UP меню.

Вкладка «Маленького размера» отвечает за размер иконок. В частности, иконки в блоке «Поделиться» будут маленького размера.

Настроив внешний вид блока нужно просто скопировать готовый код и добавить его в код вашей страницы в нужном вам месте. Причем не имеет значение, где и какую часть кода нужно вставлять. Первые две строчки кода для вставки кнопок отвечают за подключение скрипта кнопок с сервера Яндекс. Поэтому вы можете их размещать вначале HTML теста страницы между тэгами <head>…</head>. Третья строчка кода – это непосредственно отображение блока кнопок. Но, если вы не хотите заморачиваться с поиском тэгов <head>, то просто скопируйте код кнопок и добавьте его целиком в нужном месте на вашем сайте, и он будет работать.

Таким образом, настраивается внешний вид и содержание блока кнопок социальных сетей от Яндекса «Поделиться». Но это только общие настройки. Для более тонкой настройки блока стоит почитать документацию по API Яндекса (https://tech.yandex.ru/share/doc/dg/add-docpage/), а именно, про используемые в блоке атрибуты и их параметры. Так вы сможете более точно настроить внешний вид и функционал блока «Поделиться».

К оглавлению

 

Рассмотрев универсальный блок кнопок социалок от Яндекс, давайте рассмотрим, а что нам предлагают сами социальные сети установить на сайте в качестве своих кнопок. Хочется сразу заметить, что функционал официальных кнопок немного выше. Например, Вконтакте предлагает не просто кнопку разного размера и со счетчиком, но и без счетчика, ссылку, ссылку без иконки соцсети, просто иконку и так далее. То есть, визуализация таких кнопок будет выше. Давайте разберем, как добавить официальные кнопки социальных сетей на свой сайт.

 

Социальная сеть Вконтакте

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

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

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

  1. Опция «Стиль». Предлагает выбрать стилистику вашей кнопки. А именно, как кнопка должна выглядеть (со счетчиком или без него, в виде ссылки или виде иконки и т.д.)
  2. В поле «Текст» пишем текст, который будет отображаться в самой кнопке
  3. «Ссылка» - отвечает за то, какую страницу будет расшаривать кнопка. То есть, нажав на кнопку, будет расшариваться именно страница с кнопкой или другая страница, где не установлена эта кнопка. Если другая страница, то нужно указать URL этой странице в поле «Ссылка»
  4. Ниже представлен готовый код для добавления кнопки социальной сети Вконтакте на ваш сайт
  5. Ниже кода показан пример вашей кнопки. Благодаря нему вы визуально видите, как меняется ваша кнопка при изменении тех или иных настроек

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

Код кнопки состоит из двух частей. Поэтому его нужно вставлять по отдельности.

Первую часть кода нужно вставлять между тэгами <head>…</head>. Вторую часть кода добавляем в том месте сайта, где вы бы хотели видеть сами кнопки социальной сети Вконтакте.

К оглавлению

 

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

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

Перейдя на страницу для разработчиков, нажимаем ссылку «Продукты»

На следующей странице вам будут доступны все продукты, которые предлагает Facebook. Но нас интересуют социальные плагины.

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

Далее мы попадаем на страницу описания социальных кнопок Facebook. Нажимаем на ссылку «Подробнее» внизу описания кнопки «Нравится».

И вот мы попали на страницу выбора и настройки социальных кнопок, которые нам предлагает Фейсбук. Как можно увидеть на скриншоте снизу, эта социальная сеть предлагает большой выбор социальных плагинов для установки их на сайте. Все они представлены в левом столбце. Рассмотрим настройку и получение кода кнопки «Нравится».

В конфигураторе заполняем поля:

  1. Url адрес – это адрес вашей странице, на которой вы хотите разместить кнопку «Нравится»
  2. Композиция – настройка внешнего вида
  3. Размер кнопки – маленькая кнопка или большая
  4. Width – ширина кнопки. Это нужно, если стандартные размеры кнопок вас не устраивает или они не помещаются в нужном вам месте на сайте
  5. Тип действия – «Нравится» или «Рекомендовать», вы выбираете, что должна делать кнопка

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

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

Настроив основные элементы, нажимаем «Получить код». Код, также как и в случае с Вконтакте состоит из двух частей. Первую часть нужно установить в начале кода HTML вашей страницы после тэга <body>, а вторую часть устанавливаете там, где вам нужно.

К оглавлению

 

Кнопка Твитнуть

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

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

К оглавлению

 

Кнопка Google+

Чтобы добавить на свой сайт кнопку G+ нужно перейти на страницу настройки кнопки Google +1. Перед вами откроется форма настройки кнопки Google.

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

К оглавлению

 

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

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

Сервис UpToLike share buttons. Этот сервис пытается работать по принципу Яндекса. То есть, дает возможность пользователям, которые установили код блока кнопок соцсетей на своем сайте, просматривать статистику нажатий на кнопки блока. Так же в код сервиса встроенная возможность цитировать в социальных сетях понравившееся тексты и стать подписчиком после расшаривания страницы. Настройка блока кнопок также не должна вызвать затруднений.

Можно также воспользоваться плагинами для популярных CMS (wordpress, joomla и тд).

К оглавлению

 

Вывод

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

Каждый из сервисов имеет свои недостатки и достоинства. На мой взгляд, самым оптимальным сервисов является Яндекс со своим блоком «Поделиться».

Вот несколько положительных моментов в пользу этого блока:

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

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

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

1st-finstep.ru

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

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

1. Сервис социальной активности UpToLike

Ссылка на сервис. Жмем на кнопочку «Настроить кнопки соцсетей» и попадаем на раздел с настройками.

Сервис социальной активности UpToLike

Здесь все просто: справа показывается превью, как это будет выглядеть, слева настройки. Можно выбрать, какие кнопки ставить (по ссылке «Еще социальные сети» раскрывается внушительный список соцсетей), расположение, внешний вид и еще некоторые настройки. Для каждой из них появляется пояснение, если навести на значок вопроса рядом. Мне особо понравились здесь лаконичный дизайн вывода кнопочек и адаптация под мобильные устройства, а вариант «Боковая панель» создает скользящую панельку слева/справа экрана.После выбора правильных настроек жмем на большую зеленую кнопку «Сгенерировать код», появляется всплывающее окно, просящее email и адрес сайта, заполняем поля и после этого сразу появляется код для вставки:

Сервис социальной активности UpToLike

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

Сервис социальной активности UpToLike

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

Сервис социальной активности UpToLikeНа самом деле сервис содержит много виджетов: Поделиться, Подписаться, Рейтинг статей, Опросы, Авторизация через соцсети, а также имеет плагины под некоторые популярные CMS, узнать о всех возможностях использования можно здесь.

2. Pluso

Еще один удобный сервис. По ссылке открывается страничка с настройками, также можно выбрать нужные соцсети, внешний вид, мне понравилось, что дополнительно можно добавить кнопочки «Печатать», «Отправить на email» и «Добавить в закладки». Единственное, не получилось найти, где убрать кнопку с дополнительными соцсетями. Настойка «Вертикальное расположение» лишь выстраивает кнопочки друг под другом — скользящая панелька автоматом не получится.Сервис PlusoСервис PlusoПосле выбора дизайна кнопок проматываем страничку вниз и видим поле «Предпросмотр», ниже код для вставки и справа 3 поля для заполнения (на какой сайт будут ссылки, там тоже вылезают подсказки, как и что заполнять). Нужно заполнить поля, скопировать код и также как и в предыдущем примере вставить в то место страницы, где будут вылезать кнопочки.Сервис Pluso

3. Блок «Поделиться» от Яндекс.

По ссылке прокручиваем страничку и появляется конструктор блока.Блок поделиться от ЯндексЗдесь тоже все предельно просто, слева выбор соцсетей, справа вариантов оформления. Нужно скопировать получившийся код в нужное место на сайте. Просто и удобно.

ktvd.ru

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

 

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

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

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

Рассмотрим установку кнопоксоциальных сетей на сайт на примере плагина SocButtons. На примерах подключим этот плагин, чтобы он отображал эти кнопочки, как на рисунке 1:

Рис. 1. Вид кнопок социальных сетей на сайте

 

Сначала нужно скачать плагин с сайта разработчика здесь:

 http://nauca.com.ua/plugins/socbuttons/

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

Editor's NoteInserts backlink to the developer.

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

Поэтому скачанные архив с плагином (в нашем случае plg_socbuttons_J15v1.4.zip) разархивируем локально на компьютере в отдельную папку. Находим в этом архиве файл plg_socbuttons\socbuttons.php. Открываем его в блокноте (примечание: удобно исползовать для таких целей бесплатный текстовый редактор Notepad++, который описан здесь: http://joomla-master.com/soft/commonsoft/45-notepadpp.html) и находим строчку с номером 223, где есть ссылка на сайт разработчика (рисунок 2):

Рис. 2. Удаляем ссылку с файла socbuttons.php

После удаления этой строки сохраняем файл и снова с помощью архиватора архивируем его в архив .zip.

Утановка плагина производится с помощью Менеджера расширений joomla (рис. 3)

После удачной установки Вы должны увидеть надпись "Установить плагин: Удачно" (рис. 4)

Рис. 3. Установка плагина SocButtons

Рис. 4. Удачная Установка плагина SocButtons

 

 Теперь нужно включить плагин SocButtons в Менеджере плагинов. Заходим в Менеджер плагинов и ищем плагин Content - SocButtons. Если у вас уже установлено много других плагинов, то удобно пользоваться фильтром "Включен". Кликаем два раза по колонке "Включен" и появятся отключенные плагины в самом верху списка (рис. 5). Мы можем включить его здесь или кликнем по нашему плагину Content - SocButtons, чтобы его настроить. Откроется окно с настройками плагина (рис. 6), где мы можем его включить или изменить его настройки: включить или выключить социальные сети, выбрать язык, вид кнопки, задать ширину, надпись, цветовое оформление, шрифт.

Рис. 5. Включение плагина SocButtons

Рис. 6. Настройка плагина SocButtons

 

 

www.joomla-master.com

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

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

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

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

Установка кнопки Вконтакте вручную

Вконтакте имеет большую популярность среди  Российских пользователей интернета и поэтому будет глупо не брать во внимание данную социальную сеть. Для того, чтобы установить кнопку для своего сайта, необходимо перейти на страницу: http://vk.com/developers.php?oid=-1&p=Like, на открывшейся странице перед Вами будет следующая картина.

Форма выбора параметров кнопки Мне нравится ВконтактеСоветую выбрать параметры кнопки такие же, как представлены на скриншоте, так как в дальнейшем все параметры кнопок будут иметь одинаковую высоту, равную 18px, иначе кнопка «Мне нравится» будет выделяться и на фоне других кнопок будет громоздкой.

После того, как выбрали все параметры кнопки, под формой будет демонстрироваться вид полученного творения, но не в этом суть. Для добавления кнопки на страницу необходимо скопировать первую часть кода, расположенную после строки <!— Put this script tag to the <head> of your page —> и до строки <!— Put this div tag to the place, where the Like block will be —> и вставить ее в секцию <head></head> сайта, на той странице, где хотите, чтобы кнопка функционировала. Если Вы используете CMS WordPress, то зайдите в админку, кликните по элементу левого навигационного меню «Внешний вид» и в раскрывшемся списке выберите «Редактор», далее найдите файл с названием «header.php», который является шапкой сайта и дублируется на всех страницах и добавьте код в секцию <head></head>.

После этого необходимо сохранить получившийся код и скопировать вторую часть скрипта после текста <!— Put this div tag to the place, where the Like block will be —> и до коонца, которая будет выполнять функцию отображения кнопки «Мне нравится» на сайте и вставить в то место, где необходимо отобразить данную кнопку. Все достаточно просто, ничего сложного. Первая кнопка готова.

Установка кнопки Facebook для сайта

Для установки кнопки «Мне нравится» социальной сети Facebook, потребуется перейти на страницу: http://developers.facebook.com/docs/reference/plugins/like/, после открытия которой перед Вами будет форма.

Форма настройки кнопки Like от FacebookПоле ввода URL необходимо оставить пустым, для того, чтобы кнопку можно было расположить на любой странице Вашего сайта. Все остальные поля оставьте как на скриншоте и нажмите кнопку «Get Code».

Перед Вами появится новое окно.

Код сгенерированной кнопки FacebookЧасть кода, расположенную в первой половине формы, необходимо скопировать и вставить после тега <body> на той странице сайта, где хотите разместить кнопку. Если хотите разместить на страницах с записями и CMS Вашего сайта WordPress, воспользуйтесь файлом «header.php», о котором я ранее упомянул.

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

Установка кнопки социальной сети Google +1

Установка кнопки G+1 еще проще, сем установка предыдущих кнопок. Осуществить настройку кнопки и ее установку можно перейдя на страницу: https://developers.google.com/+/plugins/+1button/. На странице будут следующие данные.

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

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

Также не потребуется особых усилий, аналогично кнопке G+1, необходимо перейти по ссылке: https://twitter.com/about/resources/buttons#tweet. Установить все значения так, как показано на скриншоте, добавив только собственные названия источников, метки и имя пользователя, от лица которого будет рекомендоваться запись в Twitter.

кнопка Twitter для сайтаПосле установки всех кнопок получится, что все они будут расположены в столбец, для того, чтобы расположить кнопки социальных сетей в строку, необходимо обернуть полученный код в контейнер <div></div> и прописать для контейнера стили, как Вашей душе угодно :)

Буду благодарен Вам, если Вы поделитесь статьей в социальных сетях, заодно и протестируете установленные мной кнопки социальных сетей на блоге. Если хотите и дальше следить за новостями блога, подписывайтесь на мой канал в RSS и Twitter, воспользовавшись кнопками в левом углу шапки сайта. Желаю Вам удачи в установке кнопок социальных сетей :)

webimbo.ru