In che modo Facebook Sharer seleziona Immagini e altri metadati quando condivide il mio URL?

393

Quando si utilizza Facebook Sharer, Facebook offrirà all'utente la possibilità di utilizzare 1 di alcune immagini estratte dalla fonte come anteprima per il proprio collegamento. Come vengono selezionate queste immagini e come posso garantire che ogni particolare immagine sulla mia pagina sia sempre inclusa in questo elenco?

facebook  facebook-opengraph  facebook-sharer 
— Sampson
fonte
Funziona davvero quando si utilizza la meta proprietà, ma non è html non valido, che trovo molto strano! Prova a eseguirlo tramite un validatore e vedrai. Mi sconcerta perché sulla terra non riescono a farlo funzionare con HTML valido ??
1
— cope360
3
Suggerimento: dopo aver apportato le modifiche. Esegui la tua pagina attraverso l'interfaccia e Facebook aggiornerà le anteprime, ecc. Per quella pagina developers.facebook.com/tools/lint
Ho trovato anche molto utile il seguente articolo: Come personalizzare quale URL, testo e IMG condividere
— J0ANMM

Risposte:

593

Come faccio a dire a Facebook quale immagine usare quando la mia pagina viene condivisa?

Facebook ha una serie di meta tag a grafico aperto che guarda per decidere quale immagine mostrare.

I tasti uno per l'immagine di Facebook sono:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

e dovrebbe essere presente all'interno del <head></head>tag nella parte superiore della pagina.

Se questi tag non sono presenti, si cercherà il loro metodo precedente di specificare un'immagine: <link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/>. Se nessuno dei due è presente, Facebook esaminerà il contenuto della tua pagina e sceglierà le immagini della tua pagina che soddisfano i suoi criteri di condivisione dell'immagine: l'immagine deve essere di almeno 200 pixel per 200 pixel, avere un rapporto d'aspetto massimo di 3: 1 e in PNG, Formato JPEG o GIF.

Posso specificare più immagini per consentire all'utente di selezionare un'immagine?

Sì, devi solo aggiungere più metatag di immagine nell'ordine in cui desideri che vengano visualizzati. All'utente verrà quindi presentata una finestra di dialogo di selezione delle immagini:
Selettore di immagini di Facebook

Ho specificato i meta tag immagine appropriati. Perché Facebook non accetta le modifiche?

Una volta che un URL è stato condiviso, il crawler di Facebook, che ha un agente utente di facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), accederà alla tua pagina e memorizzerà nella cache le meta informazioni. Per forzare i server di Facebook per cancellare la cache, utilizzare il Facebook URL Debugger Linter strumento / che ha lanciato nel giugno 2010 per aggiornare la cache e risolvere eventuali problemi di meta tag nella tua pagina.

Inoltre, le immagini sulla pagina devono essere accessibili al pubblico al crawler di Facebook. Dovresti specificare l'URL assoluto come http://example.com/yourimage.jpg anziché solo /yourimage.jpg.

Posso aggiornare questi metatag con codice lato client come Javascript o jQuery? No. Proprio come i crawler dei motori di ricerca, lo scraper di Facebook non esegue script, quindi qualunque meta tag sia presente quando la pagina viene scaricata sono i meta tag che vengono utilizzati per la selezione delle immagini.

L'aggiunta di questi tag fa sì che la mia pagina non venga più convalidata. Come posso risolvere questo problema?

Puoi aggiungere gli spazi dei nomi Facebook necessari al tuo tag e la tua pagina dovrebbe quindi passare la convalida:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
— bkaid
fonte
1
Un altro posto sembra: <link rel="apple-touch-icon" href="...">(Ecco come ottiene l'immagine SO)
— Yarin
2
@Yarin Non sono sicuro che sia vero. StackOverflow ha la proprietà image_src impostata, che è quella che sta usando. Il nome del file per l'icona apple-touch è diverso e non viene utilizzato.
— Bkaid,
3
Posso scegliere l'ordine dell'immagine? Nel mio caso, un'altra immagine appare prima dell'immagine dei meta tag.
— vicenrele,
23
La dimensione minima dell'immagine ora è 200x200px.
— Tr1stan,
1
Woot! Ho impostato le dimensioni di img su 300 px, ora sembra funzionare. Grazie @ Tr1stan
— Urs,
37

Quando condividi per Facebook, devi aggiungere il tuo html nella prossima sezione meta tag: 

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

E questo è tutto!

Aggiungi il pulsante come dovresti in base a ciò che FB ti dice.

Tutte le informazioni di cui hai bisogno sono in www.facebook.com/share/

— Matias
fonte
28

A partire dal 2013, se stai utilizzando facebook.com/sharer.php (PHP) puoi semplicemente creare qualsiasi pulsante / collegamento come:

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

Link parametri query:

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

È semplice: non hai bisogno di js o altre impostazioni. È solo un link non elaborato HTML. Stile il tag A nel modo desiderato.

— Antonio Max
fonte
p[images][0]era esattamente quello di cui avevo bisogno. ogi tag funzionano per condividere la stessa immagine ma devo condividere più immagini dalla stessa pagina.
— thekingoftruth,
4
Questa dovrebbe essere la nuova "risposta accettata", così semplice e diretta. Grazie per questo, amico.
— Mike,
Antonio, hai un link sorgente su ciò che hai mostrato sopra? Sto cercando di cercarlo in developers.facebook.com ma non riesco a trovare nulla tranne questo . Per favore aiuto.
— Mr_Green
@Mr_Green questo è tutto. Questa funzione era "obsoleta" ma ora è tornata ai documenti ufficiali. Ad ogni modo, credo che la mia risposta copra le impostazioni di base affinché funzioni.
— Antonio Max,
@AntonioMax per favore, spiega cosa c'è s=100nel tuo post?
— Mr_Green
12

Dalla mia esperienza, il http://www.facebook.com/sharer.php non usa meta tag. Usa la stringa che passi. Vedi sotto.

http://www.facebook.com/sharer.php?s=100&p[title]=THIS è il mio TITOLO & p [sintesi] = Questo è il mio riassunto & p [url] = http: //www.MYURL.com&&p [immagini] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

I meta tag funzionano con i pulsanti Mi piace / Invia dello sviluppatore di Facebook, così come le altre informazioni di Open Graph. Quindi, se usi uno degli elementi reali di Facebook come i commenti e simili, tutto ciò si legherà alla roba di Open Graph.

AGGIORNAMENTO: Esistono due modi per utilizzare il sharer * notare il valore? S rispetto al? U nella stringa di query
1 ==> STRING: http://www.facebook.com/sharer.php?s + contenuto dall'alto
~ ~> Estrarrà le informazioni dalla stringa.
2 ==> URL: http://www.facebook.com/sharer.php?u=url dove url è uguale a un url reale
~~> Rascherà la pagina fornita nel valore url
~~> Puoi testare i valori qui: https://developers.facebook.com/tools/debug

— Jason Lydon
fonte
Molto utile. Grazie! : D
— Aaron Gray,
Esiste un modo legale per utilizzare quel condivisore in un altro sito Web per ottenere i contenuti da un URL? Non so molto dell'API e roba di Facebook ...
— Lyth
Prova a utilizzare l'opzione URL. Se la pagina ha tag OG, FB li cancellerà. Prova la pagina che desideri utilizzare qui: developers.facebook.com/tools/debug
— Jason Lydon
11

Vecchio modo, non funziona più:

<link rel="image_src" href="http://yoururl/yourimage"/>

Segnalato nuovo modo, inoltre non funziona:

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

Ha funzionato a caso nel primo giorno in cui l'ho implementato, da allora non ha funzionato affatto.

La pagina della linter di Facebook, un'utilità che controlla la tua pagina, riporta che tutto è corretto e visualizza la miniatura che ho selezionato ... solo che la pagina share.php stessa non sembra funzionare. Deve essere un bug su Facebook, uno che apparentemente non gli importa di risolvere come ogni segnalazione di bug relativa a questo problema che ho visto nel loro sistema dice tutto risolto o risolto.

— Theo
fonte
Ho anche questo problema. La linter non riporta alcun errore e mostra correttamente la mia immagine, ma quando faccio clic sul pulsante di condivisione sul mio sito non appare alcuna immagine nell'interfaccia di condivisione.
— Luke Griffiths,
image_src non funziona più per Facebook, ma alcuni servizi lo usano ancora (client Telegram, ecc.)
— Andres SK,
10

Per modificare titolo, descrizione e immagine, è necessario aggiungere alcuni meta tag sotto il tag head.

PASSAGGIO 1:
aggiungi meta tag sotto il tag head 

<html>
<head>
    <meta property="og:url" content="http://www.test.com/" />
    <meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
    <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
    <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

PASSO SUCCESSIVO: fare
clic sul collegamento seguente
https://developers.facebook.com/tools/debug

Aggiungi il tuo URL nella casella di testo (ad es. Http://www.test.com/ ) in cui hai menzionato i tag. Fare clic sul pulsante DEBUG.

E 'fatto.

Puoi verificare qui https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

Nell'URL sopra, u = link al tuo sito web

GODERE !!!!

— Gaurav123
fonte
Il debugger è stato utile.
— konsolebox,
2

Per HTTPS sicuro 

<meta property="og:image:secure_url" content="https://image.path.png" />
— Stefan Michev
fonte
1

Questo è ciò che ha funzionato per me: ho inserito l'immagine di anteprima desiderata sulla pagina subito dopo il tag e rendendola troppo piccola per vederla ..

<img src="imagename.jpg" width="1" height="1" />

Non l'ho testato con altezza 0 e larghezza 0 ma probabilmente funzionerà ancora .. Questo non garantisce che l'utente selezionerà questa immagine ..

Sembra anche che Facebook memorizzi nella cache le anteprime della tua pagina e non le controlli sempre per nuove .. prova ad aggiungere questo a un'altra pagina del tuo sito e vedrai che funziona.

— daniel bernal
fonte
1
dopo il tag - vuoi dire: "dopo il tag BODY"?
— Alexis Wilke,
Sì, credo sia quello che vogliono dire. L'ho fatto su un sito molto tempo fa, ma l'ho usato style="display:none;"invece di impostarlo su 1x1 pixel.
— Mike,
1

Utilizza la finestra di dialogo dei feed di Facebook invece di quella di condivisione per mostrare immagini personalizzate

Esempio:

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
— Kittu
fonte
0

Non sono riuscito a convincere Facebook a scegliere l'immagine giusta da un post specifico, quindi ho fatto ciò che è stato delineato in questa pagina:

/webapps/18468/adding-meta-tags-to-individual-blogger-posts

In altre parole, qualcosa del genere:

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>

Fondamentalmente, hai intenzione di codificare un'istruzione if nel codice HTML del tuo sito per far sì che cambi il meta contenuto per qualunque cosa tu abbia cambiato per quel post. È una soluzione disordinata, ma funziona.

— Michelle Glauser
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.