Не клюет? И средств на прикормку посетителей уже много потратили. А кнопки социальных сетей для сайта установили? Понятно! Все симптомы заболевания на лицо – асоциальность сайта. Будем лечить.
Зачем сайту нужны кнопки социальных сетей?Наличие на страницах сайта социальных кнопок является не только обязательным атрибутом, или модным аксессуаром. Прежде всего, социальные кнопки помогают владельцу ресурса экономить средства на раскрутке сайта. При этом продвижение происходит с помощью посетителей. А владельцу остается лишь наполнять свой сайт качественным контентом и ждать притока новых пользователей:
Но эти кнопки нужны не только владельцам сайтов. Их размещение важно и для самих социальных сетей. Каждая из этих кнопок является ссылкой, ведущей на социальный портал. А благодаря такому обмену ссылками поддерживается высокий уровень пользовательской активности внутри самих социальных сетей. Именно поэтому популярные социальные сети и предоставляют сайтам уже готовые коды своих кнопок.
Что представляет собой обычная социальная кнопка?Для примера возьмем скрипт социальной кнопки ВКонтакте. Ее код:
Эту часть кода нужно разместить в так называемой «шапке » страницы сайта. В этом коде указан адрес скрипта, который должен выполняться при нажатии на социальную кнопку. Вот вторая часть кода, которая отвечает за отображение картинки кнопки:
Второй кусок кода нужно поместить в той части страницы, где будет отображаться кнопка:
Внешний вид кнопки можно легко скорректировать. Для этого нужно зайти в специальный раздел технической поддержки на сайте социальной сети. Здесь можно задать стиль кнопки, согласно которому и будет сгенерирован ее код. Варианты легкого размещения
Существуют специализированные сервисы, позволяющие размещать на своем сайте кнопки сразу всех популярных социальных сетей. Это намного легче, чем вставлять скрипты каждой из них по отдельности. Рассмотрим наиболее популярные из этих сервисов:
- AddThis – данный сервис обладает англоязычным интерфейсом. Но в тоже время позволяет добавить кнопку любой социальной сети мира:
Место расположения панели социальных кнопок можно выбрать на нескольких шаблонах. В бесплатной версии аккаунта доступна выдвигаемая боковая панель. Также есть бесплатная версия плагина для WordPress . После прохождения регистрации на сайте сервиса предоставляется доступ к статистике переходов по социальным кнопкам.
- Share42 – понятный и простой интерфейс с возможностью «тонкой» настройки внешнего вида панели социальных кнопок. При этом процесс настройки сопровождается пошаговыми инструкциями с описанием действий, которые необходимо осуществить. Поэтому сервис подходит даже для не опытных вебмастеров:
Еще одним плюсом данного сервиса является генерация скрипта панели социальных кнопок с поддержкой нескольких популярных CMS . Социальные кнопки и WordPress
Для популярных CMS создано множество плагинов групповой установки социальных кнопок. Рассмотрим пример установки плагина Social Share Buttons for WordPress .
Положительными сторонами этого расширения является полностью русскоязычный интерфейс, простота настройки и «заточенность » под популярные социальные сети Рунета:
Порядок действий при установке плагина социальных кнопок для WordPress .
1) Заходим в административную панель сайта. Слева выбираем вкладку «Плагины
», «Добавить новый
».
2) На странице «Установить плагины
» в поисковое поле вводим название расширения и нажимаем на кнопку «Поиск плагинов
»:
3) В результатах поиска находим имя нужного расширения. После чего нажимаем на ссылку «Установить»:
4) После загрузки архива и установки активируем плагин нажатием соответствующей ссылки:
5) После его активации в левой консоли инструментов появится новый раздел «Share Buttons »:
Еще несколько проверенных плагинов для WordPress :
- Fixed Social buttons – этот плагин позволяет добавить на сайт плавающую социальную панель, которую можно «прилепить» сверху, снизу или сбоку;
- Html Social share buttons – данный плагин включает в себя социальные кнопки, созданные исключительно с помощью css и html.
Под этот движок также создано много плагинов для работы с социальными кнопками. Рассмотрим процесс установки расширения на примере SocButtons . Особенности этого плагина:
- Поддержка всех наиболее популярных версий движка;
- Простота настройки;
- Характеристики внешнего вида задаются для каждой кнопки отдельно;
- Малый вес инсталляционного пакета.
Порядок действий:
1) Заходим в административную часть сайта на Joomla
и выбираем значок «Менеджер расширений
».
2) Здесь определяемся с источником для загрузки расширения:
3) После инсталляции расширения переходим в «Менеджер плагинов » и активируем только что установленное расширение. Для этого нужно нажать на зеленый значок вверху страницы:
4) Для настройки нажимаем на имя расширения в списке. В данном плагине настройки отображения задаются для каждой социальной кнопки отдельно:
Еще несколько проверенных расширений для Joomla:
- Social Bookmarking – данный плагин существует сразу в нескольких версиях. Каждая позволяет расположить социальную панель в определенном положении (горизонтально, вертикально, или вообще сделать ее плавающей );
- JL Like – этот плагин не производит дополнительную загрузку внешних скриптов, позволяет вести статистику голосов из социальных сетей.
Установка плагина является самым простым и быстрым вариантом. Чаще всего после его инсталляции весь сайт работает исправно. Но все может разрушиться сразу после обновления версии движка на более новую.
Если вы боитесь, что за вами наблюдают в интернете — выключите компьютер.
К аждый вебмастер, рано или поздно, задумывается над установкой социальных кнопок на свой сайт. Ведь сейчас без социальных сетей некоторые люди не представляют своей жизни, зачем обделять их возможности в шаринге ваших статей? Но со временем многие сервисы социальных кнопок теряют рассудок и творят что хотят со своими кодами, запихивая туда всё что не нужно. Именно по этой параноидальной идеи в этой статье вы найдете коды самых чистых кнопок шаринга социальных сетей для вашего сайта.Ни для кого не секрет, что почти все сервисы соц.кнопок сливают инфу о ваших пользователях куда понадобится. О Боже! Не может быть! Я только что про это узнал! — Поздравляю! Им же нужно как-то пользоваться вами, за их труд и за старания. Они сделали хорошие сервисы, с большим функционалом, удобством и «качеством». Вам стоит только выбрать что нужно, и поставить код куда надо. И все. А какая им выгода задаром делать такие маневрирования в интернете? Правильно. Никакой. Вот и время от времени каждая такая контора и палится на сливе данных в какую-нибудь DMP.
Я не буду описывать каждый из таких сервисов, все они имеют хороший функционал, некоторые уникальные фишки, но представлять их по отдельности — не имею желания. Составил небольшой список ниже.
Список самых популярных сервисов социальных кнопок для сайта- share.pluso.ru
- uptolike.ru
- tech.yandex.ru/share
- share42.com
- sharethis.com
- pip.qip.ru
- www.addtoany.com
- www.po.st
- www.addthis.com
- sharebuttons.com
Если у вас не хватает времени, или вам лень делать больше чем пару движений кистей рук и фаланг пальцев, то вы смело можете пользоваться этими сервисами. Они великолепно подходят для сайтов, также как и для посетителей. Но 100% безопасность данных пользователей, 100% работы их DNS и загрузки ваших сайтов не гарантирует никто. Т.е. если произошел сбой на серверах соц.кнопок, то ваши сайты будут загружаться медленнее, чем обычно. Да это бывает редко, но бывает. Вы конечно же можете поставить асинхронную загрузку этих скриптов, оптимизировать их работу, но это уже больше чем пару движений, о которых я писал для ленивых.
Конечно в интернете есть коды соцок, которые ставятся внутри вашего сайта и никуда информацию не сливают, но многие из них содержат внешние ссылки на эти же социальные сети. Вебмастера не любят внешних ссылок и по этому, для самых параноидальных вебмастеров я собрал готовые коды на базе скрипта goodshare.ru, за что им собственно и спасибо.
Пример установки этого кода не для тех, кто не знает азы HTML или CSS, но если у вас есть руки и немного времени, у вас все получится, если будете идти строго по инструкции. И так поехали:
Выглядят они так:
По стандарту настроены шесть социальных сетей: Facebook, ВКонтакте, Одноклассники, Мой Мир, Google Plus, Twitter. В настройках скрипта их больше 30, но это все устанавливается отдельно по желанию. Плюсы этих кнопок, как заявляют авторы, с чем я полностью согласен:
Что делает сам скрипт, и вообще зачем нужно было делать этот скрипт? В скрипте этих кнопок написаны все API всех соц сетей, и скрипт делает любое место на сайте активным блоком шаринга.
Например, вы можете его поставить на пустые DIV блоки, или Span, или картинки, или пустые ссылки, да практически любой элемент сайта можно превратить в эти кнопки. В моем примере я использовал скрипт на пустые Div.
По поводу картинок: их тут нет. Иконки которые вы видите взяты из шрифта, это просто символ и не более.
Скачать архив кнопок вы можете по .Установка этих кнопок очень проста. В архиве есть всего четыре файла: Шрифт, CSS, JS, и TXT.
1). Шрифт вам нужно загрузить в любую папку на вашем сервере, можете закинуть ее туда-же, где лежат ваши JS или CSS.
2). Затем загрузите JS на ваш сервер, и выведите его на вашем сайте с помощью кода в любом месте, но я рекомендую в самом низу страницы:
Этот скрипт состоит из двух частей, первая — это Jquery, вторая — сам код кнопок. Если у вас уже подключается Jquery на сайте, то вы можете удалить первую часть кода и сократить тем самым размер файла.
ВАЖНО : (для тех, кто убрал часть код Jquery) скрипт кнопок должен загружаться после скрипта Jquery.
3). После установки JS и шрифта, вам следует добавить CSS себе на сайт. Просто скопируйте все содержимое файла soc.css в один из ваших подключаемых CSS на сайте.
ВАЖНО : В 82 строке файла soc.css поменяйте URL на свое местоположение Шрифта!
4). После всего этого, скопируйте HTML код из файла HTML.TXT к себе на сайт, где вы хотите видеть эти замечательные кнопки.
В структуре скрипта есть возможность установки счетчиков шаринга соц.сетей, но более подробнее вы можете почитать у них в документации на сайте.
А саму работу скрипта вы можете проверить чуть-ниже этих строк, ведь именно он установлен у меня на блоге.
Спасибо за внимание, если будут вопросы по установке, пиши комментарии.
С вами был, ленивый Staurus.
Социальные сети отличный инструмент для продвижения своего сайта в интернете. Через соц сети можно настроить колоссальный трафик к своему ресурсу совершенно бесплатно используя распространенный подход - кнопки соц сетей. Кнопки социальных сетей на сайте могут значительно улучшить не только посещаемость, но и взаимоотношения с поисковиками, а соответственно снова же увеличить трафик посетителей.
В этой статье я собрал все возможные способы подключения кнопок социальных сетей для сайта, если вы не найдете нужный именно вам, тогда напишите в комментариях, обязательно добавлю. О каких методах будет рассказано:
Для начала небольшой экскурс в тему, что такое и для чего нужны эти самые кнопки соц сетей для сайта.
Прекрасное видео от сервиса 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. По аналогии вы можете добавить сколько угодно иконок.
