Добавляем кнопку Facebook «Мне нравится. Добавляем виджет «Мне нравится» (Вконтакте) и Facebook Like Button (Фейсбук) на свой блог

Закрытая бета-версия официального клиента Facebook для компьютеров и планшетов на базе Windows 10 получила обновление, которое добавило ей поддержку «реакций» - смайликов, которые могут использоваться для выражения своего отношения к публикации вместо лайка.

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

«Реакции» были анонсированы ещё в прошлом году, в начале этого года Facebook начал их тестировать, а на прошлой неделе они появились в веб-версии социальной сети и мобильных приложениях Facebook на Android и iOS (наиболее приоритетные платформы для Марка Цукерберга и его компании). В ближайшие недели поддержка реакций будет добавлена на прочие платформы, в том числе на Windows Phone, Windows 10 и Windows 10 Mobile.

Что это за «реакции», зачем они появились, для чего они нужны и как их использовать?

Как вы знаете, изначально на Facebook можно было реагировать на публикацию только «лайком» (кнопкой «Мне нравится»). Само собой, у пользователей иногда возникал когнитивный диссонанс - что делать, если тебя затронула публикация, но тебе не нравится то, что в ней описано. Вводить «дизлайк» (кнопку «Мне не нравится») Марк Цукерберг не хотел - вероятно, из-за того, чтобы не давать возможности пользователям выражать негативные чувства. Пользователям, которые не могли заставить себя нажать на кнопку «Мне нравится» под чем-то, что их расстраивало, приходилось оставлять запись без «лайка» или писать в комментариях что-то вроде «Где кнопка „Мне не нравится?“», «Как вы можете ставить лайк такому? Одумайтесь, у вас нет сердца!» или «Совсем не лайк…»

Среди новых «реакций», кстати, действительно, нет агрессивно негативных, получив которые пользователь, разместивший контент, мог бы обидеться на тех людей, которые отреагировали на его запись. Впрочем, как отмечают некоторые пользователи (например, Арсений Фёдоров на Facebook), в итоге команда Facebook перехитрила саму себя и вместо одного «дизлайка» открыла более изощрённые возможности для троллинга людей в соцсети:

Теперь можно, например, ставить «сочувствую» («sad») под сэлфи разных неразумных моделей с надутыми губёнками. Или «ха-ха» под разными слезливыми историями о выброшенных на мороз щеночках и валютных ипотечниках. Или «возмутительно» под смешными картинками.

Все «реакции» на Facebook анимированные. Помимо классического «лайка» появились пять новых эмоций: сердечко, смех, удивление, слезы или возмущение. Они выглядят так:

В русскоязычной версии Facebook они переведены как Мне нравится. Супер! Ха-ха! Ух ты! Сочувствую. Возмутительно.

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

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

Мериться «лайками» теперь бессмысленно, хотя пользователи по-прежнему смогут узнавать, сколько людей «отреагировало» на их записи. Правда, реакции могут быть разнообразными и не всегда положительными. SMM-специалистам отныне придётся биться не за лайки, а за то, чтобы их записи не «заминусовали» гневными, плачущими или недоумевающими «реакциями». Узнать количество «реакций» разных видов довольно просто - нужно кликнуть на их общее число под публикацией. Откроется окно, в верхней части которого будет показано, сколько каких значков вам поставили.

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

Ещё одно нововведение, на котором сейчас сфокусирован Марк Цукерберг и практически вся команда Facebook - запуск сервиса живых видеотрансляций. С прошлого года он тестировался в приложении Facebook для iOS среди жителей США, а на этой неделе был запущен в некоторых странах мира и скоро появится в России. Транслировать видео можно будет только чрез приложения для Android и iOS, а в приложениях для Windows Phone, Windows 10 и Windows 10 Mobile этой функции не будет (по крайней мере в ближайшее время). Впрочем, не станем исключать, что инженеры Facebook трудятся над тем, чтобы такая возможность появилась и на платформах Microsoft.

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

Итак, чтобы установить себе на блог вот такую кнопочку

создаем , затем переходим по , подключаем новый сайт и выбираем нужный вариант кнопки:

Вот этот код нужно вставить внутри тега (в файле header.php):

VK.init({apiId: #######, onlyWidgets: true});

Не забудьте вместо знаков ###### вставить свои индивидуальные номера!

А вот этот код вставьте в то место, где Вы хотите разместить свою кнопку:

VK.Widgets.Like("vk_like", {type: "button"});

Как видите, я разместил эту кнопку после каждой статьи на блоге (файл single.php).

Как добавить кнопку Facebook Like Button

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

Переходим на , видим вот такое окно:

URL to Like – оставляем это поле пустым

Layout Style – стиль счетчика (я выбрал стандартный).

Width – ширина кнопки. Подберите её под свой дизайн (я выбрал 450рх).

Verb to display – какое слово будет отображаться на кнопке: Like (Нравится) или Recommend (Рекомендовать). Я остановился на первом варианте.

Font (шрифт) и Color Scheme (Цветовая схема) выбирайте на свой вкус.

После того, как Вы сделали нужные настройки, нажимаем на кнопку Get Code:

Появится вот такое окно:

Нас интересует код из верхнего поля iframe . Копируем этот код в то место, где Вы хотите видеть кнопку «I like».

Теперь очень важный момент! Если у Вас блог на WordPress, то после

http://www.facebook.com/plugins/like.php?href=

нужно вставить

У меня этот код выглядит вот так:

& layout=

Установить кнопку Мне нравится на свой блог.

После редактирования кода, я должен выбрать место, где желаю видеть кнопку. Здесь существует одно ограничение. Я могу установить ее только после вывода контента, тоесть текста поста. Так как я думаю обеспечить вывод этой кнопки в файле single.php, я ищу код:

& lt; ?php the_content ("" ) ; ?& gt;

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

Итого, кнопка мне нравится установлена на каждой странице с заметками, она активна, к тому же все написано на русском языке, и ничем не отличается от той кнопки “Like”, вывод которой обеспечивается одноименным плагином. Заметил, что кнопка для меня активна, потому взял грех на духу, задумал проверить, как же она работает – нажал на ней.

Ага, Facebook показывает кому моя статья понравилась, но это для проверки, больше я не буду нажимать свои кнопки, ведь это не честно. Но зато я уверен в работоспособности установленной кнопки Мне нравится на моем блоге. Ток что, уважаемые читатели, Вы можете прочитав эту заметку нажать кнопочку, если моя работа Вам понравилась.

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

Представить социальную сеть без заветной кнопки «Мне нравится» сегодня уже невозможно. С ее помощью пользователи могут не только оценивать опубликованный материал, но и делиться им со своими друзьями. Отчасти именно эта кнопка Facebook сделала таким популярным, ведь поднятый вверх палец стал своего рода символом соц.сети.

Зачем нужны «Лайки»?

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

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

Несколько иную функцию носит like в случае его использования на Страницах. Поставив отметку «Нравится» на Странице, вы автоматически становитесь ее подписчиком. А это, в свою очередь, значит, что в вашей Ленте Новостей будут отображаться новые публикации паблика.

Использование «лайков» на внешних ресурсах

В строке «URL to Like» необходимо указать полный адрес страницы сайта, на которой впоследствии и будет размещена кнопка. Поле «Width» предназначено для указания ширины «лайка» в пикселях. Здесь все индивидуально – подбирать нужно под дизайн конкретной страницы. Далее следует опция «Layout», с помощью которой вы можете определить, как будет выглядеть кнопка. На текущий момент доступно четыре варианта: standard, box_count, button_count, button. Заключительной настройкой плагина является поле «Action Type». Вы можете выбрать либо надпись «Нравится», либо надпись «Рекомендовать».

Конечно, установка плагина – задача, требующая определенных навыков у разработчиков. Однако зная основы работы с кодированием, вы с легкостью все сделаете. Более того, при желании вы сможете воспользоваться и другими плагинами Фейсбука, например, кнопкой «Подписаться», возможностью комментирования для посетителей и многое-многое другое.

Кнопка Facebook «Like» позволяет рассказать про статью в самой популярной социальной сети в мире.

Устанавливаем кнопку «мне нравится» для Facebook

Заходим на сайте Facebook в раздел «Like Button ». Либо вручную, внизу страницы заходим в пункт «Разработчикам », выбираем раздел «Web ». На следующей странице заходим в «Integrate Facebook Into Your Website ». Далее, слева в меню выбираем вкладку «Core Concepts », в ней раздел «Social Plugins ». Заходим в пункт «Like Button ».

Заполняем следующую форму:

Значения:

• URL to Like — адрес страницы, которой будут ставить лайки. Лучше оставить пустой, в таком случае автоматически будет подставлен адрес страницы, на которой находится кнопка
• Send Button — дополнительная кнопка, которая позволяет отправить статью друзьям. Лично я убрал ее
• Layout Style — позволяет выбрать стиль кнопки. Попробуйте поменять, пример кнопки сменится автоматически
• Width — ширина кнопки. Однако, сколько я не менял, кнопка оставалась прежней
• Show Faces — если включить, то будут показаны аватарки тех, кто нажал кнопку
• Font — позволяет выбрать шрифт надписи на кнопке
• Color Scheme — выбор между светлым и темным оформлением. По мне, темное вообще не смотрится
• Verb to display — выбираем надпись на кнопке:»Мне нравится» или «Я рекомендую»

После заполнения всех полей нажимаем на кнопку «Get Code». Появляется окно с кодом. Первую часть вставляем в шаблон после открывающегося тега body:

Default

//

// if (d . getElementById (id ) ) return ; js = d . createElement (s ) ; js . id = id ; js . src = "//connect.facebook.net/ru_RU/all.js#xfbml=1" ;