Кнопка лайк для сайта – Google+1 и Мне нравится от Вконтакте и Facebook — как добавить кнопки лайков в свой сайт

Кнопка «Мне нравится» для сайтов и блогов: дегустация / Habr

Сервис LikeBtn.com вышел из беты и готов к употреблению.

LikeBtn – это кнопка like, виджет позволяющий размещать кнопку «Мне нравится» на вашем сайте или блоге с помощью нескольких строк HTML-кода и проводить анонимное голосование. Приятного аппетита…

Меню
  • 28 стилей.


  • 50 параметров.
  • 11 языков.
  • Генератор кода кнопки.
  • 5-дневный пробный период для каждого нового сайта, в течение которого доступны абсолютно все функции.
  • Проголосовав, пользователи могут поделиться ссылкой в социальных сетях: ВКонтакте, Одноклассники, Twitter, Facebook и т.д.
  • Просмотр статистики по лайкам в личном кабинете.
  • API для получения статистики по лайкам.
  • Внешний вид полностью настраивается через CSS.
  • Можно изменять все тексты и надписи кнопки.
  • Вместе с кнопкой «Мне нравится» вы получаете кнопку «Не нравится».
  • Админ может изменять количества лайков и дислайков в личном кабинете.
  • Позволяет собирать пожертвования
    с помощью кнопок «Отблагодарить рублём» во всплывающем окне, при этом LikeBtn не взимает каких-либо комиссий или процентов с полученных средств.


  • Админ может изменять интервал приёма голосов с IP-адреса.
  • Предоставляется статистика по повторным IP-адресам и голосам.

Если возникли вопросы – загляните в Вопросы и ответы.Модули и плагины для CMS:
WordPress
Joomla
Drupal
Конструкторы сайтов и блоги:
Blogger
WIX
uCoz
Здесь можно запросить разработку плагина LikeBtn под вашу CMS/блог/фреймворк.Мы предлагаем бесплатный пожизненный тариф PRO для некоммерческих веб-сайтов, чья деятельность направлена на благо Земли, сайтам, посвящённым благотворительности, охране окружающей среды и миротворческой деятельности. Подробнее: «План PRO для сайтов благотворительности».

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


LikeBtn.com – Кнопка «Мне нравится» для сайта / Habr

Однажды в системе комментирования, которую использую на проектах, исчезла кнопка «Мне нравится». Соответственно, у посетителей пропала возможность одним кликом без авторизации в социальных сетях и регистрации на сайте оценивать публикации. Приличное количество времени было потрачено на поиск лёгкой кнопки «Мне нравится», которую можно было бы быстро установить на сайт и которая бы не замедляла загрузку страниц. В итоге, было найдено следующее решение, о котором и хочу рассказать вам: http://www.likebtn.com/ru/

Пользуюсь на своих проектах – второй месяц полёт нормальный.

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


  • Вы получаете одну аккуратную кнопку «Мне нравится» вместо кучи кнопок социальных сетей на вашем сайте. Как известно, социальные кнопки отрицательно влияют на время загрузки вашего сайта. Чем больше социальных кнопок на вашем сайте, тем медленнее он грузится, и тем больше посетителей вы теряете. Кроме того, для поисковых систем важнейшим критерием является скорость загрузки страниц вашего сайта. Читать дополнительно: [1], [2]
  • Кнопка «Мне нравится» загружается асинхронно, поэтому не замедляет работу вашего сайта. Читать дополнительно: [1], [2]
  • LikeBtn позволяет оценивать, как всю страницу, так и отдельные элементы на странице.
  • Посетителям не нужно регистрироваться или авторизовываться в социальных сетях, чтобы воспользоваться кнопкой «Мне нравится».
  • Воспользовавшись кнопкой «Мне нравится», пользователи могут поделиться ссылкой в социальных сетях: ВКонтакте, Одноклассники, Twitter, Facebook и т.д.

Возможности


  • Кнопка полностью настраивается с помощью параметров.
  • Доступны встроенные стили.
  • На сайте кнопки есть генератор кода кнопки.
  • Внешний вид полностью настраивается через CSS.
  • Есть возможность перевода на любой язык.
  • Встроенная поддержка следующих языков: русский, английский, немецкий, японский.
  • Имеется API для получения статистики по лайкам.

Кнопка Like для сайта — просто, как лайк-два-три / СоХабр


Как вы уже поняли, речь пойдёт о кнопке «Мне нравится» для сайта. С помощью нашей волшебной кнопочки LikeBtn.com вы можете:
  • Добавить стильную кнопку Лайк на ваш сайт или блог!
  • Получать тысячи лайков и репостов!
  • Получать мгновенную статистику!

Основные возможности


  • Более 30 языков.
  • Более 80 параметров.
  • Генератор кода кнопки.
  • Произвольные тексты.
  • Регулируемый интервал приёма голосов с одинаковых IP-адресов.
  • REST API

Отлично работает и выглядит на мобильных


Темы и стили


Кнопка поставляется с 28-ю готовыми темами, а также предоставляет полный доступ к настройке CSS.

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


Статистика и аналитика


Предоставляются отчёты в реальном времени о лайках и дислайках.

График голосов по отдельной кнопке:

Google Rich Snippets


Кнопка позволяет автоматически добавлять микроразметку на сайт и выводить рейтинг в результатах поиска, что делает ваш сайт привлекательным для посетителей! Подробнее о Google Rich Snippets

Плагины для популярных CMS и блогов


Модули и плагины для CMS:
WordPress
Joomla
Drupal
Конструкторы сайтов и блоги:
Blogger
WIX
uCoz

Плагин для WordPress


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

  • Позволяет добавлять кнопку Like к записям, страницам, комментариям, товарам WooCommerce, активностям и пользователям BuddyPress, форумам bbPress и произвольным типам записей.
  • Сортировка материалов по лайкам.
  • Вывод списка пользователей, проголосовавших за элемент.
  • Виджет понравившихся материалов:
  • Короткие коды для добавления кнопки в запись или страницу, отображения списка наиболее понравившихся материалов, вывода количества лайков и дислайков.
  • Работает на сайтах, полностью закэшированных с помощью WP Super Cache, Quick Cache, CloudFlare и т.д.
  • Расширенные отчёты с указанием географии голосующих:
  • Интеграция с BuddyPress: запись действий голосования в ленту активности BuddyPress; уведомления BuddyPress авторам, за чьи материалы голосуют другие пользователи.
  • Благодаря интеграции с myCRED, плагин позволяет начислять пользователям баллы и бонусы за голосование, а также выводить рейтинг пользователей.

Демонстрация возможностей плагина кнопки Like для WordPress.

Наши клиенты


В день наши кнопки видят более 1 млн. посетителей по всему миру. Среди наших клиентов ресурсы с десятками и сотнями тысяч посетителей в сутки:

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

Тарифы и оплата


Сервис предоставляет 7-дневный триал-период, после которого вы можете продолжить пользоваться тарифным планом FREE или обновиться до платного тарифного плана.

Доступны следующие методы оплаты:

  • PayPal — только для владельцев аккаунтов категории «Личный», поскольку законодательством запрещено юридическим лицам рассчитываться электронными деньгами между собой.
  • РОБОКАССА — банковские карты, WebMoney, Яндекс.Деньги, Qiwi и т.д.
  • 2Checkout — PayPal и банковские карты. Метод оплаты добавлен специально, чтобы позволить владельцам «Бизнес»-аккаунтов PayPal оплачивать услуги сервиса.

Пара слов о 2Checkout.com на тот случай, если тоже решите настроить у себя. Выводить заработанные средства 2Checkout.com позволяет на расчётный счёт организации каждый четверг. Минимальная сумма вывода — 300 долларов. Сервис ещё не на 100% приспособлен для российских предпринимателей: вывод заработанных средств в рублях пока не доступен, можно выводить в долларах или другой валюте (см. Приложение Б). Переводить договор с 2Checkout на русский язык для налоговой и прохождения валютного контроля придётся самостоятельно (или пишите — поделимся, не жалко).

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

Техподдержка


Техподдержка у нас работает через HelpScout. Просто и надёжно. Запросы с форумов поддержки поступают на [email protected], далее попадают в HelpScout и распределяются между операторами техподдержки. Так что пишите…

Заключение


Если есть вопросы, добро пожаловать в Вопросы и ответы

Красивые кнопки «лайков» со счётчиками без планига от Social Likes

Как установить кнопки Social Likes на сайт WordPress

Всем привет! Не так давно я установила себе кнопки социальных сетей со счетчиками, которые выполнены в едином стиле. Хочется отметить, что сервис Social Likes предоставляет возможность установить одним блоком кнопки лайков со счетчиками от самых популярных социальных сетей:  Вконтакте, Одноклассники, Twitter, Facebook, Мой мир,  Google+.

Раньше у меня выводились кнопки Вконтакте, Twitter, Facebook, Google+ в одну строку, но для каждой использовался свой скрипт, который генерировался на официальном сайте. Как добавить такие кнопки Вконтакте, Twitter, Facebook я писала в статьеhttps://inetsovety.ru/kak-dobavit-knopki-vkontakte-facebook-i-twitter/  Сейчас я занялась ускорением блога. Анализируя свой блог на скорость загрузки, я заметила, что загрузка каждой из этих кнопок оказывает влияние на суммарную скорость загрузки страницы. Было принято решение найти альтернативный способ вывода. К сожалению, разновидностей кнопок со счетчиками, да еще и в классическом стиле оформлении не так много.

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

На многих моих сайтах стоят кнопки от share42.com, в частности в статье https://inetsovety.ru/plavayushtaya-panel-knopok-sotssetey/ Но у этих кнопок нет счетчиков. Но мне нравится способ их вывода. На самом сервисе я выбираю оформление кнопок, потом скачиваю архив с двумя файлами, которые потом загружаю на хостинг. Загрузка кнопок осуществляется с моего хостинга. Принцип работы кнопок соцсетей от Social Likes похожий.

Установка кнопок Social Likes

  1. Первым делом переходим на сайт http://sapegin.github.io/social-likes/ru/
  2. Подбираем оформление кнопок. Вариантов оформления несколько. Мне больше всего понравилось классическое оформление. Кстати, кому не нужны счетчики возле кнопок лайков, отключите их. Можно выбрать положение кнопок: горизонтальное, вертикальное и одной кнопкой. Также можно указать, кнопки каких соцсетей будут выводиться.
    кнопки социальных сетей со счетчиками
  3. Посмотреть, как выглядят кнопки можно в самом верху. После того, как Вы определились со стилем кнопок, нажимайте на большую оранжевую кнопку с надписью "Скачать кнопки".
  4. Сделайте резервную копию шаблона перед дальнейшей установкой кнопок.
  5. Нужно распаковать скачанный архив. В нем будет 3 файла. Файлы social-likes.min и social-likes_classic мы будем копировать на хостинг в папку сайта, а из файла index возьмем код вывода кнопок. Тот же самый код показан на сайте Social Likes над кнопкой "Скачать кнопки":
    код установки кнопок Social Likes
  6. Состоит код вывода кнопок из двух частей. Отмеченная цифрой 1 на картинке выше часть кода добавляется в файл header.php до закрывающего тэга шапки </head> . Обратите внимание на следующий момент. Нужно указать правильный адрес к файлам social-likes.min и social-likes_classic, которые Вы загрузили на хостинг. Я эти файлы загрузила в папку social-likes в корневой папке сайта. Соответственно адрес к файлу у меня такой: https://inetsovety.ru/social-likes/. Вот мой код:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>      <script type="text/javascript" src="https://inetsovety.ru/social-likes/social-likes.min.js"></script>  <link rel="stylesheet" href="https://inetsovety.ru/social-likes/social-likes_classic.css" type="text/css" media="screen" />

    Также, если в файле header.php уже есть код с содержанием jquery, то еще раз добавлять его не нужно. Значит библиотека jquery уже подключена.

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

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

  • не правильно указан адрес к файлам;
  • два раза подключается jquery. В одном из бесплатных шаблонов, у меня jquery подключался следующей строкой:
    <script src="http://code.jquery.com/jquery-latest.js"></script>

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

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

С уважением, Виктория – блог inetsovety.ru

Как добавить кнопку "Нравится" с плагином LikeBtn Like Button

Кнопочка «Мне нравится» на WordPress сайте – это хороший способ получить фидбэк на записи, картинки и прочие типы добавленного вами контента. Это быстро, анонимно и позволяет посетителю поблагодарить вас за контент, а вам получить представление о том, что действительно популярно на вашем сайте. Когда-то, такой вид интерактивности был впервые использован на Facebook, и сейчас он любим пользователями хорошо им знаком.

И, если вы решили внедрить на ваш сайт кнопочку «Мне нравится», то для этого в репозитории есть бесплатный плагин, который называется LikeBtn.

Установка LikeBtn Like Button

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

Затем вам нужно будет добавить ваш домен на сайт LikeBtn. Но перед тем, как сделать это, вы должны разместить вашу первую кнопку. Для этого посетите меню “LikeBtn” и откройте в нем вкладку “Buttons”, где вы увидите все доступные типы записей. Выберете что-нибудь, например, «записи» и поставьте галочку в боксе “add button”, после чего вам откроется полный список опций, доступных для кнопочки.

Здесь вы можете выбрать следующие опции:

  • Исключить категории
  • Показывать залогенным или незалогенным пользователям
  • Выбрать стиль оформления
  • Вставить HTML после или до
  • Счетчик
  • Опция «поделиться»
  • Включить всплывающие подсказки
  • Добавить пользовательские иконки

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

Мне нравится обилие предложенных вариантов графики: тут найдется что-нибудь для каждой темы. Сохранив код кнопки, вы можете вернуться на сайт LikeBtn, ввести URL вашего сайта, чтоб включить пятидневную триал-версию с pro-функциями.

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

Функции

Как уже упоминалось выше, этот плагин имеет множество опций и настроек:

  • Позволяет пользователям ставить лайки и дизлайки записям, страницам, пользовательским типам записей и комментариям анонимно.
  • Чтоб ставить лайки, посетителям не нужно регистрироваться или авторизовываться.
  • Нажав кнопочку «Нравится», посетители могут поделиться ссылкой в социальных сетях: Facebook, Twitter и т. д.
  • Добавляйте пользовательские поля «лайки», «дизлайки» и «общий рейтинг» к записям и комментариям (PRO, VIP, ULTRA).
  • Статистика по результатам голосования (PRO, VIP, ULTRA).
  • Шорткод, с помощью которого можно поместить кнопку в тело записи/страницы: [likebtn].
  • Шорткод, с помощью которого в теле записи/страницы можно разместить список контента, набравшего больше всего лайков (PRO, VIP, ULTRA): [likebtn_most_liked]
  • Виджет для показа самого популярного контента (PRO, VIP, ULTRA).
  • Настраиваемое расположение и выравнивание
  • Отображение в зависимости от режима просмотра записи, формата, категории, ID.
  • Внешний вид контролируется CSS-файлом.
  • Встроенные стили
  • Встроенная поддержка некоторых языков
  • Возможность изменять лейблы
  • Возможность собирать пожертвования, используя всплывающие кнопки «Пожертвовать»
  • Доступны все настройки с LikeBtn.com

Цены

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

В итоге:

Плагин LikeBtn Like Button достаточно прост в установке, хотя процесс верификации несколько утомляет, так как я предпочитаю простую активацию с помощью API-ключа. Мне нравится, что есть куча опций кастомизации и графических стилей, так как всегда здорово, когда можно подобрать что-то дополняющее оформление сайта. Если вам хочется создать нечто уникальное для вашего сайта, то этот плагин позволяет вам в итоге получить именно ту функциональность, которая вам нужна.

Еще мне показалось, что тарифных планов как-то слишком много. Парочка тарифных планов на выбор – это хорошо, но 6 разных тарифных плана – это перебор.

Приятно, что если ваш сайт имеет отношение к благотворительности, вы можете получить, бесплатный pro-аккаунт, зарегистрировав ваш сайт и написав email автору плагина. Если вам нужно добавить на сайт кнопку «Мне нравится», то этот плагин вполне может вам подойти.

Страница плагина на wordpress.org

Официальная страница плагина.

Кнопка «Мне нравится/Лайк/Like» на WordPress

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

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

  • Статистика лайков.
  • Использование технологий Ajax (обновляет данные без перезагрузки странице).
  • Совместимость с WP 3.5 и выше.
  • Вывод виджета в сайдбар (самых активных постов).
  • Возможность настроить внешний вид кнопке «Мне нравится» вручную.
  • И многое другое.

После установки и активации перейдите во вкладку «WP-ULike-WP-ULike-Setting» только что созданную плагином. Здесь найдете четыре группы настроек:

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

  1. Общие
  2. Button Type – выбор вида кнопки (текст или иконка).
    Permission Text – сообщение об отсутствии прав ставить лайк.
    Users Login Type – вид оповещения об отсутствии прав ставить лайк в случае разрешения только зарегистрировавшимся пользователям.
    Users Login Text – вид сообщения не зарегистрировавшимся пользователям.
    Format Number – формат числа оценки.

  3. Записи
  4. Темы – выбор темы внешнего вида (сердце, по умолчанию).
    Automatic display – автоматическое место определения кнопки «Лайк».
    Auto Display Position – место вывода кнопки (верху, снизу, верху и снизу).
    Auto Display Filter – фильтр где не нужно выводить.
    Only registered Users – условие, что пользователь должен быть зарегистрирован.
    Logging Method – по какому принципу вычислять голосование (куки, IP и т.д.).
    Show Liked Users Box – показать пользователей, которые поставили лайк.
    Size of Gravatars – размер аватара (связано с параметром выше).
    Number Of The Users – какое количество показывать пользователей, которые поставили лайк.
    Users Like Box Template – шаблон блока пользователей (также связано Show Liked Users Box).
    Delete All Logs – удалить журнал.
    Delete All Data – удалить все данные.

  5. Комментариев.
  6. Эта вкладка аналогична второй только все настройки относятся кнопки в комментариях.

  7. Настроить.
  8. Последняя вкладка отвечает за оформление внешнего вида ручным путем.

Посмотреть Demo

Теперь перейдите во вкладку «Внешний вид-Виджеты» и перетащите в боковую панель новый виджет «WP ULine Widget». Немного измените настройки под себя, пример:

Результат.

И у нас осталась еще последняя вкладка плагина «WP ULike Statistics». Здесь введется журнал по всем лайкам. Вот и все.

Как добавить кнопку Мне нравится Like от Facebook на сайт

Сегодня поговорим о том, как можно добавить на сайт кнопку Мне нравится она же Like от Facebook.

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

Сегодня поговорим о том, как можно добавить на сайт кнопку «Мне нравится» она же «Like» от Facebook.

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

Сначала перейдите сюда: Facebook Developers и заполните форму.

Как добавить кнопку Facebook на сайт

  • поле URL to Like — адрес понравившейся страницы — следует оставить пустым чтобы адресу понравившейся страницы был присвоен адрес страницы, на которой находится кнопка
  • поле Layout Style позволяет выбрать стиль оформления кнопки (со счетчиком голосов или без)
  • поле Show Faces в значении True позволяет отображать аватары пользователей, которым понравился данный сайт или блог
  • в поле Width следует указать ширину плагина в пикселях
  • поле Verb to display отображает название кнопки «Like» или «Recommend» (в русскоязычном варианте «Нравится» или «Рекомендовать»)
  • в поле Font следует выбрать шрифт начертания текста
  • в поле Color Scheme следует выбрать одну из двух предлагаемых схем оформления кнопки: светлую или темную

После заполнения соответствующих ячеек нажмите «Get code» («Получить код»).

Получить код кнопка Facebook

Откроется окно.

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

Код загрузки кнопки Facebook при помощи iframe

В верхней части окна представлен iframe-код, в нижней — XFBML.

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

http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike

на

Например для моего блога конечный вид кнопка «Мне нравится» от Facebook имеет такой:

<iframe scrolling="no" frameborder="0" allowTransparency="true" src="//www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=standard&show_faces=false&width=420&action=like&colorscheme=light&height=35"></iframe>

Код для асинхронной загрузки кнопки Facebook

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

Та же самая кнопка будет иметь вид.

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

А в самом конце HTML документа вставляем такой код:

<script src="//connect.facebook.net/ru_RU/all.js#appId=126659647433111&amp;xfbml=1"></script><fb:like href="<?php the_permalink() ?>" send="false" show_faces="false" font=""></fb:like>

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *