Facebook-Share-Button und benutzerdefinierter Text [geschlossen]

93

Gibt es eine Möglichkeit, die Facebook-Freigabeschaltfläche so zu gestalten, dass benutzerdefinierter Text an der Wand oder im Newsfeed veröffentlicht wird?

Neir0
quelle
Mögliches Duplikat des Felds "Nachricht anpassen" auf Facebook Teilen
Mike Lyons

Antworten:

94

Wir verwenden so etwas [in einer Zeile verwenden]:

<a title="send to Facebook" 
  href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
  target="_blank">
  <span>
    <img width="14" height="14" src="'icons/fb.gif" alt="Facebook" /> Facebook 
  </span>
</a>
AllisonC
quelle
4
Wissen Sie, wie Sie diesen Link in einem Popup- oder Modalfenster öffnen können? Ich kann einfach keine Methode finden, die funktioniert. Es ist nicht so einfach wie die Verwendung eines generischen Popup-Fenstercodes ...
tvgemert
1
Effektiver als die Antwort oben.
Mateng
29
@tvgemert: Versuchen Sie <a class="facebook" target="_blank" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer/sharer.php?u=YOUR_URL">Facebook</a>usw.
Mateng
Perfekt, das funktioniert auch für Hashbang-URLs!
dvtoever
73
Das funktioniert nicht mehr.
Chuck Le Butt
30

Um der Facebook-Freigabe benutzerdefinierte Parameter zuzuweisen, ist es besser, nur den Link anzugeben, und Facebook erhält seinen Titel + Beschreibung + Bild automatisch von der Seite, die Sie freigeben. Um der Facebook-API zu helfen, diese Dinge zu finden, können Sie die folgenden Dinge in den Header der Seite einfügen, die Sie freigeben:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Überprüfe hier

Wenn die Seite nicht unter Ihrer Kontrolle steht, verwenden Sie das, was AllisonC oben geteilt hat.

Für das Verhalten des Popup-Modalview-Typs:

Verwenden Sie Ihre eigene Schaltfläche / Ihren eigenen Link / Ihren eigenen Text. Anschließend können Sie einen Popup-Typ mit modaler Ansicht folgendermaßen verwenden:

<script type= 'text/javascript'>
$('#twitterbtn-link,#facebookbtn-link').click(function(event) {
var width  = 575,
    height = 400,
    left   = ($(window).width()  - width)  / 2,
    top    = ($(window).height() - height) / 2,
    url    = this.href,
    opts   = 'status=1' +
             ',width='  + width  +
             ',height=' + height +
             ',top='    + top    +
             ',left='   + left;

window.open(url, 'twitter', opts);

return false;
});
</script>

Dabei sind Twitterbtn-Link und Facebookbtn-Link beide IDs von Ankern.

ShayanK
quelle
Wenn URLs identisch sind, werden die Daten aus Meta-Eigenschaften von Facebook zwischengespeichert? Oder kann ich beispielsweise bei jedem Seitenaufruf einzelne POST-Daten eingeben?
Mateng
Ich habe nicht verstanden, was du damit meinst.
ShayanK
Ich bin gerade darauf gestoßen. Ich habe auf meiner Homepage einen Like / Share-Code, der so eingestellt ist, dass er die mit meinem Unternehmen verknüpfte Facebook-Seite mag / teilt. Es scheint die Facebook-Meta-Tags zu ignorieren, die ich auf der Seite habe. Ist jemand auf dieses Problem gestoßen?
Chris Hawkins
1
Diese Methode scheint nicht mehr zu funktionieren. Ich denke, die einzige Möglichkeit, einen benutzerdefinierten Facebook-Freigabeknopf (mit Ihrem eigenen Text, Titel und Bild) zu erhalten, ist die Verwendung des Facebook-SDK.
Ryan Coolwebs
Tolle Lösung, um es auch modern zu machen, if( window.open(.....) ) event.preventDefault();anstatt nur "false" zurückzugeben; - Auf diese Weise wird nur das Standardverhalten (Link geöffnet) beim Öffnen des Fensters verhindert. - Es wird ein Fallback
bereitgestellt,
12

Verwenden Sie diese Funktion, die aus dem von IJas bereitgestellten Link abgeleitet wurde

function openFbPopUp() {
    var fburl = '';
    var fbimgurl = 'http://';
    var fbtitle = 'Your title';
    var fbsummary = "your description";
    var sharerURL = "http://www.facebook.com/sharer/sharer.php?s=100&p[url]=" + encodeURI(fburl) + "&p[images][0]=" + encodeURI(fbimgurl) + "&p[title]=" + encodeURI(fbtitle) + "&p[summary]=" + encodeURI(fbsummary);
    window.open(
      sharerURL,
      'facebook-share-dialog', 
      'width=626,height=436'); 
    return  false;
}

Sie können auch die neueste FB.ui-Funktion verwenden, wenn Sie das FB JavaScript SDK für eine kontrollierte Rückruffunktion verwenden.

siehe: FB.ui.

    function openFbPopUp() {
        FB.ui(
          {
            method: 'feed',
            name: 'Facebook Dialogs',
            link: 'https://developers.facebook.com/docs/dialogs/',
            picture: 'http://fbrell.com/f8.jpg',
            caption: 'Reference Documentation',
            description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
          },
          function(response) {
            if (response && response.post_id) {
              alert('Post was published.');
            } else {
              alert('Post was not published.');
            }
          }
        );
    }
Bhavesh B.
quelle
Dieses FB.ui ist möglicherweise der zuverlässigste Ansatz. Außerdem können Sie dieses Skript am Ende Ihrer Seite mit dem Rest Ihres Javascript laden und in jquery-Variablen / Selektoren als Werte laden. Vielen Dank für die Veröffentlichung.
Klewis
@ Blackhawk ... aber FB.ui benötigt auch app_id - das ist nicht immer eine Option ... :)
jave.web
@Bravesh B Durchsuchen der Dokumentation zu FB.ui, die Sie verlinkt haben Ich konnte die Parameter, die Sie an FB.ui übergeben, wie Bild, Bildunterschrift, Beschreibung, nicht finden. Können Sie mir sagen, wo Sie sie gefunden haben?
Ferex
@Ferex finden Sie die Parameter hier Developers.facebook.com/docs/sharing/reference/feed-dialog
Bhavesh B
1
Ab dem 18. April 2017 werden die folgenden Parameter von Graph API-Versionen 2.9 und höher nicht mehr unterstützt. Für Versionen 2.8 und niedriger funktionieren die Parameter bis zum 17. Juli 2017.
Goran Jakovljevic
9

Sie haben mehrere Möglichkeiten:

  1. Verwenden Sie die Standardschaltfläche FB Share und legen Sie den Text über die Open Graph API fest und Meta-Tags auf Ihrer Seite fest.
  2. Verwenden Sie anstelle von Teilen FB.ui. " die stream.publish-Methode von FB.ui, mit der Sie zur Laufzeit URL, Titel, Beschriftung, Beschreibung und Miniaturansicht steuern können.
  3. Oder verwenden Sie http://www.facebook.com/sharer.php mit den entsprechenden Parametern.
Kon
quelle
2
Können Sie letzteres näher erläutern? Was sind diese Parameter?
Jeroen Vannevel
6

Sie können das Dialogfeld für die Facebook-Freigabe anpassen, indem Sie das von Facebook bereitgestellte asynchrone JavaScript-SDK verwenden und dessen Parameterwerte einrichten

Schauen Sie sich den folgenden Code an:

<script type="text/javascript">
  $(document).ready(function(){
    $('#share_button').click(function(e){
      e.preventDefault();
      FB.ui(
        {
          method: 'feed',
          name: 'This is the content of the "name" field.',
          link: 'URL which you would like to share ',
          picture: ‘URL of the image which is going to appear as thumbnail image in share dialogbox’,
          caption: 'Caption like which appear as title of the dialog box',
          description: 'Small description of the post',
          message: ''
        }
      );
    });
  });
</script>

Bevor Sie den folgenden Code kopieren und einfügen, müssen Sie zuerst das SDK initialisieren und die jQuery-Bibliothek einrichten. Bitte klicken Sie hier Schritt für Schritt wissen , wie man Satz Informationen auf dem gleichen.

Virat Gaywala - CSM
quelle
3

Dies ist die aktuelle Lösung (Dezember 2014) und funktioniert recht gut. Es verfügt über

  • Öffnen Sie ein Popup-Fenster
  • in sich geschlossenes Snippet, benötigt nichts anderes
  • funktioniert mit oder ohne JS. Wenn JS deaktiviert ist, wird das Freigabefenster weiterhin geöffnet, allerdings nicht als kleines Popup.

<a onclick="return !window.open(this.href, 'Share on Facebook', 'width=640, height=536')" href="https://www.facebook.com/sharer/sharer.php?u=href=$url&display=popup&ref=plugin" target="_window"><img src='/_img/icons/facebook.png' /></a>

$ url var sollte als die URL definiert werden, die freigegeben werden soll.

Aleemb
quelle
Es funktioniert nicht in meinem Fall, in dem meine Seite mit https beginnt ...?
d4v1dv00
1
Diese Antwort ist jetzt ungültig, da Facebook keine anderen Parameter mehr in sharer unterstützt
Vikrant
0

Dies ist ein einfacher Dialog-Feed, den Facebook anbietet. Lesen Sie hier für weitere Details Link

Weltspieler
quelle
-2

Sie können die Idee von AllisonC mit der folgenden window.openFunktion kombinieren : http://www.w3schools.com/jsref/met_win_open.asp

function openWin(url) {
    myWindow = window.open(url, '', 'width=800,height=400');
    myWindow.focus();
}

Und dann rufen Sie bei jedem Link die openWin-Funktion mit der richtigen Social-Net-URL auf.

Txugo
quelle
-3

Versuchen Sie diese Seite http://www.sharelinkgenerator.com/ . Hoffe das hilft.

Ijas Ameenudeen
quelle
3
Dies löst nicht das Problem, bei dem Benutzer nach benutzerdefinierten Titeln / Beschreibungen suchen
Eddie
Mit Ihrer Lösung ist es nicht möglich, benutzerdefinierten Text mit Facebook zu setzen. Bitte geben Sie eine andere Lösung an
RaviPatidar