La condivisione FB.ui imposta il titolo, il messaggio e l'immagine

Question

Sto utilizzando FB.ui per condividere una pagina su Facebook e sto cercando di impostare il titolo e il messaggio (immagine se possibile ma non importante). Ho questo nel mio sito intestazione

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

E il mio codice JavaScript viene

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

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

Da quello che ho letto ho solo bisogno di og: titleand og: Descrizione per impostare il titolo e il messaggio, ma quello non sembra funzionare.

Corrente il titolo proviene da una parte del titolo della parte o un tag alt su un'immagine e il messaggio viene popolato da un semplice tag di paragrafo.

Answer 1

I metadati potrebbero essere memorizzati nella cache da Facebook. Prova a inserire il tuo URL nel debugger di Facebook: https://developers.facebook.com/tools/debug/

Questo cancellerà la cache.

Per uso questa immagine:

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

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

Answer 2

Tom, ho avuto lo stesso problema e alla ricerca di una soluzione che ho trovato il tuo post. Forse l'hai risolto ma volevo condividere ciò che ho trovato nel caso in cui potesse essere utile per altre persone. I documenti di Facebook dicono che il metodo "share" ha solo parametro href, ma ho scoperto che non è vero. Puoi usare parametri molto simili al metodo "feed". Questo è quello che ho usato e funziona:

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

Ho trovato questo post e ho cercato di implementare i passaggi di cui sopra. Dopo aver perso qualche ora ho visto il commento di @SMT sopra ...

Non ho più funzionato nella v2.10.

Il mio cliente era già in attesa di questa funzione, quindi ho dovuto trovare una soluzione alternativa. Nota: ho scritto questa soluzione per WordPress, quindi è possibile modificare alcune righe per farlo funzionare sul tuo sito.

Cominciamo con il mio codice HTML un involucro contenente l'immagine e il pulsante:

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

Nel mio codice JS aggiungo l'URL dell'immagine come parametro per l'URL che voglio condividere :

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

Il passaggio successivo consiste nel gestire il parametro URL. Questo codice è per WordPress e WordPress SEO di YOAST ma puoi semplicemente cambiarlo per lavorare con il tuo CMS. Aggiungi questo al vostro 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'idea generale è quella di creare un URL individuale per ogni immagine che cambia solo i parametri OG così Facebook deve raschiare ciascuno di essi singolarmente. Per evitare problemi di SEO dovresti avere un tag canonico nell'intestazione che punta all'URL originale. Ecco lo complete article.

Answer 4

Il codice che si sta utilizzando è obsoleto. È possibile utilizzare il seguente dialogo quota con gli attributi sovrascritti in modo dinamico:

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

Per un esempio di lavoro dettagliato, checkout: http://drib.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript.

Se si condivide una pagina Web (con og meta tag) su Facebook e si aggiorna il titolo e la descrizione ecc. In seguito, non verranno aggiornati istantaneamente su Facebook poiché memorizza nella cache la pagina Web e ritira la pagina dopo 2 giorni .

Quindi, se si desidera aggiornare istantaneamente il titolo, la descrizione, ecc. Su Facebook, sarà necessario ritagliare nuovamente la pagina Web utilizzando lo strumento Facebook debug.

Answer 5

Questo funziona per me dal 2018-01-01, utilizzando il metodo share-open-graph. Funziona, ma sembra essere magico e non documentato, quindi caveat 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

Se avete secchio pubblico e ancora non si riesce a condividere la vostra immagine con facebook quindi controllare il vostro backend s3 codice di caricamento delle immagini secchio.

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

Rimuovere ContentType: 'image/jpeg', dai dati Oggetto.