web-dev-qa-db-fra.com

FB.ui share définir le titre, le message et l'image

J'utilise FB.ui pour partager une page sur Facebook et j'essaie de définir le titre et le message (image si possible, mais sans importance). J'ai ceci dans l'en-tête de mon site 

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

Et mon code javascript est 

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

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

D'après ce que j'ai lu, j'ai juste besoin d'og: titleand og: description pour définir le titre et le message, mais cela ne semble pas fonctionner.

Actuellement, le titre provient d'une partie du titre de la pièce ou d'une balise alt sur une image et le message est en cours de remplissage à partir d'une balise de paragraphe aléatoire.

javascriptfacebookfb.ui
7
TMH

Les métadonnées peuvent être mises en cache par Facebook. Essayez d'entrer votre URL dans le débogueur de Facebook: https://developers.facebook.com/tools/debug/

Cela effacera le cache.

Pour l'image, utilisez ceci:

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

Facebook recommande d'utiliser des images d'une taille minimale de 1200x630 pixels

6
intCoffee

Tom, j'ai eu le même problème et à la recherche d'une solution, j'ai trouvé votre message. Peut-être l'avez-vous résolu mais je voulais partager ce que j'ai trouvé au cas où cela pourrait être utile à d'autres personnes. Les documents Facebook indiquent que la méthode "share" ne comporte que le paramètre href, mais j'ai constaté que ce n'était pas vrai. Vous pouvez utiliser des paramètres très similaires à la méthode "feed". C'est ce que j'ai utilisé et fonctionne:

    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
     });
35
Janbalik

Le code que vous utilisez est obsolète. Vous pouvez utiliser le dialogue de partage Suivant avec des attributs remplacés de manière dynamique:

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.shares',
  display: 'popup',
  action_properties: JSON.stringify({
    object: {
      'og:url': 'https://your-url-here.com',
      'og:title': 'Title to show',
      'og:description': 'The description',
      'og:image': 'https://path-to-image.png'
    }
  })
}, function(response) {
  // Action after response
});

Pour un exemple de travail détaillé, consultez: http://drib.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript .

Si vous partagez une page Web (ayant des balises méta) sur Facebook et mettez à jour le titre, la description, etc. ultérieurement, elles ne seront pas mises à jour instantanément sur Facebook car elle met en cache votre page Web et la supprime à nouveau au bout de 2 jours.

Donc, si vous souhaitez mettre à jour instantanément le titre, la description, etc. sur Facebook, vous devez supprimer la page Web à nouveau à l’aide de Facebook debug tool.

18
Faisal Raza

Cela fonctionne pour moi à compter du 2018-01-01, en utilisant la méthode share-open-graph. Cela fonctionne, mais semble être magique, et non documenté, donc avertir le codeur.

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
    });
11
OxC0FFEE

J'ai trouvé ce post et essayé de mettre en œuvre les étapes mentionnées ci-dessus. Après avoir perdu quelques heures, j'ai vu le commentaire de @SMT ci-dessus ...

Je ne travaille définitivement plus dans la version 2.10.

Mon client attendait déjà cette fonctionnalité et je devais donc trouver une solution de contournement. Remarque: j'ai écrit cette solution pour WordPress afin que vous puissiez modifier quelques lignes pour la faire fonctionner sur votre site.

Commençons par mon code HTML Un wrapper contenant l'image et le bouton:

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

Dans mon code JS j'ajoute l'URL de l'image en tant que paramètre de l'URL que je veux partager:

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'));

L'étape suivante consiste à gérer le paramètre URL. Ce code est destiné à WordPress et WordPress SEO de YOAST, mais vous pouvez le changer pour qu’il fonctionne avec votre CMS. Ajoutez ceci à votre 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;
});

L'idée générale est de créer une URL individuelle pour chaque image, qui ne modifie que les paramètres OG, de sorte que Facebook doit les extraire individuellement. Pour éviter tout problème de référencement, vous devez avoir une balise canonique dans votre en-tête pointant vers l'URL d'origine. Voici le article complet .

1
Hannes

Si vous avez un compartiment public et que vous ne pouvez toujours pas partager votre image avec Facebook, vérifiez le code de téléchargement de votre image de seau backend s3.

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,"");
    }
});

Supprimez ContentType: 'image/jpeg', de l'objet de données.

0
radhey shyam