Come mostrare un'immagine particolare come miniatura durante l'implementazione della condivisione su Facebook?

Sto cercando di implementare condividere questo metodo. Sto usando il codice come segue

http://www.facebook.com/share.php?u=my_website_url

Ora, quando Facebook sta mostrando, mostra alcune miniature sul lato sinistro. Queste immagini sono prese dal mio sito web. Come posso scegliere una particolare immagine come miniatura o almeno interromperne la visualizzazione?

Puoi verificarlo con il mio indirizzo blog .

Questo post del blog sembra avere la tua risposta: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

In particolare, utilizza un tag come il seguente:

<link rel="image_src" 
      type="image/jpeg" 
      href="http://www.domain.com/path/icon-facebook.gif" />

Il nome dell'immagine deve essere lo stesso dell'esempio.

Fai clic su "Assicurati che l'anteprima funzioni"

Nota: i tag possono essere corretti, ma Facebook esegue lo scraping solo ogni 24 ore, secondo la loro documentazione. Usa la pagina Facebook Lint per caricare l'immagine su Facebook.

http://developers.facebook.com/tools/lint/

Dalle specifiche di Facebook, usa un codice come questo:

<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />

Fonte: Facebook Share

I miei tag erano corretti ma Facebook raschia solo ogni 24 ore, secondo la loro documentazione. Utilizzando la pagina Facebook Lint, l'immagine è stata trasferita su Facebook.

Inserisci qui il tuo URL e FB aggiornerà i metadati dalla tua pagina:

https://developers.facebook.com/tools/debug (collegamento aggiornato)

Facebook utilizza og:tagse il protocollo Open Graph per decifrare quali informazioni visualizzare durante l'anteprima dell'URL in una finestra di dialogo di condivisione o in un feed di notizie su Facebook.

Il og:tagscontengono informazioni quali:

• Il titolo della pagina
• Il tipo di pagina
• L'URL
• Il nome dei siti web
• Una descrizione della pagina
• User_id Facebook degli amministratori della pagina (su facebook)

Di seguito un esempio (tratto dalla documentazione di facebook ) di alcuniog:tags

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

Dopo aver implementato il markup corretto di og:tagse aver impostato i loro valori, puoi testare come Facebook visualizzerà il tuo URL utilizzando Facebook Debugger . Lo strumento debugger evidenzierà anche eventuali problemi riscontrati con il og:tagsnella pagina o la mancanza di esso.

Una cosa da tenere a mente è che Facebook esegue un po 'di memorizzazione nella cache per quanto riguarda queste informazioni, quindi affinché le modifiche abbiano effetto, la tua pagina non sarà raschiata come indicato nella documentazione:

Modifica dei meta tag

Puoi aggiornare gli attributi della tua pagina aggiornando i tag della tua pagina. Nota che og: title e og: type sono modificabili solo inizialmente: dopo che la tua pagina riceve 50 Mi piace, il titolo diventa fisso e dopo che la tua pagina riceve 10.000 Mi piace il tipo diventa fisso. Queste proprietà sono fisse per evitare di sorprendere gli utenti che hanno già apprezzato la pagina. La modifica del titolo o dei tag di tipo dopo che questi limiti sono stati raggiunti non ha effetto, la pagina mantiene il titolo e il tipo originali.

Affinché le modifiche si riflettano su Facebook, è necessario forzare la raschiatura della pagina. La pagina viene raschiata quando un amministratore della pagina fa clic sul pulsante Mi piace o quando l'URL viene inserito nell'URL di Facebook Linter Facebook Debugger ...

Vedo che tutte le risposte fornite sono corrette. Tuttavia, un dettaglio importante è stato trascurato: la dimensione dell'immagine DEVE essere di almeno 200 x 200 px, altrimenti Facebook sostituirà la miniatura con la prima immagine disponibile che soddisfa i criteri sulla pagina. Un altro fatto è che il minimo richiesto è includere i 3 metas richiesti da Facebook affinché l'immagine og: abbia effetto:

<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />

Esegui il debug della tua pagina con il debugger di Facebook e correggi tutti gli avvisi e dovrebbe funzionare a meraviglia! https://developers.facebook.com/tools/debug

Avevo gli stessi problemi e credo di averli risolti. Ho usato il meta tag del link come menzionato qui per puntare all'immagine che volevo, ma la chiave è che se lo fai FB non estrarrà altre immagini come scelte. Inoltre, se la tua immagine è troppo grande, non avrai alcuna scelta.

Ecco come ho corretto il mio sito http://gnorml.com/blog/facebook-link-thumbnails/

Ecco come funziona tutto:

1. È necessaria la possibilità di accedere all'HTML sulla pagina Web specifica che si sta condividendo. Probabilmente funzionerà anche in tutto il sito se utilizzi un file di intestazione comune. Non l'ho provato, ma dovrebbe funzionare. Se lo fai, otterrai la stessa immagine per tutte le pagine.

2. È necessario aggiungere questi meta tag HTML nella pagina in. Non funzionerà se lo metti nel file. Assicurati di personalizzare in base alla tua a) immagine, b) descrizione, c) URL e d) titolo.

Un vero esempio.

<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />

<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />

<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />

<meta property="og:title" content="Coaches Wisdom Telesummit" />

3. Salva
4. Apri un nuovo post di Facebook e riprova la pagina che desideri condividere.
5. Se hai problemi ... puoi eseguire il debug con questo strumento di Facebook. Sembra più geniale di quello che è. Ti dice cosa vede Facebook quando pubblichi nell'URL da condividere.

https://developers.facebook.com/tools/debug/og/object/

Grande suggerimento ... assicurati che le "virgolette" siano le stesse nel tuo HTML (dovrebbero apparire come 2 segni retti e nessuna curva ... a volte i programmi le cambiano con caratteri diversi e il codice viene ingannato.

Condivisione su Facebook: come migliorare i risultati personalizzando immagine, titolo e testo

Dal link sopra. Per la migliore condivisione possibile, ti consigliamo di suggerire 3 pezzi di dati nel tuo HTML:

• Titolo
• Breve descrizione
• Immagine

Ciò si ottiene nel seguente modo, inserito nel tag "head" del tuo HTML:

• Titolo: <title>INSERT POST TITLE</title>
• Immagine: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
• Descrizione: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

Se il tuo sito web è HTML statico, dovrai farlo per ogni pagina utilizzando il tuo editor HTML.

Se stai usando un CMS come Drupal, puoi automatizzarne molti (vedi link sopra). Se usi wordpress, probabilmente puoi implementare qualcosa di simile usando l'esempio di Drupal come linea guida. Spero che tu li abbia trovati utili.

Infine, puoi sempre modificare manualmente i tuoi post condivisi. Vedi questo esempio con le illustrazioni .

Ho anche avuto un problema con un sito su cui stavo lavorando la scorsa settimana. Ho implementato una casella simile e ho testato la casella simile. Quindi sono andato avanti per aggiungere un'immagine alla mia intestazione (ob: meta dell'immagine). L'immagine corretta non è stata ancora visualizzata sulla mia notifica di Facebook.

Ho provato di tutto e sono giunto alla conclusione che ogni singola implementazione di un pulsante Mi piace è memorizzata nella cache. Quindi supponiamo che tu controlli il pulsante Mi piace sull'URL A, quindi specifichi un'immagine nell'intestazione e la provi facendo nuovamente clic sul pulsante Luke sull'URL A. Non vedrai l'immagine poiché la pagina è memorizzata nella cache. L'immagine verrà visualizzata quando si fa clic sul pulsante Mi piace a pagina B.

Per ripristinare la cache, devi utilizzare lo strumento di debug di lanugine menzionato sopra e convalidare tutti gli URL per quelli che sono memorizzati nella cache ... Questa è l'unica cosa che ha funzionato per me.

Il modo più semplice che ho trovato per impostare Facebook Open Graph su ogni articolo di Joomla, è stato quello di inserire in com_content / article / default.php override, codice successivo:

$app    = JFactory::getApplication();
$path   = JURI::root();

$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : 
    $document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
    $document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
 endif;

Questo inserirà meta tag og nella testa con i dettagli dell'articolo corrente.