it-swarm.com.de

Wie löse ich Facebook-Like-Button vom benutzerdefinierten Button aus?

Ich habe einen benutzerdefinierten Facebook-Button erstellt.

Custom Like Button

Wie kann ich erreichen, dass beim Klicken auf die Schaltfläche die von Facebook bereitgestellte Schaltfläche "Like" wie die unten abgebildete Schaltfläche ausgelöst wird?

Facebook Like Button

50
Eralph

Gemäß facebook policy zu Social Plugins Nummer 4 heißt es: 

"Verdecken oder verdecken Sie keine Elemente von Social Plugins."

Sie können das Bild nicht direkt ändern, da es von Facebook bereitgestellt wird.

30

Die Facebook-Schaltfläche befindet sich in einem iFrame mit einer Quelle, die sich in einer anderen Domäne, der Domäne von Facebook, befindet. Sie können die Schaltfläche daher nicht ändern, da sie durch die same-Origin-Richtlinie geschützt wird.

Die Facebook-Richtlinie verbietet das Ändern ihrer Schaltflächen und Logos, wenn eingebettete Inhalte von Facebook verwendet werden, z. B. soziale Schaltflächen.

Sie nehmen also nicht an, die FB-Schaltflächen ändern zu können, und selbst wenn Sie könnten, würde dies gegen die Nutzungsbedingungen von Facebook verstoßen.

Aber ... wenn Sie es dennoch tun möchten, können Sie die native Facebook-Schaltfläche verwenden und Ihr eigenes Bild auf oder unter die Facebook-Schaltfläche legen, um eine benutzerdefinierte Schaltfläche zu fälschen.

Das Auflegen Ihres Bildes ist nur möglich, wenn Sie CSS3-Zeigerereignisse verwenden. Dadurch wird Ihr Bild zum Klicken durchgedrückt und das Klickereignis wird Ihr Bild "durchlaufen" und tatsächlich auf den Facebook-Button klicken Browser, die Zeigerereignisse unterstützen.

Eine andere Möglichkeit besteht darin, das Bild hinter die FB-Schaltfläche zu legen und die Deckkraft der FB-Schaltfläche auf Null zu setzen.

Ich habe dies mehrmals selbst verwendet, und mit etwas Nachdenken im Facebook-Code können Sie Hover-Ereignisse und alles andere anhängen, damit es wie eine benutzerdefinierte Schaltfläche aussieht. Sie müssten finden, auf welche Elemente opacity : 0 gesetzt werden soll.

Ich habe noch nie versucht, herauszufinden, wie die Funktion der ursprünglichen Schaltfläche auf einer benutzerdefinierten Schaltfläche funktioniert, aber es ist wahrscheinlich möglich.

Alle meine Versuche, den FB-Button tatsächlich mit Javascript oder jQuery trigger () auszulösen, sind fehlgeschlagen, aber vielleicht hat jemand anderes herausgefunden, wie das geht?

21
adeneo

Wenn Sie ein HTML-Element mit einer fb-ähnlichen Klasse erstellen, konvertiert es das Facebook-JavaScript-SDK mit einem Like-Button, wenn das Dokument geladen wird. Sie können ein benutzerdefiniertes Element erstellen und ein Klickereignis mit einer ähnlichen Schaltfläche auslösen, wenn der Benutzer auf Ihre benutzerdefinierte Schaltfläche klickt.

Zum Beispiel :

<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-Code:

$("#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.
});

Update

Facebook SDK hat eine ähnliche Schaltfläche in einem iframe und Browsern erstellt, die keinen Eingriff in den iframe auf der Seite zulassen. Ich denke, das Hinzufügen eines Ereignis-Listeners zu einem Element in iframe ist nicht mehr möglich.

9
Mesut Tasci

Dies ist aus dem offensichtlichen Grund nicht zulässig, dass dies zu Betrug führen würde. Stellen Sie sich vor, jedes Mal, wenn Sie im Web auf ein Bild geklickt haben, wissen Sie nicht, ob es sich um ein tatsächliches Bild handelt oder ob es zu einem ähnlichen Ergebnis kommt und in Ihrem FB-Feed angezeigt wird. Das wäre katastrophal.

Wenn Sie dies auf legitime Weise tun möchten, müssen Sie eine App erstellen, und der Benutzer muss die App autorisieren, wenn er Ihre Website besucht. Daraufhin öffnet sich ein Popup, in dem der Benutzer zugestimmt hat, dass die App auf sein FB-Konto zugreifen darf. Sobald dies erledigt ist, können Sie die like-Anfrage im Namen des Benutzers über ein serverseitiges Skript senden. Mit anderen Worten, die Mühe lohnt sich nicht.

Wenn Sie andererseits nur die gleiche Anzahl von Seiten abrufen und anzeigen möchten, wie Sie möchten, können Sie dies über eine Anfrage an "http://graph.facebook.com/#{url}" tun, die eine JSON-Payload mit der Anzahl der Likes zurückgibt. In jQuery wäre das:

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

4
aleemb

Ich denke, dass Facebook große Längen durchläuft, um sicherzustellen, dass die Nutzer den Like-Button nicht auslösen können. Dadurch wird verhindert, dass Skripts automatisch auf die Schaltfläche "Gefällt mir" klicken, wenn jemand die Site besucht.

Möglicherweise können Sie den Stil mit CSS überschreiben und stattdessen Ihr Bild anzeigen lassen.

3
Developer

Sie können Ihren Button über dem Facebook-Like-Button platzieren und css verwenden, um den Facebook-Button auszublenden.

2
waggydogtail

Sie könnten versuchen, eine Ajax-Anfrage wie diese auszulösen

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/ erlaubt es, social-Media-Buttons ohne Javascript zu setzen (Kein ähnlicher Button wie in der Frage…). Für Facebook wird ein Link wie folgt verwendet: 

    <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. 

Passen Sie ihn mit Ihrem eigenen CSS an und öffnen Sie die URL in einem Popup-Fenster anstelle eines Ziels = "_ blank", um die Share-Schaltfläche zu imitieren. 

0