Предупреждение: данная статья, скорее всего, будет интересна только веб-разработчикам, которые интересуются настройкой виджетов различных социальных сетей.
Недавно я занимался настройкой социальных виджетов на сайте и теперь, на основании своего опыта, могу составить рейтинг социальных сетей по удобству настройки их виджетов для разработчика. Сразу замечу, что буду говорить только о like- и share-кнопках, не касаясь комментариев, авторизации и других полезных вещей, так как, кроме виджета комментариев от ВКонтакте, я их не касался.
Ну и уточню, что всё написанное ниже является моим субъективном мнением, основанном на кривости рук при настройке кнопок и комментариев на этом сайте (Kozalo.Ru) и не претендует на звание истины в последней инстанции. Если я где-то заблуждаюсь, прошу написать об этом в комментариях.
1. ВКонтакте
Виджеты этой отечественной социальной сети я считаю лучшими из всех, опробованных мною. И дело тут не только в патриотизме и русскоязычной документации. Чтобы использовать виджеты, необходимо создать специальное приложение. Конечно, для некоторых это может быть недостатком, так как требуется иметь аккаунт в VK, но у большинства россиян, пользующихся Интернетом, имеется страничка в популярнейшем ресурсе Рунета. В отличие от Facebook, номер приложения нужно указывать для инициализации почти всех виджетов. Это объединяет платформу и позволяет красиво и удобно управлять самими виджетами. После инициализации платформы, которая состоит из добавления JS-скрипта и вызова одного-единственного метода, можно добавлять виджеты. Кнопка Мне нравится, например, устанавливается созданием контейнера (представляет собой элемент <div> с параметром id), являющимся единственным обязательным параметром метода, создающего кнопку. Вызов самого метода выглядит вот так: VK.Widgets.Like(<id контейнера>). Двумя дополнительными параметрами можно передать объект с настройками отображения и идентификатор страницы, использующийся на динамических сайтах.
Вот так красиво, аккуратно и функционально добавляются виджеты от ВКонтакте. В них настраивается всё и в одной единственной строчке! На мой динамический сайт со сложной JavaScript-навигацией после правильной настройки они встали идеально! И именно поэтому виджеты от популярнейшей российской социальной сети ВКонтакте заслуживают первого места в этом рейтинге.
Подробную информацию об интеграции ВКонтакте на свой сайт можно почитать в разделе "Для Сайтов" официальной русскоязычной документации.
2. Google+
Второе место этого рейтинга я бы отдал кнопке +1 от корпорации Google. Так как никаких других виджетов, кроме этой кнопки, Google не предлагает, то и никакого приложения создавать не нужно. Вариантов кода, который надо добавить на веб-страницы, Google предлагает много. Можно обойтись двумя строчками: одной подключая JS-скрипт, другой добавляя контейнер, используя непонятный мне тэг <g:plusone>, который, впрочем, можно заменить на нормальный <div>. Можно заменить подключение скрипта небольшой JS-функцией, делающей это асинхронно (ВКонтакте, кстати, тоже есть асинхронная версия кода). А можно использовать способ с вызовом метода, как сделано ВКонтакте. В отличие от последнего, Google предлагает целых две функции. Одна из них может отобразить все кнопки +1 на странице, но не поддерживает передачу параметров виджету. Параметры, которыми настраивается отображение, вызовы обратных функций, адрес страницы (необходимо для динамических сайтов), можно передать прямо в контейнере, хотя этот способ мне не так нравится, как передача через параметры метода. На моём сайте использована асинхронная версия кода. И в постах, и в сложном JavaScript-фотоальбоме кнопка работает корректно без каких-либо дополнительных настроек!
Я так много плюсов расписал, что можно было бы дать кнопке +1 первое место в рейтинге. Так что теперь пришло время для ложки дёгтя. В отличие от кнопки ВКонтакте, виджет от Google не принимает в параметрах заголовок и текст сообщения, которое будет опубликовано в Google+ при нажатии кнопки "Поделиться". Google предлагает использовать какой-то +снипет (или +фрагмент, как написано в документации). Сразу настроить его у меня не получилось, а разбираться не захотелось, потому что куда проще переадресовать виджет на лёгкую версию сайта, откуда он сможет спарсить <title> и <meta name="description">, чтобы подставить их значения как заголовок и текст соответственно.
Подводя итог, могу сказать, что кнопка +1 сделана качественно. Всё красиво и функционально, есть много способов добавления. Единственный, но серьёзный недостаток, из-за которого она получает лишь второе место - использование каких-то +фрагментов вместо прямой передачи текста в параметрах.
Получить код для кнопки можно с помощью специального конструктора. Также имеется подробная официальная русскоязычная документация.
3. Facebook
Третье место достаётся кнопке от Facebook. У её документации есть серьёзный недостаток - отсутствие русского языка. Но мы оцениваем качество виджетов, а не языковые предпочтения их разработчиков, так что этот аргумент не учитывался при составлении рейтинга. Но из него прямо вытекает, что я мог чего-то не учесть при настройке и составить неправильное мнение о виджете, так как переводил только описания параметров.
Как и у ВКонтакте, у Facebook, кроме кнопки Мне нравится, есть и другие виджеты. Но в отличие от первого, связывание кнопки с приложением вовсе не нужно. Так что необязательно иметь аккаунт в Facebook, чтобы установить их кнопку. Это, конечно, плюс. Виджет предлагают добавить четырьмя способами. Ну как четырьмя. Лично я не представляю, где можно использовать адрес на HTML-документ с кнопкой, кроме IFrame-элемента, который и так является одним из вариантов. Но и остальные варианты не совсем равнозначны. Я не использовал способ, обозначаемый непонятными мне буквами XFBML, но думаю, что результат аналогичен варианту с HTML5-разметкой. IFrame-версия позволяет только добавить "лайк", тогда как HTML5-версия предлагает разместить сообщение в Facebook с ссылкой на страницу. Для уточнения информации о размещаемой странице, используется аналог +фрагмента - Open Graph. Что, как и у Google, является минусом. Но никакого описания виджет разместить не предлагает, так что мне хватило данных, которые он смог самостоятельно спарсить. Осталось только добавить, что настройки передаются через параметры контейнера (HTML5) или в адресе (IFrame).
Давайте обобщим всё вышесказанное. Виджет хороший, но не везде удаётся нормально поставить HTML5-версию, из-за чего приходится использовать урезанную, через IFrame, что видно по фотоальбому на основной версии этого сайта. Ну и опять же, вместо удобной передачи информации о странице параметрами, используется какой-то Open Graph. Но третье место виджет-кнопка получает вполне заслуженно.
Подробную информацию о настройке кнопки Мне нравится от Facebook можно почитать в официальной англоязычной документации.
Примечание: несмотря на то, что мы не рассматриваем виджеты, отличные от кнопок, хотелось бы всё-таки отметить странность в конструкторе виджета комментариев. В получаемом там коде ничего не говорится о приложении, с которым надо связать виджет. Но это всё-таки необходимо, ведь виджет должен как-то опознавать администраторов сайта, которые должны модерировать комментарии. Сам я не проверял, но люди пишут, что без указания номера приложения и идентификатора администратора комментарии вообще работать не будут. Возможно, в самой документации что-то об этом и написано, но всё равно странно, что в конструкторе не предлагается добавить нужный код в "шапку" (тэг <head>) сайта.
4. Твиттер
Для создания кнопки Твитнуть можно воспользоваться переведённым на русский язык конструктором, но более подробная документация всё равно доступна только на английском языке.
Никаких приложений Твиттер создавать не требует. Но похвастаться разнообразием кода тоже не может. Он предлагает всего один вариант, когда контейнером выступает текстовая ссылка, которая самостоятельно позволяет затвитить ссылку на страницу. Вместе с ней нужно разместить асинхронный код, превращающий её в полноценную кнопку со счётчиком. Параметрами, добавляемыми контейнеру в соответствии с HTML5-синтаксисом, можно указать ссылку на страницу (опять же необходимая функция для динамических сайтов, но, видимо, в этом виджете не распознаются якоря, что очень вредит подсчёту твитов c моего сайта, так как на всех страницах приводится статистика по всему сайту), текст сообщения (что очень хорошо), хэш-тэги, рекомендованных пользователей, размер кнопки. В отличие от кнопки +1, добавленной на мой сайт асинхронным методом, виджет от Твиттера отказывается преобразоваться из ссылки в кнопку в фотоальбоме на основной версии сайта. Поэтому, прочитав частично документацию, мне пришлось создать свою кнопку. Не такую красивую, но работающую, хотя и без счётчика.
Кнопки, только публикующие ссылки, проще в реализации (и даже допускают создания простеньких пользовательских аналогов), чем кнопки, считающие людей, которым понравилась страница, поэтому они по определению не могут получить высокие оценки в этом рейтинге. Да и к тому же мне пришлось делать для всех share-кнопок собственные варианты, что не очень хорошо. Но всё равно, хотя из-за отсутствия выбора добавляемого кода виджет не всегда работает как надо, но даже тогда он предлагает простенькую текстовую ссылку. Учитывая всё это, могу сказать, что четвёртый номер, полученный Твиттером в общем зачёте - очень неплохой результат.
5. Mail.Ru
Тут наконец-то вновь появляется русскоязычная документация. Хотя было бы странно, если бы у русской компании её не было. Но это всё равно мало поможет, потому что разнообразием кода виджет от Моего Мира и Одноклассников не отличается. Опять же предложен всего один вариант. Причём не асинхронный. И работать из моего динамически добавляемого кода виджет отказался. И поскольку текстовая ссылка (да, тут контейнером тоже является ссылка) меня не удовлетворяет, единственной альтернативой не работающим like-кнопкам оказалось создание собственной share-кнопки, которая работает только с Моим Миром. Вот из-за этого серьёзнейшего недостатка кнопки от Mail.Ru получают позорное последнее место в этом рейтинге.
Но есть ли места, где разработчики виджета всё-таки пошли правильным путём? Да, они оставили возможность передачи информации о странице вместе со всеми остальными настройками через параметры контейнера для like-кнопок или фрагменты URL-адреса для собственной share-кнопки. Ну и никакого приложения, кстати, тоже не требуется.
В отличие от остальных, о виджете от компании Mail.Ru я не могу сказать, что он хороший. Мне пригодился только адрес, на который надо перенаправлять пользователя, чтобы разместить ссылку в Моём Мире. Его разработчикам надо задуматься над тем, чтобы предлагать больше вариантов кода для установки их кнопок. Ну или хотя бы заменить текущий вариант асинхронным. Без этого, увы, могу дать только последнее, позорное место в рейтинге социальных виджетов.
Получить простейший код для кнопок можно в конфигураторе. А более подробная информация доступна для чтения в виде официальной русскоязычной документации.
Твитнуть
