In che modo "Facebook Publisher" seleziona l'immagine, il titolo e il contenuto da un sito Web condiviso?


12

Questa è una domanda su Facebook Publisher . Quando condivido un collegamento, Facebook acquisirà del testo, il titolo un'immagine dal sito e costruirà un'anteprima per l'utente. L'utente può quindi modificare l'anteprima, scegliere tra una delle diverse miniature e quindi pubblicarla sul proprio profilo Facebook.

Ecco uno screenshot per illustrare il punto:

Screenshot da Facebook

In che modo l'applicazione Publisher acquisisce le immagini e il testo dal collegamento? Esistono applicazioni simili che funzionano per altre applicazioni Web popolari, per qualsiasi applicazione Google, blog di Wordpress, ecc.?

Ho fatto una domanda simile qualche mese fa e sembra che Facebook usi oEmbed , ma sembra che OEmbed includa solo contenuti. Ho anche letto che oEmbed funziona solo con i provider oEmbed. L'editore di Facebook funziona con quasi tutti i siti Web.



@phwd: sembra che @Edward stia parlando di un bug nel suo post. Funzionava fino a "Ma da circa due settimane fa ..."
Stefan Lasiewski,

Risposte:


10

Facebook utilizzerà qualsiasi meta tag grafico aperto se presente per il titolo, e l'immagine ecc. (Ad es. Og: titolo). La documentazione di Facebook per Open Graph Protocol spiega questo in modo più dettagliato:

Il protocollo Open Graph definisce quattro proprietà richieste:

og: title - Il titolo del tuo oggetto come dovrebbe apparire nel grafico, ad esempio "The Rock".

og: type - Il tipo di oggetto, ad esempio "film". Vedi l'elenco completo dei tipi supportati.

og: image - Un URL di immagine che dovrebbe rappresentare il tuo oggetto all'interno del grafico. L'immagine deve essere di almeno 50 pixel per 50 pixel e avere un formato massimo di 3: 1.

og: url: l'URL canonico dell'oggetto che verrà utilizzato come ID permanente nel grafico, ad esempio http://www.imdb.com/title/tt0117500/ .

Inoltre, abbiamo esteso i metadati di base per aggiungere due campi obbligatori per connettere la tua pagina a Facebook:

og: site_name - Un nome leggibile dall'uomo per il tuo sito, ad esempio "IMDb".

fb: admins o fb: app_id - Un elenco separato da virgole di ID utente di Facebook o di un ID applicazione piattaforma Facebook che amministra questa pagina. È valido includere sia fb: admins che fb: app_id nella tua pagina.

Si consiglia inoltre di includere le seguenti proprietà e queste proprietà in più parti.

og: description - Una descrizione di una o due frasi della tua pagina.

Non sono sicuro di come lo facciano per le pagine prive di questi tag. Se stai cercando di duplicare questa funzionalità, questo non è di aiuto, mi dispiace. Ma se stai cercando di assicurarti che le tue pagine vengano visualizzate nell'editore come desideri, forse lo farà.

Puoi anche utilizzare il debugger di Facebook Opengraph, che fornirà informazioni sulla tua anteprima e (super utile) aggiornerà il loro link memorizzato nella cache se apporti modifiche. Altrimenti puoi apportare modifiche a un link che desideri condividere e le modifiche non verranno visualizzate per giorni:

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


Utilizzeranno i metatag se non hai fornito i tag del grafico aperto. I tag OG sono più utili quando ti piace una pagina web, perché crea una pagina Facebook quindi per il sito / url
Umair Jabbar

4

Per dire a Facebook quale testo e immagini raccogliere è necessario aggiungere meta-chiavi specifiche nella testa della tua pagina.

    <meta name="title" content="title" />
    <meta name="description" content="description " />
    <link rel="image_src" href="thumbnail_image" / >

Ho pubblicato i dettagli qui http://umairj.com/2010/10//modify-how-the-shared-item-appears-on-facebook/


1
È interessante e quei meta tag sono una pratica consigliata per molti webmaster (aiuta i motori di ricerca, ecc.). Tuttavia, guarda la fonte per flowdata.com/2010/09/15/… . Quella pagina non ha quei tag e non ha neanche un <link rel=tag immagine immagine.
Stefan Lasiewski,

@Stefan, questa è un'ottima domanda, beh, cosa fa FB se non trova i meta tag dei nuovi tag OpenGraph OG, allora prende tutte le immagini e mostra parte del testo dall'inizio del codice HTML di quella pagina . Quindi l'utente può scegliere le immagini ma il testo è lo stesso. Inoltre vengono mostrate solo quelle immagini che soddisfano i criteri specificati da Facebook. il rapporto aspet
Umair Jabbar

1

Ciò che ha funzionato per me è stato posizionare l'immagine della miniatura desiderata sulla pagina subito dopo il tag e renderla 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.

Spero che sia di aiuto.


0

Facebook utilizza i meta tag nella pagina che condividi per determinare quale immagine, titolo e descrizione mostrare quando pubblichi un link. La sintassi del meta tag segue le specifiche OpenGraph di Facebook .

I meta tag più importanti che devi definire sono:

  • <meta property="og:title" content="The title of the sharing preview" />
  • $<meta property="og:description" content="The first few lines of content below the title" />
  • <meta property="og:image" content="http://site.com/your-image-1200x630px.jpg" />

Questo ovviamente funziona solo se hai il controllo completo sul sito che stai condividendo. Se condividi un link esterno (come un articolo di notizie), non hai accesso al loro sito e quindi non puoi modificare i meta tag. Sto usando ShareKit.io , che ti permette di cambiare il titolo, la descrizione e l'immagine di qualsiasi link che condividi senza dover giocherellare con i meta tag.


-1

Direi che la risposta alla tua domanda è abbastanza complessa e molto probabilmente anche un segreto commerciale per Facebook. La loro capacità di scansionare un URL e raccogliere contenuti / contenuti pertinenti da visualizzare nel flusso di notizie è una delle cose che rende il loro servizio così unico e utile per la persona comune che utilizza Facebook.

Detto questo, direi che l'algoritmo non sarebbe tremendamente complesso, probabilmente utilizza molte delle stesse regole che Google utilizza per raschiare i contenuti dai siti Web (hanno alcuni dettagli generali pubblicati qui ). Penso che il potere dietro l'editore provenga da molte prove, errori e test da parte degli ingegneri di Facebook.


1
Non sono assolutamente d'accordo!
Umair Jabbar,
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.