Кнопки «Поделиться», «Tweet» и «Share» с собственным дизайном, facebook, twitter, ВКонтакте

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

Twitter

Начнём с несложного примера:

Твитнуть

Текст и URL — два основных параметра, конечно, их вполне достаточно для создания кнопки, хэштеги например можно спокойно добавлять в переменную $text, тем не менее давайте рассмотрим полный список параметров:

url Абсолютный URL с HTTP или HTTPS, будет автоматически сокращён через t.co. Также рекомендуется пропускать его через php-функцию urlencode(). text Текст твита. Должен быть в кодировке UTF-8 и состоять не более чем из 140 символов (с учётом ссылки и хэштегов!). После нажатия на кнопку «Твитнуть» у пользователя будет возможность отредактировать этот текст — также имейте это ввиду. hashtags Список
#хэштегов через запятую без символа «#». via Через что был опубликован твит? Информация будет добавлена в конце твита. Например с помощью @twitterfeed. В передаваемом параметру значении символ «@» указывать не нужно. in_reply_to Ответ на другой твит. В качестве значения параметра нужно указать ID твита, на который нужно ответить. Имя автора, на чей твит мы хотим написать ответ, будет автоматически добавлено в начало твита. related Укажите через запятую аккаунты в Твиттере, которые будет автоматически рекомендовано зафолловить пользователю после того, как он запостит твит.
Раньше я использовал php-функцию для преобразования ссылок через bit.ly, но это значительно тормозило скорость загрузки страниц и я решил не сокращать ссылки на своём блоге.

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

Твитнуть

При нажатии на кнопку «Твитнуть» получаем следующее:

Элементарные социальные share-кнопки

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

{шарь меня полностью} {шарь меня полностью} {шарь меня полностью} {шарь меня полностью} {шарь меня полностью}
JS
Share = { vkontakte: function(purl, ptitle, pimg, text) { url = ‘https://vkontakte.ru/share.php?’; url += ‘url=’ + encodeURIComponent(purl); url += ‘&title=’ + encodeURIComponent(ptitle); url += ‘&description=’ + encodeURIComponent(text); url += ‘&image=’ + encodeURIComponent(pimg); url += ‘&noparse=true’; Share.popup(url); }, odnoklassniki: function(purl, text) { url = ‘https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1’; url += ‘&st.comments=’ + encodeURIComponent(text); url += ‘&st._surl=’ + encodeURIComponent(purl); Share.popup(url); }, facebook: function(purl, ptitle, pimg, text) { url = ‘https://www.facebook.com/sharer.php?s=100’; url += ‘&p[title]=’ + encodeURIComponent(ptitle); url += ‘&p[summary]=’ + encodeURIComponent(text); url += ‘&p[url]=’ + encodeURIComponent(purl); url += ‘&p[images][0]=’ + encodeURIComponent(pimg); Share.popup(url); }, twitter: function(purl, ptitle) { url = ‘https://twitter.com/share?’; url += ‘text=’ + encodeURIComponent(ptitle); url += ‘&url=’ + encodeURIComponent(purl); url += ‘&counturl=’ + encodeURIComponent(purl); Share.popup(url); }, mailru: function(purl, ptitle, pimg, text) { url = ‘https://connect.mail.ru/share?’; url += ‘url=’ + encodeURIComponent(purl); url += ‘&title=’ + encodeURIComponent(ptitle); url += ‘&description=’ + encodeURIComponent(text); url += ‘&imageurl=’ + encodeURIComponent(pimg); Share.popup(url) }, popup: function(url) { window.open(url,»,’toolbar=0,status=0,width=626,height=436′); } };

Счетчик шаринга

В случаях, когда надо вести подсчет количества шаринга страницы для каждой из социальных сетей любым возможным способом, а не конкретной кнопкой, здесь конечно идеальный вариант. Но у меня стояла другая задача, надо было отследить статистику нажатий именно на кнопку шаринга размещенную непосредственно на расшариваемой странице. Далеко не уходя от способа шаринга представленного выше, эта задача была решена табличкой в БД, еще одним параметром функции и простым ajax’ом:
popup: function(url,soc) { window.open(url,»,’toolbar=0,status=0,width=626,height=436′); $.post(‘/social/share’, {social:soc, page:url}, function (data){}); } В моем случае принимающий скрипт достает с URL айдишник записи, заносит в табличку запись и/или увеличивает счетчик на 1 для конкретной социальной сети.

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

Facebook

p[title] Заголовок поста. p[summary] Анонс поста. p[url] Ссылка на пост. Не забываем про функцию urlencode(). p[images][0] Основное изображение поста, вы также можете перечислить дополнительные изображения в параметрах p[images][1], p[images][2] и так далее. Хотел бы заметить, что если вы защищаете изображения от хотлинков через .htaccess, то надо будет добавить все эти социальные сети в исключения, иначе ваши картинки просто не будут отображаться.

Мета-теги Open Graph для сайта

Немного раньше, я упоминал, что помимо ссылки на страницу, для качественного репоста потребуется еще заголовок, описание и картинка. Чтобы не передавать эти данные в ссылках и иметь возможность более удобного управления, стоит воспользоваться специальными мета-тегами. Существуют протокол Open Graph, который позволяет легко и просто указывать для каждой страницы свои параметры репоста. Практически все соц.сети придерживаются этого протокола. До недавнего времени только twitter по своему использовал мета-теги Open Graph, но в последнее время также стал придерживаться общего стандарта. Для передачи необходимых данных о странице достаточно только нескольких тегов, они должны быть прописаны в самом начале – внутри блока head. Выглядеть это будет вот так:

Пример кнопок репостов для соц.сетей

Хоть twitter и начал использовать общие стандарты, все равно стоит прописать для него отдельные мета-теги, такие предосторожности не будут лишними. Самое интересное, что теги, которые относятся только к твиттеру, также может воспринимать и ВКонтакте. В случае, как приведен выше, ВК возьмет данные из тегов, которые находятся ниже в коде. Мета-теги og:image:type, og:image:width и og:image:height не являются обязательными, без них все будет работать, хотя в таком случае facebook может начать слать предупреждения в дебаггере программиста. Еще один момент, на который стоит обратить внимание, это доступность картинок страницы для роботов. Если конкретная страница или только картинка будут закрыты от индексирования в файле robot.txt, то соц. сети могут не взять картинку. Пока я тестировал разные сети, проблему обнаружил с twitter-ом, он категорически отказался использовать, закрытую от индексирования, картинку. Остальные соц. сети так не «капризничали», но ни что не мешает в будущем и им начать придерживаться таких правил. Последнее, о чем стоит знать, при подготовке страницы к репостам, это то, что все соц.сети кешируют данные из мета-тегов open graph. Чтобы обновить кеш, существуют специальные сервисы, практически у каждой, социальной сети. Мне удалось найти для ВКонтакте, Facebook и Twitter. Google plus предоставляет только сервис для валидации мета-тегов. А для Одноклассников вообще ни чего подобного найти не получилось. Если кто-нибудь знает сервисы сброса кеша для этих соц.сетей, то напишите в комментарии, я дополню статью. И как бонус можно засчитать то, что при обычной публикации ссылки в соц. сети, данные из OG мета-тегов, также будут использованы. И на страницах пользователей будет опубликованы красивые ссылки с заголовком, описанием и картинкой. Кроме социальных сетей, open graph мета-теги используют и месседжеры – skype, telegram и тд.

Вконтакте

Сохранить

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

Ну вот и всё, теперь при помощи CSS вы можете придать ссылкам какой угодно вид (например как у меня на блоге).

Смотрите также

Почему не следует использовать стандартные кнопки «Поделиться», «Tweet» и «Share»?
Автоматическое сокращение ссылок через TinyURL на блоге

Официальные кнопки от сайтов Одноклассники и Surfingbird

На примере четырех популярных в рунете и в мире социальных сервисов (Твиттер и ВКонтакте довольно подробно рассмотрены в этой статье, а Гугл+ и Фейсбук в предыдущей) мы разобрали алгоритм вставки кодов кнопочек на сайт Вордпресс. Теперь быстро пробежимся по остальным важнейшим сетям, пользователями которых вполне вероятно могут оказаться ваши читатели.

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

Думаю, вы уже на автомате сориентируетесь, куда вставить первый отрывок (выделенный зеленым):

а куда скриптовый фрагмент:

Возможно, кто-то захочет установить Share Button от сервиса Surfingbird. В таком случае настроить получение кода можно на его официальной странице:

Ежели желаете получить кнопку со счетчиком, вверху нажимаете «With counters». В конструкторе выбираете понравившуюся кнопку, просто щелкнув по ней. В результате снова получаем два куска code. Скрипт (выделен красным):

снова размещаем перед закрывающим BODY, а непосредственно кнопку (предварительно прописав nofollow):

В нужное место страницы.

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.