Как вызвать кнопку "Мне нравится" в Facebook с пользовательской кнопки?

Question

Я создал пользовательскую кнопку в Facebook.

Как сделать так, чтобы, когда я нажимал кнопку, она вызывала кнопку "Мне нравится", предоставленную Facebook, как показано ниже?

Answer 1

В соответствии с политикой Facebook пункт 4 "Социальные плагины" гласит:

"Не скрывайте и не скрывайте элементы социальных плагинов".

Вы не можете изменить изображение напрямую, потому что оно предоставлено Facebook.

Answer 2

Кнопка Facebook находится в iFrame с источником, который находится в другом домене, домене Facebook, поэтому вы не можете изменить кнопку, поскольку она защищена политикой того же происхождения.

Кроме того, политика Facebook запрещает изменять их кнопки и логотипы при использовании встроенного контента из Facebook, например социальных кнопок.

Таким образом, вы не предполагаете, что сможете менять кнопки FB, и даже если бы вы могли, это противоречило бы Условиям предоставления услуг Facebook.

Но... если вы все еще хотите это сделать, вы можете использовать встроенную кнопку Facebook и положить собственное изображение сверху или ниже кнопки Facebook, чтобы подделать пользовательскую кнопку.

Размещение вашего изображения сверху возможно только в том случае, если вы используете CSS3-события указателя, которые сделают ваше изображение кликом, а событие клика будет работать через ваше изображение и фактически нажмет кнопку Facebook. Это работает только в новых браузерах, которые поддерживают Pointer Events.

Другой вариант - положить изображение за кнопкой FB и установить непрозрачность кнопки FB на ноль.

Я сам использовал это несколько раз, и, немного покопавшись в коде Facebook, вы можете прикрепить события наведения мыши и все остальное, чтобы она выглядела как пользовательская кнопка. Вы должны найти, какие элементы установить opacity : 0 на.

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

Все мои попытки вызвать кнопку FB с помощью javascript или jQuery trigger() потерпели неудачу, но, может быть, кто-то еще придумал, как это сделать?

Answer 3

Когда вы создаете html-элемент с fb-подобным классом, javascript SDK facebook преобразует его с помощью кнопки "лайк" при загрузке документа. Вы можете создать пользовательский элемент и инициировать событие нажатия кнопки "Мне нравится", когда пользователь нажимает пользовательскую кнопку.

Например:

<input type="button" id="mycustombutton" value="Like">
<div style="display:none" class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

Код jQuery:

$("#mycustombutton").click(function(){
      $(".fb-like").find("a.connect_widget_like_button").click();
      // You can look elements in facebook like button with firebug or developer tools.
});

Обновить

Facebook SDK создает кнопку "Мне нравится" в iframe, и браузеры не позволяют вмешиваться в iframe на странице. Я думаю, что добавить слушатель события к элементу в iframe больше невозможно.

Answer 4

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

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

Если, с другой стороны, вы просто хотите получить счетчик одинаковых страниц и отобразить его так, как хотите, вы можете сделать это с помощью запроса "http://graph.facebook.com/#{url}" который вернет полезную нагрузку JSON с количеством лайков. В jQuery это будет:

$.getJSON("http://graph.facebook.com/#{url}", function(data) { alert(data.shares); });

Answer 5

Я думаю, что Facebook проходит долгий путь, чтобы люди не могли нажать кнопку "Нравится". Это сделано для того, чтобы скрипты не нажимали кнопку "Мне нравится" при посещении сайта.

Вы можете изменить его стиль, используя CSS, и вместо этого показать свое изображение.

Answer 6

Вы можете попытаться вызвать запрос Ajax, как это

FB.api(
  'me/og.likes',
  'post',
  {
    object: "http://samples.ogp.me/226075010839791"
  },
  function(response) {
    // handle the response
  }
);

https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes

Answer 7

Вы можете наложить свою кнопку поверх кнопки "Нравится" на Facebook и использовать css, чтобы скрыть кнопку "Facebook". Не уверен в законности этого как бы то ни было.

Answer 8

http://sharingbuttons.io/ позволяет сделать кнопки общего доступа к социальным сетям вообще без javascript (не похожая на кнопку, как в вопросе…). Для Facebook он просто использует такую ​​ссылку:

    <a href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
       target="_blank" aria-label="Share on Facebook">Share on Facebook </a><br>Here on Stackru, you have to cmd + click to open the link in a new window. 

Настройте его с помощью своего собственного CSS и, чтобы имитировать кнопку "Поделиться", просто откройте URL во всплывающем окне вместо target="_blank".