Как сделать шаринг в соцсети

Добавил пользователь Евгений Кузнецов
Обновлено: 09.09.2024

Single-Page Applications (SPAs) (* одностраничные приложения. Здесь и далее примеч. пер.) работают благодаря визуализации шаблонов на клиентской стороне. Это придает быстродействие опыту взаимодействия пользователя с приложением. Недавно компания Google объявила, что они осуществляют веб-скрейпинг и исполняют код JavaScript так же, как бы это делал обычный пользователь. В результате чего веб-скрейпинг (* вытягивание веб-данных из веб-страниц) сайтов, работающих благодаря фреймворкам для создания одностраничных приложений (Angular, Ember и Vue и т.д.), осуществляется без наказаний со стороны Google.

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

В этом руководстве мы создадим дополнительный модуль для размещения маршрута и воспроизведения шаблона для вашего сервера Express и Node.js, который вы можете использовать с большинством фреймворков для создания одностраничных приложений. Благодаря этому модулю ваш сайт сможет предоставить пользователям возможность осуществления шаринга подробного контента в Twitter, Facebook и Pinterest.

Предупреждаю

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

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

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

Если вы опубликуете новую статью в Facebook и добавите URL (* Uniform Resource Locator - унифицированный указатель [местонахождения информационного] ресурса), то веб-робот Facebook прочитает HTML-код и будет в нем искать мета-теги для протокола OpenGraph. Ниже представлен пример для главной страницы Envato Tuts+ :

При просмотре HTML-кода мы видим в теге head соответствующие теги для создания этого превью:

Pinterest использует тот же протокол (OpenGraph), что и Facebook. Поэтому их механизмы для шаринга контента работают довольно сходным образом.

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

А вот HTML - код для ее создания:

Примечание: GitHub использует прием, подобный тому, что описывается в данном руководстве. Имеется небольшое отличие кода HTML в теге, атрибут name которого имеет значение twitter:description . Мне необходимо изменить название агента пользователя, как показано позже в этом руководстве, чтобы получить соответствующий мета-тег.

Препятствия при воспроизведении контента на стороне клиента

Добавление мета-тегов не представляет трудностей, если вас устраивает добавление только одного заголовка, описания или изображения в социальных сетях для целого сайта. Просто впишите значения мета-тегов прямо в head вашего HTML-документа. Однако, к счастью, вы создаете намного более сложный веб-сайт и хотите, чтобы публикуемый подробный контент в социальных сетях изменялся в зависимости от значения URL-адреса (который, наверняка, устанавливается при помощи HTML5 History API (* позволяет изменять URL веб-сайта без перезагрузки всей страницы), которым манипулирует ваш фреймворк).

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

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

Промежуточное ПО для определения агента пользователя

В Express значение строки UA содержится в объекте запроса req в свойстве user-agent. Я использую регулярное выражение для идентификации различных веб-ботов, которым я хотел бы предоставить альтернативный контент. Мы поместим его в промежуточное ПО. Промежуточное ПО подобно маршрутам, однако для него не требуется путь или метод и в нем (обычно) запрос передается к другому промежуточному ПО или маршруту. В Express маршруты и промежуточное ПО выполняются последовательно, поэтому расположите следующий код выше любого другого маршрута в вашем приложении Express.

Вышеуказанное регулярное выражение осуществляет поиск символов “facebookexternalhit”, “Twitterbot” или “Pinterest” в начале строки UA. Если символы найдены, то значение строки UA выводится в консоль.

Ниже приводится код всего сервера:

Тестирование вашего промежуточного ПО

На панель инструментов устройства введите строку “Twitterbot/1.0” в поле для редактирования значения UA.

Теперь перезагрузите страницу.

В этот момент вы должны увидеть “Serve SPA” на странице, однако при просмотре результата в консоли вашего приложения Express вы должны увидеть:

Twitterbot/1.0 is a bot

Альтернативная маршрутизация

Теперь, когда мы можем определять веб-ботов, давайте создадим альтернативный маршрут. В Express может использоваться множество маршрутизаторов, часто используемых для разделения маршрутизаторов в зависимости от пути. В нашем случае мы собираемся использовать маршрутизатор немного по-особенному. Маршрутизаторы представляют из себя по сути промежуточное ПО, поэтому они принимают объекты req , res и next , как и остальное промежуточное ПО. Идея здесь состоит в том, чтобы сгенерировать другой набор маршрутов с теми же путями.

Если мы протестируем приложение по той же схеме, как и выше, то при указании значением UA строки Twitterbot/1.0 браузер покажет при перезагрузке следующее:

Serve regular HTML with metatags

Тогда как при использовании стандартного UA Chrome вы увидите:

Мета-теги

Как мы рассматривали выше, добавление подробного контента в социальные сети осуществляется благодаря мета-тегам внутри заголовка вашего HTML-документа. Поскольку вы создаете одностраничное приложение, то, должно быть, у вас даже не установлен шаблонизатор. В этом руководстве мы будем использовать jade. Jade является довольно простым языком для написания шаблонов, в котором пробелы и табуляция играют роль и не требуется использование закрывающих тегов. Мы можем установить его при помощи команды:

npm install jade

В исходном коде нашего сервера добавьте ту строку перед строкой app.listen.

app.set('view engine', 'jade');

Теперь мы собираемся добавить информацию, которую хотели бы передавать только веб-боту. Мы изменим nonSPArouter . Поскольку мы установили механизм представления в методе set объекта app, метод res.render будет выполнять визуализацию шаблонов на jade.

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

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

Сохраните шаблон в папку для представлений вашего приложения и назовите его bot.jade . Имя файла без расширения (‘bot’) будет первым параметром метода res.render.

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

Также обратите внимание на то, что я использую промежуточное ПО express.static для передачи изображений из папки /static .

Отладка вашего приложения

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

Для начала вы можете протестировать при помощи инструмента Facebook Debugger. Введите ваш URL-адрес и нажмите 'Fetch new scrape information' (* Получить новую информацию об URL).

Вы должны увидеть нечто подобное:

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

Следующие шаги

Несмотря на то, что Pinterest, Facebook и Twitter составляют крупную долю рынка социальных сетей, у вас может возникнуть желание интегрироваться и с другими сервисами. Некоторые сервисы действительно публикуют названия своих веб-роботов для осуществления шаринга контента в социальных сетях, а некоторые могут и скрывать. Для определения агента пользователя вы можете использовать команду console.log и посмотреть на результат в консоли. Попробуйте сначала сделать это на сервере, не предназначенном для публикации вашего сайта для широких масс, поскольку при определении агента пользователя на высоконагруженных сайтах для этого может быть неподходящий момент. После этого вы можете изменить регулярное выражение в нашем промежуточном ПО, чтобы отследить и нового агента пользователя.

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

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

networkCode наш флаг для определния соц сети, он перечислимого типа.

Надеюсь пригодится кому-нибудь.

база данных facebook, odnoklassniki и vkontakte
как устроены базы данных пользователей. я имею ввиду что как хранятся все фотки,письма и.

Шаринг в соцсетях. Facebook (share42) или дебаггер facebook
Кто сталкивался с данным плагином помогите или расскажите про дебаггер facebook. Установил данный.

Кнопки "Мне нравится" от facebook, google, twitter в своем стиле
Добрый день. Подскажите, пожалуйста, ссылку где объясняется как сделать кнопки от соц сетей в.

Что значит "Facebook, Twitter, and Google+ Cover Photo Sizes" ?
Что значит "Facebook, Twitter, and Google+ Cover Photo Sizes" ? Спасибо.

Шаринг Facebook
Привет. Помогите с шарингом Facebook. Как сделать авторизацию. Где должен быть app id?

Vkontakte vs Facebook
Давайте обсудим кому что нравиться, и почему. Напоминаю vkontakte vs facebook.

Динамическое обновление контента аля Facebook, Vkontakte и прочее
Всем привет! Подскажите в каком направлении почитать / посмотреть. Задача реализовать.

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

Как добавить блок на страницу

Или настроить все вручную.

Поддерживаемые атрибуты

Атрибут	Описание	Возможные значения
data-bare	Признак того, что загрузка стилей отключена. Если добавить атрибут, соцсети будут отображаться в виде текстового вертикального списка.	Наличие или отсутствие атрибута.
data-counter	Признак того, что на кнопке соцсети отображается счетчик публикаций.

Внимание! На кнопке Твиттера счетчик публикаций отображаться не будет — Твиттер больше не поддерживает API с количеством публикаций.

first — кнопка внизу списка;
last — кнопка вверху списка;
hidden — кнопка не отображается.

az — азербайджанский;
be — белорусский;
en — английский;
hy — армянский;
ka — грузинский;
kk — казахский;
ro — румынский;
ru — русский;
tr — турецкий;
tt — татарский;
uk — украинский.

m — большой ;
s — маленький .

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

Как было раньше. Очерки истории

Дата 28.12.2010

Список поддерживаемых сервисов

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

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

Хотелось бы как-то добавить rel="nofollow" . Но не знаю как :(. Может кто-то подскажет?

UPD: Находчивый Georg подсказал в комментах решение этого вопроса :).

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

WebShare API был представлен в Chrome 61 для Andro i d, чтобы пользователи могли использовать возможности своих устройств для обмена веб-приложениями. Сейчас, если мы хотим поделиться страницей в любой социальной сети, то у нас есть отдельные кнопки для каждого сайта: Facebook для публикации в Facebook, Twitter для публикации в Twitter. Выделено красной рамкой:

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

Разработчикам приходится добавлять несколько кнопок, чтобы пользователи могли делиться своими веб-сайтами на разных социальных платформах. Эти кнопки занимают драгоценное пространство экрана. Положение кнопок, нажимая которые пользователи могут делиться ссылками, было определено разработчиками Medium, предоставившими такую возможность только для Twitter и Facebook. А что, если вы хотите поделиться какой-нибудь статьей с пользователем WhatsApp? Тогда придется вручную скопировать и вставить ссылку.

С WebShare API для этого вам нужна только одна кнопка.

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

Сравните: обмен твитами из веб-приложения и скриншот WhatsApp — это одно и то же. Это и есть мощь WebShare.

Эти ограничения введены в целях безопасности, чтобы WebShare нельзя было использовать неправильно.

API предоставляются методом navigator.share . Перед использованием нужно добавить код, проверяющий поддержку WebShare браузером. Если поддержки нет, нужно добавить запасной метод. Проверить это можно с помощью такого кода:

Если поддержки нет, navigator.share содержит undefined

Методы navigator.share принимают объект и возвращают промис. Объект должен иметь хотя бы один из этих ключей:

URL : URL приложения или страницы.
text : описание или любой добавленный к шарингу текст.
title : заголовок страницы.

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

Теперь, когда вы понимаете возможности WebShare, позвольте продемонстрировать базовый пример реализации. Ниже простой HTML, отображающий кнопку с идентификатором share-button :

Ничего сложного! HTML отображает кнопку и включает файл share.js . Давайте посмотрим, что происходит в этом файле:

Как сказано выше, API может быть задействован по клику. Приведенный JS содержит обработчик события click , который сначала проверяет, поддерживается ли navigator.share . Метод navigator.share принимает объект с ключами title , text , URL и возвращает промис. И вот она! Самая простая реализация WebShare.

WebShare в настоящее время поддерживаются Chrome для Android и Safari для iOS. Более полный список поддерживающих браузеров здесь.

Читайте также: