Как установить социальные кнопки на сайт: Как добавить социальные кнопки на сайт? — Программирование на Python и Objective-C в Mac OS

Содержание

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

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

Добавление на сайт на WordPress

Начну с того, что самым простым способом, если у вас WordPress, является просто установить какой-нибудь плагин для этого дела. Какой? Я, например, пользовался Juiz Social Post Sharer. А вообще, просто введите в поиске плагинов слово social и просмотрите, что там есть. Преимущество тут только в том, что вам, вероятно, не придется ничего настраивать.

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

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

Тут же вам будет показан код, который нужно скопировать и вставить в то место на сайте, где вы хотите их видеть. Значит, самое время определить это место! Чаще всего блок «Поделиться» ставят: В начале статьи; В конце статьи; Сбоку.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Теперь вам нужно найти файл с кодом, который выводит статьи. В wordpress, например, он обычно называется single.php или подобным образом. Итак, если вам нужно поставить блок с кнопочками после статьи, ищем строчку the_content. Именно за ней можно вставить код. Вам очень поможет, если разработчик вашего шаблона делал комментарии в коде.

Редактировать файлы сайты можно некоторыми способами. Например, сделать это напрямую через админку движка (внешний вид — редактор). В этом случае код не подсвечивается, поэтому ориентировать в нем не так удобно. Другой способ – через ftp. Подключитесь к сайту с помощью ftp-клиента, перейдите в wp-content – themes. Тут нужно найти тот шаблон, который является активным у вас в данный момент. Заходим в него и находим тот самый single.php или ищем что-то похожее по названию.

В самом файле с кодом найдите строчку the_content с помощью поиска (Ctrl + F). Вставьте где-нибудь после нее этот код.

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

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

Кнопки от Pluso

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Вы можете выбрать стиль кнопок, настроить их фон, положение и размер. Также можно выбрать иконки со встроенным счетчиком. А еще одним преимуществом кнопок от Pluso является их потрясающий внешний вид и возможность встроить их в практически в любой дизайн.

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

Еще один вариант – Share42

Если предыдущие варианты вам чем-то не понравились, есть другой способ, как поставить кнопки социальных сетей на сайт. Это сервис share42.com. Назван так, наверное, потому, что на момент создания в нем было 42 кнопки социальных сервисов, хотя на данный момент их 43.

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

Иконки, которые вам нужно, нужно выбрать, кликнув по ним мышкой. Отдельно хочу отметить наличие таких интересных возможностей, как добавление в избранное браузера, ссылка на rss и кнопка «Наверх».

Далее вы можете выбрать тип панели: горизонтальная или вертикальная? И если выбрана вторая, то количество кнопок можно ограничить. Кодировку я рекомендую оставить UTF-8. Вы можете также добавить иконку самого сервиса в комплект кнопок, чтобы пользователи с вашей странички могли перейти на него и установить себе тоже эти кнопки.

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

WordPress-Ученик

12 фишек без которых Вы не создадите полноценный сайт на WordPress!

Смотреть

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

Обновлено 19 мая 2021

Создаем спрайт из кнопок и вставляем Html код на сайт
Оформляем кнопки в CSS

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Можно, конечно же, и плагин для этой задачи использовать, но сделать самому не так уж и сложно, да и одним плагином в WordPress будет меньше, тем более, что их у меня и так достаточно много трудится (см. статью по приведенной ссылке). Иконки соцсетей я взял из бесплатного конструктора кнопок Share42, о котором уже довольно подробно писал (надеюсь, что Димокс против этого возражать не будет).

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

Создание бизнес-страницы в Facebook
Создание брендовой страницы в Гугл+
Добавление своей группы во Вконтакте
Регистрация и вход в Твиттер

А также я посчитал уместным добавить кнопку подписки на RSS ленту и кнопку Feedburner для подписки на новости сайта по Емайлу.

Создаем спрайт из кнопок и вставляем Html код на сайт

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

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

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

Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 пиксела, поэтому мой спрайт выглядит так (FriendFeed, правда, туда еще затесался, но это не беда):

Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из шаблонов, из которых состоит используемая мною тема оформления. В моем случае он называется sidebar.php. Html код при этом получается крайне простой:

<a rel="nofollow" href="http://feeds.feedburner.com/Ktonanovenkogoru" title="RSS сайта KtoNaNovenkogo.ru" target="_blank"></a>

<a rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru" title="Подписаться по e-mail" target="_blank"></a>

<a rel="nofollow" href="https://vk.com/ktonanovenkogoru" title="KtoNaNovenkogo.ru В Контакте" target="_blank"></a>

<a rel="nofollow" href="https://twitter.com/KtoNaNovenkogo" title="KtoNaNovenkogo.ru в Twitter" target="_blank"></a>

<a rel="nofollow" href="http://www.facebook.com/KtoNaNovenkogo.ru" title="KtoNaNovenkogo.ru в Facebook" target="_blank"></a>
<a rel="nofollow" rel="publisher" href="https://plus.google.com/107949091476526100342" title="KtoNaNovenkogo.ru в Google+" target="_blank"></a>

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

Привязываем спрайт к Html коду и оформляем кнопки в CSS

Однако очевидно, что для описанного выше кода нужно будет еще несколько строк в файле стилей добавить (у меня он называется style.css и живет в папке с используемой мною темой оформления — читайте про них по приведенной чуть выше ссылке). У меня получилось примерно так (может быть и корявенько, но работает):

.twit {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -0px 0 no-repeat;}

.vkon {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:18px 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -24px 0 no-repeat;}

.face {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -48px 0 no-repeat}

.goog {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -96px 0 no-repeat}

.rsskt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 55px;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -120px 0 no-repeat}
.emailkt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -144px 0 no-repeat}

CSS свойство display:inline-block позволяет придать тегу гиперссылки A одновременно свойства строчного и блочного элемента. По отношению к внешним и соседним тэгам он будет вести себя как строчный (т.е. рядом с ним могут располагаться и другие строчные элементы), а вот по отношению к вложенным в него тегам он будет вести себя как блочный (т.е. можно будет задавать его размеры как по ширине, так и по высоте, а еще задавать отступы с помощью марджинов и педдингов).

CSS свойство vertical-align:bottom задет выравнивание по вертикали, что наверно понятно из его названия. Практически для всех элементов в Html коде оно означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Просто поэкспериментируйте и поймете его назначение.

С помощью width и height мы задаем размеры отображаемого блока, который должен совпадать с размером иконки соцсети. Свойство outline:none используется, чтобы в некоторых браузерах при клике на ссылку вокруг нее не появлялась рамка. С помощью margin я задал отступы от верха и от соседних иконок, если не ошибаюсь (года три назад делал, когда CSS активно изучал).

Ну, и самое интересное. С помощью сборного правила background мы определяем, какая именно область нашего спрайта будет отображаться на данном конкретном месте в виде фона (в нашем случае этот фон подкладывается под гиперссылку). Объяснять как так получается очень долго, поэтому читайте приведенную по ссылке статью и все станет понятно (там и наглядные примеры приводятся). Если лень, то просто поэкспериментируйте с циферками, которые, как вы могли заметить, не даром кратны 24.

Да, файл спрайта залейте по ФТП на свой сайт и укажите в background до него путь (в относительном или абсолютном виде). Вот и все. Если не получится, что читайте внимательнее материалы по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях (подробненько — для вставки кода на забудьте его в теги PHP заключить с квадратными скобками).

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

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

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

Лирическое отступление

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

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

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

Как уже стало понятно, кнопка — это ни что иное, как ссылка, ведущая на скрипт публикации в соцсети. Все популярные социальные сети пошли навстречу владельцам сайтов, предоставив им уже готовые варианты кнопок для установки. Все что нужно — скопировать готовый HTML-код, предоставляемый «социалкой» и скопировать его в исходный код своей страницы.

Фейсбук и его «лайки»

Для получения заветной кнопки «Мне нравится» (или ее англоязычного варианта «Like») нужно пройти по ссылке и указать нужные настройки в диалоговой форме. После этого будет сгенерирован код для вставки в свою страницу. Кстати, поддержку тэгов Open Graph, если это возможно, тоже стоит обеспечить.

Кнопки «Сохранить» и «Мне нравится» от Вконтакте

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

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

Социальные кнопки для «Одноклассников» и «Мой мир»

У вебмастера есть уникальная возможность без особых усилий поставить сразу две кнопки — «Нравится» от социальной сети «Мой мир» и «Класс» от «Одноклассников». Если нет необходимости в двух кнопках одновременно — легко можно выбрать одну из них.

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

Воробышек

Устанавливая социальные кнопки для сайта, не следует «гнаться» за количеством — лучше учитывать популярность соцсетей. Например, установка кнопки соцсети «My Space», популярной на Западе и практически неизвестной на наших просторах, не приведет к желаемому результату.

А вот если среди потенциальной целевой аудитории сайта много пользователей «Твиттера», нужно обязательно установить любую из его кнопок.

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

Кнопка от Google+

Хочешь не хочешь, а мнение поисковика Goоgle при продвижении сайта следует учитывать. Чтобы лучше продвигать ресурс в этой поисковой системе, нужно установить кнопку «+1». Места много она не займет, но положительно повлиять на рейтинг может. Настройка кнопки интуитивно понятна и практически не отличается от других подобных операций.

А как, чтобы все и сразу?

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

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

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

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

Кнопки социальных сетей для WordРress и Joomla

Блоги, работающие на «движке» WordРress, можно обогатить кнопками с помощью плагина Social Share Buttons for WordPress — многофункционального решения с широким набором настроек. Кнопки социальных сетей для WordРress имеют идентичный внешний вид и функционал, как и для сайтов на базе других CMS.

Чтобы установить кнопки социальных сетей для Joomla, также следует скачать один из множества плагинов. Программа JL Like, в частности, характеризуется возможностью подсчета «лайков» и голосов без особого отягощения страницы.

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

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

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

Способ 1. Установка с помощью сервиса share.pluso.ru.

С помощь этого сервиса можно установить любые кнопки социальных сетей очень быстро, а главное, кнопочки выглядят красивыми :smile:. Для установки, сначала перейдите на share.pluso.ru. Потом вам нужно выбрать кнопки, которые вы хотите видеть на своем ресурсе. Для этого просто левой кнопкой мыши перетащите их с раздела «Доступны к выбору» в раздел «Выбранные сети». После этого, выберите понравившейся вам стиль кнопок ;-).

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

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

Способ 2. Установка с помощью сервиса uptolike.

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

Что значит, что это наиболее универсальны способ? Просто чтобы установить кнопки uptolike, вы можете использовать просто код кнопок, или выбрать плагин. Вы можете выбрать:

WordPress плагин
Joomla плагин
Drupal модуль
Bitrix модуль
Ну и конечно, просто установив код на сайте.

Ну а далее вы можете настроить все это прямо из панели управления сайтом.

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

Возможности uptolike

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

Способ 3. Устанавливаем социальные кнопки для сайта с помощью сервиса api.yandex.ru/share.

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

Для установки, сначала нужно перейти на сервис api.yandex.ru/share. Здесь все очень просто: слева нужно поставить галочку рядом с кнопкой, которую вы хотите себе добавить, а справа выберите внешний вид блока

После настройки просто скопируйте код и вставьте его в то место, где вы хотите видеть кнопки социальных сетей на сайте. Для wordpress, это файл single.php или index.php.

Способ 4. Устанавливаем кнопки социальных сетей для сайта с помощью плагина Social Share Buttons.

Когда я только начинал вести первый блог, то у меня стоял этот плагин и он мне понравился. Установил его за одну минуту, настроил и вот тебе красивые кнопочки, не нужно копаться в различных кодах и изучать правила сss :smile:. Но каждый плагин имеет существенный недостаток – это дополнительная нагрузка на сервер. Если ваш сайт медленно грузиться, то после установки плагина, он будет загружаться еще дольше.

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

Не знаю как вам, но мне такой вариант не очень понравился :smile:. Для начала, я бы советовал нижнюю часть кнопок вообще убрать, чтобы они не повторялись. Для этого зайдите в «Панель управления» — «Share Buttons» – «Like настройки» и в самом верху справа есть надпись «Включение/Отключение социальных кнопок», ниже этой надписи уберите три галочки и нажмите на кнопку в самом низу «Сохранить изменения».

Потом зайдите в «Share настройки» и оставьте только основные кнопки, которые вам необходимы. Для этого, ниже надписи «Включение/Отключение социальных кнопок» уберите галочки с кнопок, которые вам не нужны. Я, например, оставил только такие кнопки соц сетей для сайта:

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

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

Мне кажется, очень неплохо, и самое главное аккуратно :smile:.

Способ 5. Устанавливаем кнопки соц сетей для сайта с помощью кода.

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

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

Кнопка «Мне нравится» от Вконтакте и Facebook;
Кнопка twitter.
После выполненной работы, вы получите примерно такой код всех кнопочек вместе:

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

.knop {
margin: 20px 0 50px 0; }
.twitter {
float:right; }
.vk {
float:left; margin-left: 10px; }
.google {
float:left; margin-left: 1px; }
.fb-like {
margin-left: 40px; }

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

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

На этом у меня все. А какие вы установили кнопки социальных сетей для сайта.

Добавление каждой кнопки соц сети по отдельности. Социальная сеть Вконтакте

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

Буквально вчера я открыл для себя еще одну полезную фишку для раскрутки блога. А именно — установка кнопок добавления статьи в различные соц.сети (vkontakte.ru, mail, facebook, twitter и т.д.). Наверняка многие из вас знают про эту фишку, но те кто не знают, не пугайтесь. Все очень просто и самое главное эффективно для раскрутки!

Сейчас я расскажу как это работает. Вы добавляете новый пост на свой блог. Его просматривают ваши читатели и говорят, — «Классная статья», «Просто супер», «Очень полезный пост» и т.д.

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

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

Есть уже готовые сервисы по вставке кнопок на ваш блог. Пример — http://odnaknopka.ru

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

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

1. Скачайте архив
с картинками кнопок и HTML код для вставки его в шаблон блога.
2. Скопируйте все картинки в папку images темы вашего блога. (Для WordPress — wp-content/thems/ваша тема/images)
3. Скопируйте готовый HTML код и вставьте его в файл single.php или index.php темы вашего блога. Для wordPress — (wp-content/thems/ваша тема/single.php или index.php)

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

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

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

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

P.S. Как вам статья? Советую , чтобы не пропустить информацию о новых бесплатных видеокурсах и конкурсах блога!

C уважением, Александр Борисов

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

Социальные кнопки для сайта

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

Мечта каждого владельца сайта, если все его записи будут репостить читатели на своих страницах в одной из социальных сетей. Сейчас больше всего идет спрос на Вконтакте, Facebook, Twitter и Одноклассники. Я бы еще добавить LiveJournal, liveinternet и Blogger. Вот эти кнопки желательно добавить на сайт для полного удобства пользователя.

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

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

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

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

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

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

Чем сегодня можно воспользоваться, чтоб добавить социальные кнопки для сайта:

Сервис uptolike.
Социальные кнопки яндекс.
Добавление вручную каждой соц сети отдельно.
Сервис Pluso.
С помощью плагинов для WordPress (для ленивых).

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

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

Uptolike

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

Широкий выбор среди кнопок социальных сетей;
Кнопки адаптированы под мобильные устройства;
Возможность цитирования в соц сетяъ любого участка текста;
Можно добавить кнопку наверх;
Возможность добавления всплывающего окна на подписку в группу Вконтакте;
Выбор размера иконок;
Выбор стиля иконок для сайта;
Добавить эффект при наведении;
Изменение фона кнопки, цвета текста, фона счетчика;
Увеличение или уменьшение текста в счетчике.

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

Кроме этого, что еще может сервис uptolike.

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

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

Если у вас сайт на WordPress, открываем файл single.php и вставляем готовый код сразу после окончания контента странице. Обновляем страницу и смотрим, что получилось. Сложного ничего нет.

Яндекс

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

Ручной метод добавления

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

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

Вконтакте

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

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

Pluso

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

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

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

WordPress

Если вы ничего не понимаете в этом коде, что куда нужно копировать и как все это работает, выход есть. Если у вас движок WordPress, можно установить плагин, с помощью которого у вас появятся кнопки социальных сетей. Сегодня таких плагинов просто большое количество. Заходи в админку — Плагины. Можно сразу написать в поиске плагинов «соц кнопки», «social» или «вконтакте». Я уверен, вы что то найдете.

Среди большинства таких подобных плагинов для WordPress, посмотрев на рейтинг, больше всего ставят именно такие:

Social Share Buttons for WordPress.
Social.
Social Media Feather — lightweight social media sharing and follow buttons.

На самом деле подобных таких плагинов очень много, нужно устанавливать и перебирать, какой вам больше понравится, правильно работает, что показывает и как его можно настроить под себя. Разберем на примере первый такой плагин Social Share Buttons for WordPress.

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

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

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

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

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

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

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

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

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

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

Яндекс кнопки соц сетей

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

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

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

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

Не буду проводить обзор всех возможных сервисов, их суть одна и та же:

Выбираете соц сети.
Изменяете внешний вид.
Копируете код.
Вставляете у себя на сайт.

Теперь список сервисов:

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

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

Не буду долго описывать, незачем, все интуитивно понятно.

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

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

Для данного случая мы выбрали два удобных плагина, которые именуются как Social Share Buttons и Jetpack.

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

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

Затем нажимаем «Настроить» и нас перекидывает в меню настроек социальных сетей.

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

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

В следующем меню мы настраиваем стиль кнопки
и места их вывода
на нашем сайте.

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

Установка кнопок социальных сетей на сайт WordPress. Настройки Social Share Buttons.

Итак, не будем ходить вокруг да около, а перейдем сразу же к установке кнопок социальных сетей
. Заходим с в меню настройки и добавления плагинов. Через поиск находим предложенный нами Social Share Buttons for WordPress.

Установив и активировав плагин для добавления иконок социальных сетей
, заходим в появившееся новое меню с консоли нашего WordPress — Share Buttons.

Как видим, меню наше делиться на три подменю, рассмотрим и разберем каждый из них по отдельности:

Главные настройки отображения кнопок социальных сетей на сайте WordPress.

Что мы можем тут настроить?

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

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

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

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

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

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

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

Добавление каждой кнопки соц сети по отдельности

Твиттер так же предоставляет широкие настройки для кнопок. Ссылка , скрин ниже:

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

Похоже на Однокласники, с чего бы это 😆 .

Добавление иконок на профили и группы в социальных сетях на сайт

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

Итак, что нам нужно:

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

Первым делом покажу небольшой код, для 2-х соц сетей, VK и G+, а так же иконку ленты FeedBurner. По аналогии вы можете добавить сколько угодно иконок.

«http://feeds.feedburner.com/yrokiwp»
>

alt
=
«Подписка RSS»
src
=
«//feedburner.google.com/fb/images/pub/feed-icon32x32.png»
/
>

«Группа Вконтакте»

alt
=
«Группа Вконтакте»
src
=
»
/images/vk.png»
/
>

В Интернете, вероятно, не осталось сайтов, на которых бы не были размещены кнопки для постинга

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

Соцкнопки необходимы, это очевидно. Вопрос в другом — какие выбрать?

Мы для вас протестировали ТОП 5 различных сервисов

для добавления кода кнопок на сайты. Цель — выявить оптимальный и показать его в деталях. Начнём с отборочного этапа.

Выбор лучшего сервиса социальных кнопок

Выбор претендентов для сравнения оказался банален — мы взяли самые популярные сервисы

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

Состав команды аттестуемых таков:

В результате тестирования выбранных социальных сервисов – лидером оказался uSocial

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

Особенности кнопок uSocial

Приведем некоторые факты

, убедившие нас в правильности принятого решения.

Словесного сравнения многим окажется мало. Поэтому мы составили сравнительную таблицу

кнопок от uSocial и остальных дебютантов (используемая шкала оценки — от 1 до 5). Все эти данные получены в процессе тестирования.

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

Инструкция как установить кнопки социальных сетей на сайт

Для размещения социальных кнопочек от uSocial на своём сайте необходимо выполнить несколько простых шагов:

Шаг-1

Шаг-2

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

Здесь же можно активировать кнопку «Вверх», включить поддержку мобильных устройств, подключить сервисы Viber, WhatsApp, Telegram, SMS.

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

Шаг-3

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

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

Приветствую вас, уважаемы посетители!

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

Если у вас ещё нет социальных кнопок на сайте, то обязательно дочитайте статью до конца!

Навигация по статье:

Для чего нужны кнопки социальных сетей?

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

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

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

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

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

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

Бывает два вида кнопок которые можно установить на свой веб-сайт и которые имеют принципиальные различия:

Поделиться (share buttons).С их помощью пользователи могут сообщить своим друзьям о вашем блоге либо о какой-то отдельной статье, разместив запись у себя на странице соцсети, что позволяет привлечь новых посетителей, что по своей сути, является, бесплатной рекламой вашего интернет-проекта.
Подписаться (follow buttons). Они позволяют пользователям перейти к нам в группу или на страницу в одной из социальных сетей, где они могут, при желании, подписаться на новости нашего проекта. Это дает возможность информировать своих пользователей, через соц. сети, о появлении нового контента.

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

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

Это можно сделать двумя наиболее распространенными способами:

Первый способ — с помощью онлайн-сервисов, таких как: Share42, AddThis, ShareThis, Pluso.
Для этого вам, нужно всего лишь, выбрать необходимые параметры панели, после чего, добавить сгенерированный код в шаблон страницы. Этот вариант очень удобен особенно для тех, кто не хочет перегружать свой сайт плагинами.
Второй способ — использовать специальные плагины. Их, конечно же, большое множество. Вот одни из наиболее распространенных: Fixed Social buttons, Simple Social Buttons, Social Share Buttons for WordPress, UpToLike, Socialize It!
Использование плагина удобно тем, что, когда угодно, можно отключить или добавить новые кнопки без необходимости для этого копаться в коде.

Добавление соц. панели с помощью Share42

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

1.Для установки панели нам необходимо перейти на сайт Share42.
2.Выбираем нужные нам социальные сети, а так же указываем размер иконок:
3.Далее, настраиваем свою панель:
1. 1)Выбираем тип нашей панели (вертикальная или горизонтальная).
2. 2)Выбираем кодировку UTF-8.
3. 3)Соглашаемся или нет на размещение иконки Share42
4. 4)В случае если у вас сайт сделан на WordPress, ставим галочку в пункте «К вашему сайту подключен JQuery»

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

4.Нажимаем кнопку «Скачать готовый скрипт», после чего, следуя инструкциям, устанавливаем скрипт себе на страницу:
1. 1)Разархивируем архив.
2. 2)При помощи FTP-клиента загружаем папку Share42 в корневой каталог вашего сайта на хостинге.
3. 3)Указываем путь к папке.
4. 4)Ставим галочку напротив CMS на базе которой сделан сайт. В нашем случае WordPress.
5. 5)Вставляем в шаблон страницы сгенерированный код.

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

Куда вставлять код?

Если вы хотите чтобы эти кнопку выводились под текстом статей, то данный код вам нужно будет вставить в шаблон single.php где то в самом конце.
Если нужно вывести эти кнопки на всех страницах сайта, то кроме single.php нужно вставить код и в шаблон page.php

Внимание! Возможно при добавлении в эти файлы кнопки соцсетей могут высветиться не в том месте, где вам нужно или не высветиться вообще. Здесь всё зависит от особенностей вашей темы и её структуры. В таком случае нужно будет поэкспериментировать с добавлением кода в другие части шаблона single.php и page.php.

Для вывода социальных кнопок в подвале сайта или как плавающую вертикальную панель – вставляем предложенный код в файл footer.php вашей темы.
Для того чтобы открыть эти файлы подключаемся к сайту по ftp и заходим в папку:
wp-content – thems – папка с названием вашей темы.
Для того чтобы выровнять эти кнопки по центру страницы нужно в файл style.css вашей темы прописать:
.share42init{
text-align:center;
margin-top:20px;
}
</Files>
.share42init{
text-align:center;
margin-top:20px;
}
</Files>

Все готово! Что получиться, вы можете увидеть в конце статьи

Установка плагина Social Share Buttons for WordPress

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

1.Для начала необходимо в административной панели сайта WP выбрать пункт Плагины => Добавить новый. Далее, при помощи поиска найти, установить, и активировать плагин Social Share Buttons for WordPress.
2.В боковом меню админпанели появиться пункт «Share Buttons», при нажатии по нему нам доступно три пункта меню:
1. 1)Главные настройки
2. 2)Share настройки
3. 3)Like настройки
3.Выбрав «Главные настройки» обязательно настраиваем:
1. 1)Текст, который будет отображаться перед нашей панелькой
2. 2)Позицию кнопок соц. сетей. Где выбираем положение панели по вертикали и горизонтали, а так же есть возможность исключить типы страниц, где не нужно размещать панель.
4.Переходим в «Share настройки». Здесь делаем следующее:
1. 1)В разделе «Включение/Отключение социальных кнопок» снимаем галочки с ненужных нам иконок.
2. 2)Выбираем стиль оформления иконок.
3. 3)В разделе «Сортировка кнопок», путем перетаскивания, располагаем кнопки в нужной нам последовательности.
4. 4)Задаем отступы сверху и снизу панели.
5.Выбираем «Like настройки», включаем и настраиваем нужные нам счетчики «лайков»

Обратите внимание! Для того, чтобы работали кнопки «лайков» Facebook и Вконтакте вам необходимо указать свой API ID. Для этого вам необходимо перейти по ссылкам приведенным над полями вода API ID. После прохождения регистрации вам будут выданы уникальные номера.

У нас должно получиться как то так:

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

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

Кстати, не забудьте испытать кнопки социальных стей в действии и нажать на несколько из них! Блок с этими кнопками вы сможете найти прямо под этой статьёй 🙂

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

С уважением Юлия Гусарь

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

Блок поделиться от Яндекса;
использование сторонних сервисов для добавления кнопок;
плагины поделиться в социальных сетях для сайта на WordPress;
описание добавления кнопок каждой социальной сети по отдельности;
добавление иконок на профили в социальных сетях.

Яндекс кнопки соц сетей

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

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

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

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

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

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

Не буду проводить обзор всех возможных сервисов, их суть одна и та же:

Выбираете соц сети.
Изменяете внешний вид.
Копируете код.
Вставляете у себя на сайт.

Теперь список сервисов:

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

Не буду долго описывать, незачем, все интуитивно понятно.

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

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

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

Для данного случая мы выбрали два удобных плагина, которые именуются как Social Share Buttons и Jetpack.

Модуль “Поделиться” от плагина Jetpack.

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

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

Обзор Jetpack и рассмотрение модулей Jetpack можно прочитать на нашем сайте. Будем считать что вы с ними ознакомились, а значит можно приступить к настройке модуля “Поделиться”, для добавления кнопок социальных сетей на сайт WordPress.

Заходим в административную панель, далее Jetpack/Настройки. И выбираем группу модулей “Социальные”.

Далее находим нужный нам модуль “Поделиться” и переходим по его ссылке.

Затем нажимаем “Настроить” и нас перекидывает в меню настроек социальных сетей.

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

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

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

В следующем меню мы настраиваем стиль кнопки и места их вывода на нашем сайте.

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

Установка кнопок социальных сетей на сайт WordPress. Настройки Social Share Buttons.

Итак, не будем ходить вокруг да около, а перейдем сразу же к установке кнопок социальных сетей. Заходим с админки в меню настройки и добавления плагинов. Через поиск находим предложенный нами Social Share Buttons for WordPress.

Установив и активировав плагин для добавления иконок социальных сетей, заходим в появившееся новое меню с консоли нашего WordPress — Share Buttons.

Как видим, меню наше делиться на три подменю, рассмотрим и разберем каждый из них по отдельности:

Главные настройки отображения кнопок социальных сетей на сайте WordPress.

Что мы можем тут настроить?

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

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

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

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

Добавление каждой кнопки соц сети по отдельности

Кнопка поделиться Вконтакте

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

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

Кнопка поделиться Facebook

По аналогии с предыдущим примером даю ссылку для получения кнопки и привожу скриншот настроек:

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

Кнопка поделиться Одноклассники

Все аналогично, переходим на сайт, подбираем кнопку, копируем код.

Кнопка поделиться Google+

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

Кнопка поделиться от Твиттер

Твиттер так же предоставляет широкие настройки для кнопок. Ссылка тут, скрин ниже:

Кнопка поделиться от Mail.ru

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

Похоже на Однокласники, с чего бы это 😆 .

Добавление иконок на профили и группы в социальных сетях на сайт

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

Итак, что нам нужно:

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

<div>   <a href="http://feeds.feedburner.com/yrokiwp">     <img title="Подписка RSS"       alt="Подписка RSS" src="//feedburner.google.com/fb/images/pub/feed-icon32x32.png"/></a> </div> <div>   <a href="https://vk.com/yrokiwpru">     <img title="Группа Вконтакте"       alt="Группа Вконтакте" src="<?php bloginfo('template_url') ?>/images/vk.png"/></a> </div> <div>   <a href="https://plus.google.com/u/0/communities/112307833797572900957">     <img title="Сообщество G+"       alt="Сообщество G+" src="//yrokiwp.ru/wp-content/themes/first_2015/images/gplus.png"/></a> </div>

В этом примере я показал сразу три варианта добавления иконок, первый с использованием картинок с другого сайта, второй WordPress-совский используя функцию bloginfo(), третий, более правильный и оптимальный, указание абсолютного пути к картинке на сервере.

Что касается CSS, тут я вам навряд сильно помогу, могу лишь дать несколько советов по примеру ниже:

.head-icon{ float:right; /*или left*/ margin:5px;} /*отступы по всем сторонам*/

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

Куда добавлять код кнопок поделиться на сайт

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

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

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

Рекомендую почитать:

Как разместить кнопки социальных сетей на всех ваших веб-страницах

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

Что социальные сети могут сделать для вашего сайта?

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

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

Есть несколько способов добавить кнопки социальных сетей.Решение действительно будет зависеть от того, как построен ваш сайт и на какой платформе он построен. Давайте рассмотрим несколько разных способов.

Как это работает

По сути, все, что вы действительно делаете для включения этих кнопок, — это просто включаете некоторый HTML-код, который будет отображать кнопку и делать что-то при нажатии.

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

Не беспокойтесь, есть много разных способов сделать это!

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

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

Шаги по установке плагина:

Зайдите в админку WordPress , затем Плагины »Добавить новый.
Вы увидите панель поиска в правом верхнем углу страницы, щелкните ее и введите имя подключаемого модуля или функциональность , которую вы хотите.

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

Некоторые рекомендации по плагинам для WordPress:

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

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

Если вы используете Wix, также очень легко добавить кнопку социальных сетей

Шаги для включения кнопок социальных сетей:

Доступ к вашей странице единого сообщения .
Закройте диспетчер блогов и щелкните текст блога.
Щелкните значок Настройки
Прокрутите вниз до Социальных кнопок
Установите или снимите флажки рядом с кнопками социальных сетей, чтобы отобразить или скрыть их:
- Facebook
- Твиттер
- LinkedIn
- Pinterest
- Google+
- Нравится этот пост (добавляет значок сердца с вашим измененным текстом).
Щелкните поля кнопки социальных сетей, чтобы изменить текст в них.
Перетащите ползунок Размер кнопки , чтобы увеличить или уменьшить размер кнопок социальных сетей.

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

Вот несколько рекомендаций по плагинам для WIX:

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

Для пользователей Shopfiy вы можете выполнить один из следующих двух шагов:

Посетите здесь для получения дополнительных инструкций.

Если вы создали свой собственный сайт с нуля

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

Вот некоторые из них, которые мы рекомендуем:

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

Удачного обмена!

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

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

И все мы слышали извечную фразу о том, что кнопки социальных сетей мертвы.

Точно так же, как мы слышали о SEO, контент-маркетинге, PPC и почти любой другой маркетинговой тактике, которая все еще работает.

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

Или на сайтах с недостаточным объемом трафика.

В большинстве случаев это связано с плохим размещением и плохим юзабилити.

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

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

Большинство маркетологов ошибаются в двух основных областях с кнопками совместного использования в социальных сетях:

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

Продолжить чтение ниже

Где окончательно не работают кнопки социальных сетей?

На страницах продуктов, цен и функций:

Согласно исследованию, проведенному VWO, удаление кнопок социальных сетей на страницах продуктов сайтов электронной торговли увеличило конверсию на 11,9 процента.

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

Но это трудно сказать по нескольким причинам:

Продолжить чтение ниже

Это было на странице продукта. Кто будет делиться продуктом в социальных сетях прямо со страницы продукта перед его покупкой? Вероятно, 1 из 1000000.
Низкое количество репостов на странице продукта похоже на отрицательные или нулевые отзывы на Amazon. Люди этому не верят. Это работает как «негативное» социальное доказательство.
Это отвлекает людей от основного призыва к действию, заключающегося в покупке продукта.

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

Итак, где их добавить?

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

Возможно, один из лучших примеров использования кнопки обмена в социальных сетях — это HubSpot:

При использовании контента на HubSpot и выделении определенных разделов всплывает панель социального обмена с отображением варианты для Twitter, Facebook, электронной почты, LinkedIn, Messenger, а также копирования и вставки.

Это великолепное удобство использования.

Это позволяет пользователям не только делиться всей статьей, но и отдельными разделами контента, который им интересен.

Плюс, когда вы копируете и вставляете раздел из сообщения, это выглядит так:

«Когда вы сегментируете приведенные выше результаты по размеру компании, результаты становятся еще более интересными». https://blog.hubspot.com/marketing/blogging-frequency-benchmarks

Он автоматически помещает скопированный контент в кавычки и цитирует источник со ссылкой HubSpot.

Бум! Теперь это правильная атрибуция.

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

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

Добавить кнопки социального обмена на полпути к содержанию

Официальный документ от Chartbeat показал, что 55 процентов посетителей сайта читают статью в течение 15 секунд или меньше.

Читать ниже

Brutal.

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

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

Если люди даже не читают более 15 секунд, они не будут делиться вашим контентом.

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

Если люди постоянно доходят до конца вашего контента, им, вероятно, понравился пост.

И если им понравится этот пост, ваши шансы на то, что он станет популярным в социальных сетях, намного выше.

Кнопки совместного доступа в верхней части вашего контента могут просто отвлекать от общей картины:

Побуждая людей активно читать ваш контент.

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

Или даже в конце с призывом к действию:

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

Продолжить чтение ниже

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

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

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

Представьте себе:

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

Они нажимают на ваш контент и видят это:

Скорее всего, они подумают:

Продолжить чтение Ниже

Это странно, почему у этого сообщения только одна социальная доля? Правильно ли это содержание? Это плохо? Мне найти что-нибудь еще?

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

Это может негативно повлиять на вашу способность получать больше акций.

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

Лучшие приложения и плагины для социальных сетей

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

Объявление

Продолжить чтение ниже

Некоторые из них неуклюжие, устаревшие, плохо удобные и просто ужасно выглядят.

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

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

1. Выделите и поделитесь для WordPress — Бесплатно!

Этот плагин для WordPress работает так же, как HubSpot, позволяя пользователям на вашем сайте делиться вашим контентом при выделении текста.

Этот плагин полностью бесплатен для пользователей WordPress и работает с:

Продолжить чтение ниже

Twitter
Facebook
WhatsApp
LinkedIn
Электронная почта

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

2. Social Warfare — От бесплатного до платного

Social Warfare содержит множество различных вариантов для обмена кнопками от статичных до исчезающих в определенных местах вашего сообщения.

Отлично подходит для добавления кнопок общего доступа в середине содержания для целевой аудитории.

3. Monarch — Платный

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

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

Хотите лучший плагин? Вам придется заплатить немного больше.

Но если индивидуальная настройка важна для вас, это того стоит.

Продолжить чтение ниже

Заключение

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

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

Еще кнопки! Вы получаете кнопку, вы получаете кнопку!

К сожалению, этот подход не работает.

Хотите больше репостов в социальных сетях?

Размещайте их в контенте, когда люди выделяют разделы.

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

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

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

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

Дополнительные ресурсы:

Кредиты на изображения

Скриншоты, сделанные автором, январь 2019 г. посещаемость вашего сайта сегодня.

Бесплатно
Простота установки
Быстрая настройка

Бесплатные инструменты, которым доверяют миллионы мировых создателей контента

Наши кнопки общего доступа

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

Встроенные кнопки обмена

Добавьте кнопки обмена рядом с заголовком или продуктом для идеальной видимости

Приступите к работе

Кнопки липкого обмена

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

Начать работу

Кнопки обмена изображениями

Пусть ваша аудитория поделится вашим самым мощным визуальным контентом

Начать работу

Кнопки обмена видео

Предоставьте аудитории возможность делиться видео на вашем сайте одним щелчком мыши

Get Star ted

Бесплатное использование

Всегда бесплатно и готово помочь вам сразу же расширить аудиторию

Настраиваемое

Вы сами решаете, что нужно вашей аудитории, ваши инструменты позволяют это осуществить

Оптимизировано для мобильных устройств

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

Поддержка языков

Выберите один из 9 различных языков, чтобы наши инструменты соответствовали

Плагин WordPress

Полная интеграция с вашей любимой платформой веб-сайтов

Аналитика

Простая и удобоваримая информация что находит отклик у вашей аудитории

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

Часто задаваемые вопросы

Есть вопросы о наших продуктах и услугах? Не смотрите дальше!

Как установить кнопки общего доступа на мой сайт WIX?

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

Затем выберите желаемые кнопки совместного использования. Вы можете настроить свой дизайн, выбрав выравнивание, размер кнопки, призыв к действию и количество репостов.Когда ваша кнопка будет готова к дизайну, нажмите «Зарегистрироваться и получить код», чтобы получить код кнопки. После того, как вы создадите свои кнопки совместного использования, вы можете нажать кнопку «зарегистрироваться и получить код», чтобы получить код кнопки совместного доступа. Скопируйте код из раздела «Установите sharethis.js на свой веб-сайт». Затем войдите в свою учетную запись Wix и введите HTML-код в текстовое поле.

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

Как установить кнопки общего доступа на мой сайт Weebly?

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

Затем выберите желаемые кнопки совместного использования. После того, как вы создадите кнопки общего доступа, вы можете нажать кнопку «зарегистрироваться и получить код», чтобы получить код кнопки общего доступа. Когда ваша кнопка будет готова к дизайну, нажмите «Зарегистрироваться и получить код», чтобы получить код кнопки. После того, как вы создадите свои кнопки совместного использования, вы можете нажать кнопку «зарегистрироваться и получить код», чтобы получить код кнопки совместного доступа. Скопируйте код из раздела «Установить sharethis.js на вашем сайте ». Затем войдите в свою учетную запись Weebly и введите HTML-код в текстовое поле.

Средний рейтинг пользователей

पटीर

जगदीश

2018-11-09

Awesome Tool

Это помогло мне делать вещи очень быстро

2018-11-15

Отличный виджет!

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

2019-07-01

Отличный инструмент

Лучшее обслуживание, отличный инструмент, он упростил мою работу.

2019-09-03

Партнер по маркетингу

Для меня Sharethis — один из моих новых любимых онлайн-инструментов. Создавать кнопки публикации для ваших блогов, целевых страниц и веб-сайтов еще никогда не было так просто! Я на 100% рекомендую всем, кто хочет, чтобы их соединение было онлайн. И даже лучше, чем это, это совершенно бесплатно прямо сейчас. 😍

2019-11-29

Awesome tool

Share Buttons

2020-07-17

Helpful application

Действительно, я имел в виду

2020- 07-27

Самый лучший инструмент на земле!

Я пробовал много инструментов для обмена от многих разработчиков, но, честно говоря, ShareThis намного лучше и работает безупречно.1. Кнопки выглядят великолепно, просто и чисто, мы можем их настроить. И есть опция 100% ширины, чтобы он реагировал на любой размер экрана. 2. Если вы измените параметры / настройки кнопки в своей учетной записи, кнопка на вашем веб-сайте автоматически обновится. 3. Кнопки не блокируются Adblock, поэтому они увеличивают видимость на вашем сайте. Спасибо ShareThis

2020-10-02

Добавить отзыв / рейтинг

Социальные плагины

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

Получите свои кнопки общего доступа

Включите общий доступ в один клик, чтобы начать масштабировать трафик вашего сайта сегодня

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

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

В этой статье мы рассмотрим три впечатляющих плагина WordPress:

Реактивный ранец
Орбитальная лиса-компаньон
Социальный мопс

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

Добавьте кнопки социальных сетей в WordPress с помощью любого из этих 3 плагинов

Реактивный ранец

Jetpack — чрезвычайно популярный плагин WordPress, изначально созданный Automattic для веб-сайтов WordPress.com. В то время как Jetpack предлагает множество различных функций, модуль Sharing позволяет вам легко добавлять кнопки социальных сетей в WordPress и сообщения вашего блога, чтобы читатели могли быстро делиться вашим контентом в своих каналах социальных сетей.

В настоящее время Jetpack поддерживает:

Твиттер
Facebook
Google+
Pinterest
LinkedIn
Tumblr
многие другие сети

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

Нравится, как выглядят эти кнопки? Читайте дальше, чтобы узнать, как установить Jetpack и настроить модуль Sharing на своем веб-сайте WordPress.

Установка Jetpack

Чтобы установить плагин Jetpack, выберите «Плагины » → «Добавить новый » в меню WordPress.

Введите Jetpack в функцию поиска и затем выберите Установить сейчас → Активировать .

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

Затем вам будет предложено Подтвердить синхронизацию вашего веб-сайта с WordPress.com.

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

Активация кнопок общего доступа

Чтобы активировать кнопки совместного доступа, перейдите в Jetpack → Настройки → Совместное использование .

Здесь, под Кнопками общего доступа , включите Добавить кнопки общего доступа к своим сообщениям кнопка.

Затем в меню WordPress выберите Settings → Sharing .

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

Далее по странице вы можете:

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

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

По завершении выберите Сохранить изменения внизу страницы.

Подходит ли вам плагин Jetpack Sharing?

Как видите, кнопки Jetpack очень легко добавить на ваш сайт WordPress. Но подойдет ли вам Jetpack? Вот несколько причин, по которым Jetpack — правильный выбор для вас.

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

Теперь давайте рассмотрим второй вариант добавления кнопок социальных сетей в WordPress…

Орбитальная лиса-компаньон

Бесплатный плагин Orbit Fox Companion, созданный нами здесь, в Themeisle, включает в себя ряд модулей, направленных на улучшение функциональности вашего веб-сайта WordPress. Кнопки общего доступа к социальным сетям — один из этих модулей, позволяющий добавлять красивые кнопки в свой блог.

Orbit Fox предоставляет более 20 кнопок социальных сетей, которые вы можете выбрать и добавить на свой сайт WordPress. Вы можете управлять своими кнопками совместного доступа, выбирать их положение на экране, а также включать и выключать их в зависимости от устройства, используемого для просмотра вашего веб-сайта. Это пример кнопок совместного доступа Orbit Fox Companion…

Если вам нравятся эти кнопки, то вот как их настроить…

Настройка Orbit Fox Companion

Для начала откройте панель управления WordPress и установите Orbit Fox Companion (этот плагин можно установить так же, как плагин Jetpack или любой другой плагин).

После установки вы найдете Orbit Fox в меню WordPress под Orbit Fox . Здесь, в разделе «Доступные модули », активируйте модуль социального обмена .

Настройка кнопок доступа

Прокрутите страницу вниз, и вы найдете модуль Social Sharing Module в разделе Activated Modules Options .

Здесь вы можете настроить кнопки совместного доступа.

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

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

Подходит ли вам плагин Orbit Fox Companion?

Вот несколько причин выбрать Orbit Fox Companion среди других вариантов:

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

Вам нужен доступ к нишевым социальным сетям, таким как Reddit, WhatsApp и т. Д.

Но прежде чем вы примете окончательное решение, у нас остался один плагин для изучения…

Кнопки социальных сетей — Social Pug

Последний плагин WordPress, который мы рассмотрим, — это Social Pug. Этот бесплатный плагин добавляет настраиваемые кнопки публикации в социальных сетях в ваш блог WordPress.

Поддерживает пять сетей:

Facebook
Твиттер
Google+
LinkedIn
Pinterest

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

Если вы решите использовать Social Pug для отображения кнопок общего доступа на своем веб-сайте WordPress, это пример того, как будет выглядеть окончательный эффект…

Итак, давайте узнаем, как добавить Social Pug на свой сайт…

Добавление кнопок общего доступа к социальным мопсам

Установите и активируйте плагин Social Pug.Затем выберите Social Pug → Toolkit в меню WordPress.

Затем выберите, хотите ли вы поделиться кнопками: Inline Content или Floating Sidebar . Активируйте свои предпочтения и нажмите Настройки .

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

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

Подходит ли вам плагин Social Pug?

Вот несколько причин выбрать Social Pug:

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

Просто помните — у Social Pug самый короткий список поддерживаемых сетей.У вас есть только пять основных сетей, тогда как два других плагина предлагают гораздо более широкий выбор.

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

Плагин, который вы выберете для своего сайта WordPress, будет во многом зависеть от потребностей вашего сайта. Рассмотрим такие вещи, как:

Соответствуют ли кнопки стилю вашего сайта и нравятся вашей аудитории
Можно ли настроить кнопки
Где можно расположить кнопки
Если плагин поддерживает все социальные сети, которые имеют отношение к вашему бизнесу

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

Как вы добавите кнопки социальных сетей в WordPress — какой плагин привлек ваше внимание? Поделитесь своими мыслями в комментариях ниже…

Бесплатный гид

5 основных советов по ускорению работы вашего сайта на WordPress

Сократите время загрузки даже на 50-80%

, просто следуя простым советам.

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

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

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

Существует три различных типа кнопок социальных сетей. Их:

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

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

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

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

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

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

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

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

Кнопки общего доступа от AddThis. У этого плагина более нескольких сотен тысяч пользователей и хороший рейтинг.
Shareaholic. У этого плагина более нескольких сотен тысяч пользователей и хороший рейтинг.
Реактивный ранец. Jetpack — это плагин с множеством функций, в том числе позволяющий добавлять кнопки на ваш сайт.
Orbit Fox Companion. Этот плагин имеет более 20 кнопок обмена в социальных сетях, из которых вы можете выбирать.
Социальный плагин. Бесплатный плагин, который позволит вам настроить кнопки.

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

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

Установить

Войдите в свою панель управления WordPress.
Перейдите в меню навигации.
Выберите плагины и найдите «Поделиться кнопками от Addthis».
Установите плагин и нажмите «Активировать».

Регистрация

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

Добавить

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

Выбрать

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

Кроме того, вы также можете выбрать, где должны отображаться ваши кнопки. На вашей домашней странице? Или по конкретной статье? Твой выбор.

Опубликовать

И теперь вы готовы, чтобы все ваши продукты, услуги и / или статьи были готовы к публикации со всем миром.Как здорово!

Вы используете наш Конструктор сайтов?

Если вы используете Конструктор веб-сайтов с one.com, очень легко разрешить людям делиться вашим контентом. Конструктор веб-сайтов предлагает социальные ссылки, по которым вы можете ссылаться на страницу в социальных сетях. Вы можете подключить свой контент к каналу Facebook или Instagram. Кроме того, вы можете связать свой контент со страницей Facebook с баннерами, логотипом, кнопкой «Мне нравится», кнопкой «Поделиться» и новейшими сообщениями.

Как добавить кнопки социальных сетей в WordPress (Руководство для начинающих)

Хотите добавить кнопки социальных сетей в WordPress? На сайтах социальных сетей люди проводят много времени в Интернете.

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

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

Почему вы должны добавлять кнопки социальных сетей в WordPress?

Социальные сети сегодня — одно из самых популярных онлайн-занятий.По оценкам, к концу 2019 года во всем мире будет около 2,77 миллиарда пользователей социальных сетей. (Источник)

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

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

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

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

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

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

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

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

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

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

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

Первое, что вам нужно сделать, это установить и активировать плагин Shared Counts. Подробные инструкции см. В нашем пошаговом руководстве по установке плагина WordPress.

После того, как вы установили плагин, вам нужно перейти в меню Settings »SharedCounts , чтобы настроить параметры плагина.

Затем вам нужно прокрутить вниз до раздела «Показать» и выбрать кнопки общего доступа, которые вы хотите отобразить. По умолчанию выбраны три кнопки (Facebook, Twitter и Pinterest).

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

Затем вы можете выбрать стиль кнопки общего доступа в раскрывающемся меню с надписью «Стиль кнопки общего доступа». Плагин Shared Counts имеет 8 красивых стилей кнопок.

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

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

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

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

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

Как отобразить количество репостов в социальных сетях в WordPress?

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

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

В окне настроек Shared Counts вы увидите настройки «Share Counts» вверху.

По умолчанию вы увидите опцию None , выбранную для «Count Source», что означает, что количество общих ресурсов не извлекается и не отображается.

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

SharedCount.com — рекомендуемый вариант для подключаемого модуля. Если вы выберете этот вариант, счетчики будут извлечены из API службы SharedCount. Он позволяет получить все счетчики всего за 2 вызова API, что лучше всего для производительности.

Если вы выберете вариант «Собственный», счетчики общего доступа будут считываться из соответствующей социальной службы, например Facebook API для подсчета Facebook, Pinterest API для подсчета PIN-кодов.Этот метод может замедлить работу вашего сайта, поскольку для этого потребуется несколько вызовов API.

Мы рекомендуем выбрать SharedCount.com в качестве источника подсчета. Затем вы увидите поле для ключа SharedCount API.

Вы можете получить SharedCount API, зарегистрировавшись в бесплатной учетной записи на веб-сайте SharedCount.com.

Введите свой адрес электронной почты и пароль. Затем нажмите «Создать учетную запись».

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

После проверки электронной почты вам необходимо войти в свою учетную запись SharedCount и перейти к своей учетной записи в верхней правой части экрана. Там вы увидите свой адрес электронной почты и рядом с ним выпадающий значок.

Затем вам нужно щелкнуть раскрывающееся меню и выбрать «Настройки». Здесь вы найдете свой ключ API SharedCount.

Вам необходимо скопировать ключ API и вернуться на страницу настроек вашего плагина на вашем сайте WordPress.Теперь вставьте ключ API в поле SharedCount API Key.

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

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

Мы также рекомендуем установить флажок, чтобы скрыть пустые счетчики вместо отображения нуля (0).

Затем вы увидите новое поле «Общее количество» в разделе «Дисплей».Это позволяет вам отображать общее количество акций рядом с вашими кнопками общего доступа.

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

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

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

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

Если да, то вы можете использовать шорткод Shared Counts: [shared_counts].

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

Для добавления шорткодов в WordPress есть блок шорткодов в редакторе блоков WordPress.

Вы можете просто добавить блок в область содержимого, а затем вставить шорткод Shared Counts.

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

Добавление плавающей панели социальных сетей в WordPress

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

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

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

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

Для плавающих кнопок социальных сетей вам необходимо установить и активировать плагин Sassy Social Share.

После активации плагин добавит новый пункт меню с надписью «Sassy Social Share» на боковую панель администратора WordPress. Нажав на нее, вы попадете на страницу настроек плагина.

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

Далее вам нужно перейти на вкладку «Стандартный интерфейс». Отсюда вы можете включить или отключить стандартные статические кнопки публикации в социальных сетях.

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

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

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

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

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

Виджет социальных иконок — Поддержка — WordPress.com

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

Содержание

Доступные значки

Мы поддерживаем значки для различных сетей.

Щелкните здесь, чтобы развернуть список доступных значков.

500 пикселей

Amazon

Яблоко

Bandcamp

Behance

CodePen

DeviantArt

Digg

Dribbble

Dropbox

Адреса электронной почты (если ваш адрес электронной почты: me @ yourgroovydomain.com, введите mailto: [email protected] в поле URL-адрес учетной записи )

Etsy

Facebook

Flickr

Foursquare

Goodreads

Google+

Google

GitHub

Instagram

iTunes

LinkedIn

Средний

Встреча

Патреон

Pinterest

Карман

Равелри

Reddit

RSS-каналы

Skype

SlideShare

Snapchat

SoundCloud

Spotify

StumbleUpon

TikTok

Tumblr

Twitch

Твиттер

Vimeo

ВК

WordPress

Yelp

YouTube

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

↑ Содержание ↑

Виджет социальных иконок

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

↑ Содержание ↑

Добавить виджет социальных иконок

Перейдите на Мои сайты → Внешний вид → Настроить
Нажмите Виджеты , и вы увидите различные области виджетов, которые поддерживает ваша тема.Почти все темы будут иметь как минимум область виджетов нижнего колонтитула. У некоторых также есть виджеты боковой панели или другие области виджетов.
Щелкните по доступной области виджетов; в этом примере мы нажимаем на область виджетов «Нижний колонтитул».
Щелкните Добавить виджет и найдите Social или просмотрите доступные виджеты, чтобы найти виджет Social Icons .

Примечание. Если вы установили плагины, вы увидите (Jetpack) в конце заголовка виджета Social Icons.

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

Добавьте ссылку на свой первый профиль в социальной сети. Например, https://www.facebook.com/WordPresscom

Не забудьте добавить ссылку полностью, включая часть адреса сайта https: // .

Щелкните опцию Добавить значок , чтобы добавить в виджет дополнительные значки социальных сетей.

Нажмите кнопку «Добавить значок», чтобы добавить еще один значок социальной сети.

Каждая ссылка, которую вы добавляете в виджет «Социальные значки», будет автоматически отображаться в виде значка этой социальной сети при предварительном просмотре в Настройщике.
Если вы не видите соответствующий значок социальной сети, убедитесь, что вы ввели правильную ссылку на свою социальную сеть, включая часть адреса https: // .

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

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

↑ Содержание ↑

Изменение порядка значков

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

↑ Содержание ↑

Настройка значков социальных сетей

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

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

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

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

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

Загрузите значок в свою медиа-галерею

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

Получите ссылку на значок социальной сети

Перейти на Мой сайт → Медиа .
Щелкните изображение загруженного значка социальной сети и щелкните Edit.
В разделе URL нажмите Копировать , чтобы сохранить ссылку в буфер обмена вашего компьютера.
Нажмите Готово , чтобы выйти из редактора мультимедиа.

Шаг 2 . Добавьте виджет «Текст» или виджет «Пользовательский HTML» и отформатируйте кнопки с помощью HTML.

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

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

Перейдите в Мои сайты → Внешний вид → Настроить → Виджеты .
Выберите область виджетов, в которой вы хотите разместить значки.
Щелкните Добавить виджет и найдите текстовый виджет или пользовательский виджет HTML
Щелкните имя виджета, чтобы добавить виджет.

Добавить пользовательский виджет социальных иконок HTML

Добавьте заголовок к своему виджету, если хотите, а затем добавьте HTML в свой виджет, следуя приведенной ниже структуре:

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

Шаг 3. Как только вы закончите, нажмите Опубликовать и проверьте свои симпатичные новые кнопки социальных сетей!

↑ Содержание ↑

Примеры и образцы изображений

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

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

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

↑ Содержание ↑

Часто задаваемые вопросы

Почему не отображается значок социальных сетей?

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