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

StackOverflow https://stackoverflow.com/questions/689295

  •  22-08-2019
  •  | 
  •  

Domanda

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

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

Ora, quando Facebook sta mostrando che mostra alcune miniature nella parte sinistra. Queste immagini sono raccolte dal mio sito web. Come faccio a scegliere una particolare immagine come miniatura o almeno impedire che mostrando miniature?

È possibile controllare con il mio indirizzo del blog .

È stato utile?

Soluzione

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

In particolare, utilizzare 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 come nell'esempio.

Fai clic su "assicurandosi che l'Opere Anteprima"

Nota: I tag possono essere corretti ma Facebook raschia solo ogni 24 ore, in base alla loro documentazione. Utilizzare la pagina di Facebook Lint per ottenere l'immagine in Facebook.

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

Altri suggerimenti

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

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 tua pagina:

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

Facebook utilizza og:tags e il protocollo Open Graph per decifrare le informazioni da visualizzare durante l'anteprima l'URL in un finestra di dialogo condivisione o in un feed di notizie su facebook.

Il og:tags contiene informazioni quali:

  • Il titolo della pagina
  • Il tipo di pagina
  • l'URL
  • Il nome siti web
  • Una descrizione della pagina
  • Facebook user_id 's di amministratori della pagina (su facebook)

Ecco un esempio (tratto dal documentazione facebook ) di alcuni og: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:tags e impostare i loro valori, è possibile verificare come Facebook sarà visualizzare l'URL utilizzando il Facebook Debugger . Lo strumento di debugger metterà in luce le disfunzioni riscontrate con l'og:tags sulla pagina o la mancanza là-di.
Una cosa da tenere a mente è che Facebook non fare un po 'di caching per quanto riguarda queste informazioni, così, al fine di rendere effettive le modifiche vostra pagina avrà t essere raschiato come affermato nella documentazione:

  

Modifica Meta Tag

     

È possibile aggiornare gli attributi della vostra pagina aggiornando la pagina di    tag. 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 tua pagina riceve 10.000 piace il tipo diventa fisso.   Queste proprietà sono fissate per evitare che gli utenti sorprendenti che hanno voluto   Nella pagina già. Modifica del titolo o tipo tag dopo questi limiti   vengono raggiunti nulla fa, la pagina conserva il titolo originale e   tipo.

     

Per le modifiche si rifletteranno su Facebook, è necessario forzare la tua pagina   da raschiare. La pagina viene raschiato quando un amministratore per i clic di pagina   Come il pulsante 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 abbiano 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" />

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

ho avuto gli stessi problemi e credo di aver risolto. Ho usato il link meta tag come accennato qui per puntare alla 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 fissato il mio sito http://gnorml.com/blog/facebook- link-miniature /

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 secondo la vostra immagine a), b) descrizione, c) l'URL, e d) del titolo.

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

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

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.

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 parti di dati nel codice HTML:

  • Titolo
  • Breve descrizione
  • Immagine

Questa compiuta da quanto segue, collocato all'interno del tag 'testa' del codice 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 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 illustrazioni .

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.

Non affiliato a StackOverflow
scroll top