Come mostrare particolare immagine come miniatura, mentre l'attuazione condividi su Facebook?

Ho avuto gli stessi problemi e credo di aver risolto. Ho usato il link meta tag come detto qui per indicare l'immagine che volevo, ma la chiave è che se si fa questo FB non tirerà altre immagini come scelte. Anche se l'immagine è troppo grande, non avrete alcuna scelta a tutti.

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

I miei tag erano corrette ma Facebook raschia solo ogni 24 ore, in base alla loro documentazione. Utilizzando la pagina Facebook Lint ha l'immagine in Facebook.

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

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

Da spec di Facebook, utilizzare un codice come questo:

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

Fonte: Facebook Condividi

Condivisione su Facebook: come migliorare i risultati scegliendo l'immagine, titolo e testo

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

• Titolo
• Breve descrizione
• Immagine

Ciò ottiene quanto segue, collocato all'interno del tag 'testa' del codice HTML:

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

Se il vostro sito web è HTML statico, dovrete fare questo per ogni pagina utilizzando l'editor HTML.

Se stai usando un CMS come Drupal, è possibile automatizzare un sacco di esso (vedi link sopra). Se si utilizza wordpress, probabilmente si può implementare qualcosa di simile utilizzando l'esempio Drupal come linea guida. Spero che abbia trovato questi utili.

Infine, si può sempre modificare manualmente i messaggi di condivisione. Vedere questo esempio con le illustrazioni .

Ho anche avuto un problema su un sito su cui stavo lavorando la scorsa settimana. Ho implementato una scatola come e testato il box come. Poi sono andato avanti per aggiungere un'immagine al mio colpo di testa (l'OB: Immagine meta). Ancora l'immagine corretta non ha mostrato sul mio facebook notifica.

Ho provato di tutto, e sono giunto alla conclusione che ogni singola implementazione di un pulsante mi piace viene memorizzato nella cache. Quindi diciamo che l'orologio del pulsante Mi piace sul url A, quindi si specifica un'immagine nell'intestazione e si prova facendo clic sul pulsante Luca di nuovo sulla url A. Non vedrete l'immagine come pagina è in cache. L'immagine verrà mostrata quando si fa clic sul pulsante Come a pagina B.

Per azzerare la cache, è necessario utilizzare lo strumento di lanugine debugger che è menzionato sopra, e convalidare tutti gli URL per coloro che sono memorizzati nella cache ... Questo è l'unica cosa che ha funzionato per me.

Facebook utilizza og:tagse l' Open Graph protocollo per decifrare le informazioni da visualizzare durante l'anteprima l'URL in una finestra di dialogo 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 di siti web
• Una descrizione della pagina
• Facebook user_id di di amministratori della pagina (su facebook)

Ecco 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"/>

Una volta che avete implementato la corretta marcatura del og:tagse impostare i loro valori, si può verificare come Facebook sarà visualizzare l'URL utilizzando il Facebook Debugger . Lo strumento di debugger metterà in luce le disfunzioni riscontrate con l' og:tagsnella pagina o la mancanza là-di.

Una cosa da tenere a mente è che Facebook fa fare un po 'di caching per quanto riguarda queste informazioni, così, al fine di rendere effettive le modifiche tua pagina avrà t essere raschiato come indicato nella documentazione:

Modifica dei Meta Tag

È possibile aggiornare gli attributi della vostra pagina aggiornando tag della tua pagina. Si noti che og: titolo e og: tipo sono modificabili solo inizialmente - dopo la pagina riceve il 50 piace il titolo diventa fissa, e dopo la pagina riceve 10.000 piace il tipo diventa fisso. Queste proprietà sono fissate per evitare che gli utenti sorprendenti che hanno voluto già alla pagina. Modifica del titolo o tipo tag dopo questi limiti vengono raggiunti non fa nulla, la pagina conserva il titolo originale e tipo.

Per le modifiche si rifletteranno su Facebook, è necessario forzare la tua pagina per essere raschiato. La pagina viene raschiato quando un amministratore per la pagina fa clic sul pulsante Come o quando l'URL viene immesso nella Facebook URL 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 è di includere le 3 metas che Facebook richiede per l'og: immagine per avere 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" />

Eseguire il debug pagina di Facebook debugger e correggere tutti gli avvertimenti e dovrebbe funzionare come un fascino! https://developers.facebook.com/tools/debug

Il modo più semplice che ho trovato per impostare Facebook Open Graph per ogni articolo di Joomla, è stato quello di mettere in com_content / article / Override default.php, 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 metterà tag og meta in testa con dettagli da articolo corrente.

Ecco come funziona tutto:

1. È necessario la possibilità di accedere al codice HTML della particolare pagina web si condivide. E 'probabilmente il lavoro a livello di sito anche se si utilizza un file di intestazione comune. Non ho provato questo, ma dovrebbe funzionare. Avrete solo ottenere la stessa immagine per tutte le pagine, se si esegue questa operazione però.

2. È necessario aggiungere questi meta tag HTML nella pagina del. Non funzionerà se lo metti in. Assicurati di personalizzare la vostra immagine a), descrizione b), c) l'URL, e d) il titolo per.

Un esempio concreto.

<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. Salvare
4. Aprire un post di Facebook fresco, e riprovare la pagina che ha voluto condividere.
5. Se si hanno problemi ... si può eseguire il debug con questo strumento Facebook. Sembra più geek di quello che è. Ti dice ciò che Facebook è vedere quando si registra l'URL da condividere.

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

Big Tip .. assicurarsi che le “virgolette” sono gli stessi nel codice HTML (che dovrebbe essere simile 2 tratti rettilinei e senza curve ... a volte i programmi cambiano questi per diversi tipi di carattere e goofs il codice.