it-swarm.dev

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

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

Custom Like Button

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

Facebook Like Button

50
Eralph

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

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

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

30
Alexander Nenkov

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

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

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

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

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

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

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

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

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

21
adeneo

Когда вы создаете 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 больше невозможно.

9
Mesut Tasci

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

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

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

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

4
aleemb

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

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

3
Developer

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

2
waggydogtail

Вы можете попытаться вызвать запрос 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

2
sparkle

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 Stackoverflow, you have to cmd + click to open the link in a new window. 

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

0
François Romain