Как вызвать кнопку Facebook как кнопку с помощью настраиваемой кнопки?

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

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

Ответ 1

В соответствии с политикой facebook на странице социальных плагинов 4 говорится:

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

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

Ответ 2

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

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

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

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

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

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

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

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

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

Ответ 3

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

Например:

<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 на странице. Я думаю, что добавление eventener в элемент iframe больше не возможно.

Ответ 4

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

Вы можете переопределить стиль его с помощью CSS и вместо этого показать свое изображение.

Ответ 5

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

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

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

    <a href="#" onclick="location.href='https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io'; return false;"
       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.