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

6 сервисов для добавления кнопок соц. сетей на сайт или блог

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

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

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

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

Преимущества

  1. Возможность легко и просто делиться полезным контентом в социальных сетях.
  2. Увеличение посещаемости созданного интернет-проекта.
  3. Увеличение популярности.
  4. Простота установки.
  5. Увеличение трафика из соц. сетей.
  6. Это один из бесплатных способов продвижения.
  7. Поисковики любят, когда посетители делятся в соц. сетях.
  8. Доступность многих социальных сетей в одном коде.
  9. Огромный выбор дизайна.
  10. Выбор расположения кнопок.
  11. Возможно установить плагин.

Недостатки

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

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

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

  1. Pluso.ru

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

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

  2. Share42.com

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

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

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

  3. Tech.Yandex.ru

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

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

Источник: http://BlogoShpora.ru/knopki-sotsialnyih-setey-dlya-sayta/

Как создать социальные кнопки «Поделиться» без сервисов и плагинов 75

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

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

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

Обратите внимание

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

Сервисы, которые я использовал на сайтах клиентов и на своём блоге — Яндекс.Поделиться и PLUSO. Эти сервисы позволяют достаточно легко реализовать поставленную задачу.

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

В чём преимущество собственных социальных кнопок перед сервисами и плагинами

  1. Безусловно, неоспоримым фактором является скорость загрузки сайта. Так, к примеру, сервис PLUSO, который я использую на блоге, при лучшем раскладе прибавляет к загрузке 633 миллисекунды.

А в этом блоке используются лишь необходимые изображения социальных кнопок, объединённые в css спрайты. Все стили сведены к минимуму. Плюс простой каркас html.

  1. Способ, который я предлагаю, не содержит ни одной внешней ссылки. Нет, ссылки есть, но они все будут, как внутренние ссылки. При желании вы всегда можете их закрыть через скрипт. И тогда их вообще не будет видно.
  1. Очень простая установка. Достаточно вставить html код блока в исходный код страницы сайта, загрузить спрайт, добавить css стили и установка закончена. Вам лишь необходимо будет подправить путь к файлу с изображениями кнопок.
  2. Этот пункт скорей и не плюс и не минус в сторону собственного блока социальных кнопок. Фишка в том, что у собственного блока нет счётчика нажатий на кнопки. И это можно посчитать за минус. Но, с другой стороны, есть возможность поставить цели Яндекс.Метрики на каждую кнопку и вы точно будет знать сколько раз нажимали на кнопки и делились вашими статьями в социальных сетях ваши посетители.
  3. Статистика, собираемая сервисами, по вашему сайту больше не будет передаваться третьим лицам.

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

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

Мы же рассмотрим классический вариант, когда кнопки расположены после статьи.

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

Я покажу оба варианта, а вы для себя выберите подходящий.

Вставка блока в исходный код single.php

Открываем административную панель Вордпресс – «Внешний вид»«Редактор»«Одна запись (single.php)».

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

рис.

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

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

А вот и сам html код блока социальных кнопок:

Источник: https://1zaicev.ru/kak-sozdat-socialnye-knopoki-podelitsya-bez-servisov-i-plaginov/

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

Я снова рад видеть Вас! Сегодня Вы узнаете, как сделать и установить красивые кнопки социальных сетей для сайта (блога).

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

А может для тотального контроля над сознанием людей

Важно

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

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

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

Воспользуемся одним из простых способов, обратившись за помощью к сервису share42.com/ru

Второй способ как сделать социальные кнопки для сайта — опубликован недавно!

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

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

Как это сделал я? Под цифрой 1 (Прочее) отмечено поле, в которое путем перетаскивания мышью (зажать ЛКМ) перемещаем иконки. Расставьте их в такой последовательности, в которой Вы хотите их видеть у себя на блоге.

Выбираем из предложенных вариантов. Здесь я убрал галочку с «добавить иконку». Прописал адрес своего RSS – Вы пишите свой адрес.

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

Определите свой тип сайта, у меня WP.

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

В файле single.php необходимо вставить код, но спрашивается куда?.. откройте на своем блоге любую статью, пролистайте весь текст до конца.

На примере, у меня последней является картинка (2) и я хотел бы вставить кнопки после нее! Выделяю мышью слово «Рубрика» — жму Ctrl+C. Открываю исходный код страницы – Ctrl+U.

Вызываю функцию поиска Ctrl+F, вставляю выделенное мною слово «рубрика» — Ctrl+V.

Мне поиск выдает месторасположение искомого слова, смотрите скриншот. У меня это div class postcat. Готово!

Идем обратно к single.php, вводим в поиске Ctrl+F cлово “postcat” и вуаля – готово! Этим делом мы обозначаем месторасположение объекта в самом коде файла single.php, следовательно рядышком и «притулим» готовый код из пункта 5 (смотрите ниже скрин)

Только наш код с сервиса Share.ru нужно ставить после закрывающих тегов/div. По крайней мере так у меня. Вот и все!

Совет начинающим, чтобы найти место где правильно разместить код: для начала вместо кода можно использовать набор букв или цифр, например (rrr) – без скобок… Вставляете в single.

php, в предполагаемом месте – сохраняете и смотрите у себя на блоге в статье где эти буквы вылезли, если не там где надо, тогда легко удаляете их и вставляете в другое место (метод тыка).

Обратите внимание

Ага, если буквы появились там, где надо – можно смело размещать сам код.  Думаю понятно…

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

Как это сделать? Вообще легко, не надо ковыряться нигде, просто копируем код, (на картинке выше под № 6 ) открываем: …/wp-content/themes/Ваша тема/style CSS и в самом низу размещаем код. Сохраняем. Можно проверять!

Теперь Вы знаете все про кнопки социальных сетей для сайта. Установка кнопок социальных сетей дело не такое сложное, скорее познавательное.

Скоро будет ну очень интересная статья — подпишитесь по e-mail, чтобы не пропустить!

На этом всё и до скорого!

Источник: http://inetmi.ru/servisy-i-resursy/knopki-socialnyx-setej-dlya-sajta.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • http://share.pluso.ru/
  • http://share42.com/ru

Источник: http://yrokiwp.ru/cms-wordpress/plagin/soc-buttons/

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

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

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru.

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

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

Важно

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

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

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

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

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

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

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

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

Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше).

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

Совет

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

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

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

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

Html код при этом получается крайне простой:

На всякий случай я добавил 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

* Нажимая на кнопку «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

Подборки по теме

Использую для заработка

Рубрика: Верстаем с нуля, Используем соцсети

Источник: https://KtoNaNovenkogo.ru/html/div-verstka-html/kak-dobavit-na-sajt-blok-knopkami-stranicy-gruppy-socialnyx-setyax.html

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

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

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

Искать как установить на сайт кнопку каждой отдельной соцсети тоже нудно и трудно.

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

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

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

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

Где взять кнопки соц сетей

Есть несколько вариантов для установки кнопок на сайт.

  1. Плагин.
  2. Соцсети сами предоставляют инструкцию по установке своей кнопки. Читайте и делайте.
  3. Использовать сервис, который автоматизирует установку кнопок.

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

Гуляю по интернету, наткнулся на очень интересный сервис Pluso

Чем он мне понравился?

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

Остановимся на этом сервисе и разберемся пошагово, как установить кнопки на сайт.

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

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

Далее настройте внешний вид кнопок – Размер, форму, расположение, с счетчиком или без, фон.

Последний шаг. Копируем код.

Открываем редактор темы wordpress и в файле comments.php вставляем код в самом верху и сохраняем изменения. Проверяем результат. У меня вот так:

Все. Ожидали больше шагов? Простите за разочарование.

Важно

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

При желании можно перед вставленным кодом написать типа: “Поделись интересной статьей с друзьями”.

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

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

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

  1. Круглый комментарий
  2. Юбилейный коммент

Подробнее об условиях читайте здесь.

Похоже пора думать как провести отпуск. Мы с женой планируем съездить к родственникам на черное море. А вы как собираетесь отдыхать летом? Поделитесь в комментариях.

С уважением,
Артем Губтор

Источник: http://royal-site.ru/blogovedenie/knopki-socialnyx-setej-dlya-sajta/

Кнопки поделиться в соцсетях для сайта: как установить и изменить по своему вкусу

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

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

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

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

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

  • Зайдите на сайт Share42.
  • В пункте 1 из трёх представленных вариантов выберите размер иконок, который вам необходим.

 Выберите нужный размер иконок кнопок

  • В списке ниже выберите, какие именно кнопки социальных сетей должны быть на вашем сайте. Чтобы выбрать ту или иную иконку, просто кликните на неё мышкой.

 Выберите социальные сети, которые вам нужны

  • Переходим ко второму пункту. Здесь нас интересует строка «Тип панели с иконками» — необходимо выбрать горизонтальное или вертикальное положение на сайте. Остальное можно оставить по умолчанию.

 Определите необходимые вам настройки

  • В пункте 3 вы можете воспользоваться кнопкой для предпросмотра, посмотреть, как будут выглядеть ваши кнопки поделиться в соцсетях для сайта, и подправить, если что-то не так. Если всё выглядит нормально, то нажмите на «Скачайте готовый скрипт». Файл представляет собой архив с картинкой и скриптом. Разархивируйте его у себя на компьютере в папку «Share42» (папку можно переименовать, но лучше оставить так).

 Просмотрите свои кнопки и скачайте скрипт

  • Переходим к пункту 4, собственно, к установке кнопок на сайт. Подключаемся к сайту с помощью FTP и закачиваем куда-нибудь (лучше в корневой каталог) распакованную ранее папку Share42 со всем её содержимым. В подпункте 3 пункта 4 указываем путь до этой папки на сайте. Если вы оставили папку с названием «Share42» и закачали её в корневой каталог, то просто укажите там https://example.ru/share42/ (где example.ru – это адрес вашего сайта).
  • В подпункте 4 пункта 4 выберите WordPress (если у вас другая CMS, то выберите свою).
  • Возьмите код из подпункта 5 пункта 4 и поместите его в файл своего шаблона, туда, где необходимо вывести кнопки социальных сетей.

 Укажите адрес к скрипту, выберите CMS и возьмите код

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

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

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

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

  • Нарисуйте иконки одинакового размера, расположив их в одном файле в один горизонтальный ряд (вроде того, что ниже). Изображение сохраните в формате .png. и назовите его icons.

 Вот так нужно нарисовать кастомные иконки

  • Загрузите ваше изображение иконок вместо того, что присутствует в папке скрипте (которую мы выше сохранили в корневой каталог).
  • Если размер ваших иконок отличается от того, что была задана скриптом, то отредактируйте скрипт. Откройте его (файл скрипта share42.js) через текстовый редактор (например, NotePad++), и измените следующий фрагмент кода:
[js]style=»display:block;width:XXpx;height:YYpx;margin:0 0 6px;
padding:0;outline:none;background:url(‘+f+fn+’) -‘+XX*j+’px[/js]

Здесь XXpx – это ширина ваших иконок в пикселях, а YYpx – их высота. Также измените ширину обрезки иконок, равную параметру width, то есть тоже XX. При необходимости вы можете покрутить параметр margin, чтобы настроить отступы иконок.

Сохраните изменения в крипте, и проверьте, как выглядят ваши новые иконки.

Источник: https://wp-system.ru/prodvizhenie-sayta/optimizatsiya-sayta/knopki-podelitsya-v-sotssetyah-dlya-sayta/

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

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

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

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

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

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

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

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

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

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

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

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

Итак, вы заходите на сервис SHARE42. Сразу же перед вами возникает картинка (см. скриншот – 1), где вы можете увидеть все кнопки соц сетей, которые можно будет показать на вашем сайте (их 43 штуки). В левом верхнем углу можно будет выбрать размер кнопок социальных сетей для сайта. Будем делать все по пунктам.

Совет

Теперь выбираем нужные вам кнопки социальных сетей: в табличке СОЦИАЛЬНЫЕ СЕРВИСЫ, «зажимаете» левой кнопкой мыши нужную иконку и «перетаскиваете» ее в начало таблички. Иконки, рядом с которыми стоит желтая точка, поддерживают счетчик кликов по ним. После всех манипуляций щелкните на функцию СОХРАНИТЬ КОНФИГУРАЦИЮ, дайте название (например, доменное имя вашего сайта), и сохраните.

Теперь необходимо выбрать нужные вам опции. Я выбрал опции, которые показаны на скриншоте – 2, вы же можете выбрать свои (экспериментируйте).

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

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

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

Есть один нюанс: возможно, что после разархивирования у вас получится две папки со скриптом (одна в другой), так вот – закачивать на хостинг нужно самую последнюю (внутреннюю) папку. БУДЬТЕ ВНИМАТЕЛЬНЫ, иначе скрипт кнопок соц сетей работать не будет.

Затем, в предназначенном окошке укажите путь к установленной папке share42. Не забудьте указать тип вашего сайта (в чек-боксе WordPress).

В нижнем поле необходимо скопировать полученный сгенерированный код и установить его в шаблон темы вашего сайта (ВНЕШНИЙ ВИД –> РЕДАКТОР) в файл single.php (ОДНА ЗАПИСЬ). Необходимо будет попробовать поискать место, куда будет вставлен сгенерированный код, т.к. это место будет определяться особенностями шаблона вашей темы. Не забудьте нажать кнопку ОБНОВИТЬ ФАЙЛ.

Обратите внимание

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

Изменения можно будет сделать в следующих показателях кода: data-top1 (расстояние между началом страницы и панелью кнопок, пх); data-top2 (расстояние между верхней границей видимой области страницы и панелью кнопок, пх); data-margin (смещение панели с кнопками по горизонтали: плюс – вправо, минус – влево, пх).

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

УСТАНАВЛИВАЙТЕ НА СВОИ САЙТЫ КНОПКИ СОЦИАЛЬНЫХ СЕТЕЙ И ПРОДВИГАЙТЕ СВОИ ВЭБ-РЕСУРСЫ В ЭТИХ СЕТЯХ

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

Источник: http://afirewall.ru/skolzyashhie-knopki-socialnyx-setej-dlya-sajta

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

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

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

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

Спасибо www.webdesignerdepot.com и рекомендую к прочтению:

Размещение кнопок по принципу F — модели

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

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

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

Подобный приём можно увидеть на сайте Wall Street Journal. Следует обратить внимание, что кнопки Вы заметите сразу же, и Вам не нужно будет их искать, если захотите поделиться данной статьёй с друзьями. Ну и конечно же, на счётчиках отличные показатели, явно это не просто так.

Простые и узнаваемые формы

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

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

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

Источник: http://beloweb.ru/novichkam/kak-sdelat-knopki-sotsialnyih-setey-kotoryie-rabotayut.html

Ссылка на основную публикацию