FB.ui Teilen Sie den Titel, Nachricht und Bild

Question

Ich benutze FB.ui, um eine Seite mit Facebook zu teilen und ich versuche, den Titel und die Nachricht (Bild wenn möglich, aber nicht wichtig). Ich habe dies in meinem Website-Header

<meta property="og:title" content="Your title here" /> 
<meta property="og:description" content="your description here" /> 

Und mein Javascript-Code ist

FB.ui({ 
     method: 'share', 
     href: document.URL, 
    }, function(response){ 

     //TODO Proper response handling 
     log(response); 
     if (typeof response != 'undefined') { 
      alert('Thanks for sharing'); 
     } 
    }); 

Von dem, was ich mir nur og muß gelesen haben: titleand og: Beschreibung die Titel und die Nachricht zu setzen, aber das scheint nicht zu funktionieren.

Der Titel stammt entweder aus einem Teil des Teiletitels oder aus einem Alt-Tag in einem Bild, und die Nachricht wird nur aus einem zufälligen Absatz-Tag aufgefüllt.

Answer 1

Die Metadaten werden möglicherweise von Facebook zwischengespeichert. Versuchen Sie, Ihre URL im Facebook-Debugger einzugeben:

Dies wird den Cache löschen.

Für Bild Verwendung dieser:

<meta property="og:image" content="http://yourimage"> 

Facebook recommends using images with a min size of 1200x630 pixels

Answer 2

Tom, ich hatte das gleiche Problem und suchen nach einer Lösung, die ich Ihren Beitrag gefunden. Vielleicht haben Sie es gelöst, aber ich wollte teilen, was ich gefunden habe, falls es für andere Menschen nützlich sein könnte. Facebook-Dokumente sagen, dass "share" -Methode nur href Parameter hat, aber ich habe festgestellt, dass es nicht wahr ist. Sie können sehr ähnliche Parameter wie die Methode "Feed" verwenden. Dies ist, was ich verwendet und funktioniert:

FB.ui(
    { 
     method: 'share', 
     href: 'your_url',  // The same than link in feed method 
     title: 'your_title', // The same than name in feed method 
     picture: 'path_to_your_picture', 
     caption: 'your_caption', 
     description: 'your_description', 
    }, 
    function(response){ 
     // your code to manage the response 
    }); 

Answer 3

Ich fand diesen Beitrag und versuchte, die oben genannten Schritte zu implementieren. Nachdem ich ein paar Stunden verschwendet habe, habe ich den Kommentar von @SMT oben gesehen ...

Ich arbeite definitiv nicht mehr in v2.10.

Mein Kunde hat bereits auf diese Funktion gewartet, daher musste ich einen Workaround finden. Bitte beachten Sie: Ich habe diese Lösung für WordPress geschrieben, also können Sie ein paar Zeilen ändern, damit es auf Ihrer Website funktioniert.

Fangen wir mit meinem HTML-Code ein Wrapper enthält das Bild und die Start-Taste:

<div class="my-image-container"> 
    <img src="http://example.com/image.jpg"> 
    <a href="#" class="fb-share-image">Share</a>'); 
</div> 

In meinem JS Code ich die Bild-URL als Parameter an die URL anfügen möchte ich teilen :

window.fbAsyncInit = function() { 
    FB.init({ 
     appId   : 'YOUR APP ID', 
     status   : true, 
     cookie   : true, 
     version   : 'v2.10'     
    }); 

    $('.fb-share-image').click(function(e){ 
     e.preventDefault(); 
     var image = $(this).siblings('img').attr('src'); 

     FB.ui(
       { 
        method: 'share', 
        href: $(location).attr('href') + '?og_img=' + image, 
       }, 
       function (response) { 

       } 
      ); 
    }) 
}; 

(function(d, s, id){ 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

Der nächste Schritt besteht darin, den URL-Parameter zu behandeln. Dieser Code ist für WordPress und WordPress SEO von YOAST, aber Sie können ihn einfach ändern, um mit Ihrem CMS zu arbeiten. Fügen Sie diese auf Ihren functions.php:

add_filter('wpseo_opengraph_image',function($img){ 
    if(array_key_exists('og_img', $_GET)) 
     return $_GET['og_img']; 
    return $img; 
}); 

add_filter('wpseo_opengraph_url',function($url){ 
    if(array_key_exists('og_img', $_GET)) 
     return $url . '?og_img=' . $_GET['og_img']; 
    return $url; 
}); 

Die allgemeine Idee ist eine individuelle URL für jedes Bild zu erstellen, das die OG Parameter nur verändert, so Facebook jeden von ihnen einzeln kratzen hat. Um SEO-Probleme zu vermeiden, sollten Sie ein kanonisches Tag in Ihrer Kopfzeile haben, das auf die ursprüngliche URL verweist. Hier ist die complete article.

Answer 4

Der von Ihnen verwendete Code ist veraltet. Sie können die folgenden Aktie Dialog mit dynamisch überschrieben Attribute verwenden:

FB.ui({ 
    method: 'share_open_graph', 
    action_type: 'og.shares', 
    display: 'popup', 
    action_properties: JSON.stringify({ 
    object: { 
     'og:url': override_url, 
     'og:title': override_title, 
     'og:description': override_description, 
     'og:image': override_image_url' 
    } 
    }) 
}, function(response) { 
    // Action after response 
}); 

Für eine detaillierte Arbeitsbeispiel Kasse: http://drib.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript.

Wenn Sie eine Webseite (mit og Metatags) auf Facebook teilen und den Titel und die Beschreibung später aktualisieren, werden sie nicht sofort auf Facebook aktualisiert, da sie Ihre Webseite zwischenspeichert und die Seite nach 2 Tagen wieder verschrottet .

Also, wenn Sie den Titel, die Beschreibung usw. auf Facebook sofort aktualisieren möchten, müssen Sie die Webseite erneut mit Facebook debug Werkzeug verschrotten.

Answer 5

Dies funktioniert für mich ab 2018-01-01 unter Verwendung der share-open-graph Methode. Das funktioniert, scheint aber magisch und undokumentiert zu sein, also Vorsicht Coder.

shareOnFB: function() { 
    var img = "image.jpg"; 
    var desc = "your caption here"; 
    var title = 'your title here'; 
    var link = 'https://your.link.here/'; 

    // Open FB share popup 
    FB.ui({ 
     method: 'share_open_graph', 
     action_type: 'og.shares', 
     action_properties: JSON.stringify({ 
      object: { 
       'og:url': link, 
       'og:title': title, 
       'og:description': desc, 
       'og:image': img 
      } 
     }) 
    }, 
    function (response) { 
     // Action after response 
    }); 

Answer 6

Wenn Sie öffentliche Eimer haben und immer noch sind Sie nicht auf Ihr Bild teilen mit Facebook dann Code Backend s3 Eimer Bild-Upload überprüfen.

var data = { 
    Bucket: bucketName, 
    Key: fileName, 
    Body: buf, 
    ContentEncoding: 'base64', 
    ContentType: 'image/jpeg', 

}; 
s3Bucket.putObject(data, function(err, data){ 
    if (err) { 
     console.log(err); 
     console.log('Error uploading data: ', data); 
     callback(err); 
    } else { 
     console.log('succesfully uploaded the image!'); 
     callback(null,""); 
    } 
}); 

Entfernen Sie ContentType: 'image/jpeg', aus dem Datenobjekt.