Come funziona Facebook Sharer selezionare le immagini e altri metadati se condividono il mio URL?
https://stackoverflow.com/questions/1138460
-
16-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Quando si utilizza Facebook Sharer, Facebook offrirà all'utente la possibilità di utilizzare 1 di alcune immagini tirato dalla sorgente come anteprima per il loro legame. Come vengono selezionate queste immagini, e come posso garantire che qualsiasi particolare immagine nella mia pagina è sempre inclusi in questa lista?
Soluzione
Come faccio a sapere quale immagine di Facebook da utilizzare quando la mia pagina viene condiviso?
Facebook ha una serie di open-grafico meta tag che sembra a decidere quale immagine da visualizzare.
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 tag <head></head> 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="/myimage.jpg"/>. Se nessuno dei due sono presenti, Facebook esaminerà il contenuto della pagina e scegliere le immagini dalla pagina che soddisfano i criteri di immagini di condivisione: L'immagine deve essere almeno 200px da 200px, hanno un rapporto di massima altezza di 3: 1, e in PNG, JPEG o GIF.
Posso specificare più immagini per consentire all'utente di selezionare un'immagine?
Sì, avete solo bisogno di aggiungere immagini più meta tag nell'ordine in cui si desidera vengano visualizzati in L'utente sarà poi presentato con una finestra di selezione immagine:.
ho specificato le opportune immagine meta-tag. Perché Facebook non accetta i cambiamenti?
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), sarà accedere alla tua pagina e memorizzare nella cache le informazioni meta. Per forzare i server di Facebook per cancellare la cache, utilizzare il Facebook URL Debugger / strumento Linter che 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. È necessario specificare URL assoluto come http://example.com/yourimage.jpg invece di / yourimage. jpg.
Posso aggiornare questi meta tag con il codice lato client, come JavaScript o jQuery? No. Proprio come i crawler dei motori di ricerca, il raschietto Facebook non eseguire gli script in modo da qualunque meta tag sono presenti quando la pagina viene scaricata sono i meta tag che vengono utilizzati per la selezione delle immagini.
L'aggiunta di questi tag provoca la mia pagina per convalidare più. Come posso risolvere questo problema?
È possibile aggiungere i necessari spazi dei nomi di Facebook per il tag e la pagina dovrebbe quindi superare la convalida:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
Altri suggerimenti
Quando si condivide per Facebook, è necessario aggiungere nel tuo html nella sezione head prossimi meta tag:
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
E questo è tutto!
Aggiungere il pulsante di come si dovrebbe in base a ciò che ti dice FB.
Tutte le informazioni che serve è in www.facebook.com/share/
Dal 2013, se si sta utilizzando facebook.com/sharer.php (PHP) si può semplicemente fare un qualsiasi pulsante / link come:
<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
parametri di query link:
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
E 'semplice semplice: non è necessario alcun js o altre impostazioni. È solo un collegamento grezzo HTML. Lo stile Un tag in qualsiasi modo si desidera.
Inserire il seguente tag nel head:
<link rel="image_src" href="/path/to/your/image"/>
http://www.facebook.com/share_partners.php
Per quanto riguarda ciò che sceglie come predefinito, in assenza di questo tag, non sono sicuro.
Dalla mia esperienza, il http://www.facebook.com/sharer.php non usa i meta-tag. Esso utilizza la stringa si passa. Vedi sotto.
http://www.facebook.com/sharer.php ? s = 100 & p [titolo] = QUESTO È 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 lavorano con gli sviluppatori di Facebook come / pulsanti inviare, come fa l'altro informazioni Open Graph. Quindi, se si utilizza uno di elementi reali di Facebook, come i commenti e tali, che saranno tutti cravatta nella roba Open Graph.
UPDATE: Ci sono due modi per utilizzare il condivisore * notare la s rispetto al valore di u nella stringa di query
??
1 ==> STRING: http://www.facebook.com/ sharer.php? s + contenuti dall'alto
~~> Sarà estrarre informazioni dalla stringa.
2 ==> URL: http: //www.facebook. com / sharer.php? u = url dove url è uguale a un vero e proprio URL
~~> Sarà raschiare la pagina è fornita nel valore URL
~~> È possibile verificare testare i valori qui: https://developers.facebook.com/tools/debug
Vecchio modo, non funziona più:
<link rel="image_src" href="http://yoururl/yourimage"/>
Segnalato nuovo modo, anche non funziona:
<meta property="og:image" content="http://yoururl/yourimage"/>
Ha funzionato in modo casuale fuori e sopra durante il primo giorno ho implementato, non ha funzionato affatto dato.
La pagina di Facebook Linter, un'utility che controlla la tua pagina, riporta che tutto sia corretto e fa visualizzare la miniatura Ho selezionato ... solo che la pagina share.php sé non sembra funzionare. Deve essere un bug su Facebook, uno che a quanto pare non si preoccupano di risolvere come ogni bug report su questo problema che ho visto in loro sistema tutto dire risolto o fisso.
Per modificare titolo, descrizione e l'immagine, abbiamo bisogno di aggiungere alcuni meta tag in tag head.
STEP 1:
Aggiungere i meta tag in 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." />
Passaggio successivo:
Clicca sui link qui sotto
https://developers.facebook.com/tools/debug
Aggiungi il tuo URL nella casella di testo (ad esempio, http://www.test.com/ ) dove si menzionato i tag. Fare clic sul pulsante DEBUG.
Il suo fatto.
È possibile verificare qui https: / /www.facebook.com/sharer/sharer.php?u=http://www.test.com/
In precedenza URL, u = il link al sito
GODETEVI !!!!
Per HTTPS sicuri
<meta property="og:image:secure_url" content="https://image.path.png" />
Ho avuto questo problema e riparato con il suggerimento di manuel-84. Uso di un'immagine di 400x400px funzionato grande, mentre la mia immagine più piccola mai arrivato nel condivisore.
Si noti che Facebook raccomanda un minimo 200px immagine piazza che ospita la og: tag immagine: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
Questo è ciò che ha funzionato per me: ho messo l'immagine in miniatura desiderata sulla pagina subito dopo il tag e rendendo troppo piccolo per vedere ..
<img src="imagename.jpg" width="1" height="1" />
Non ho ancora testato con altezza e larghezza 0 0 ma probabilmente sarà ancora lavorare .. Questo non garantisce che l'utente selezionerà questa immagine ..
ANCHE sembra che Facebook memorizza nella cache le miniature sulla tua pagina e doesnt controllare sempre che per quelli nuovi .. provare ad aggiungere questa a un'altra pagina del tuo sito e vedrai che funziona.
finestra di alimentazione utilizzare Facebook, invece di dialogo quota di 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
non ho potuto ottenere Facebook per scegliere la giusta immagine da un post specifico, così ho fatto ciò che è descritto in questa pagina:
https://webapps.stackexchange.com/questions/18468 / meta-tag-to-singoli-blogger-posts aggiungendo-
In altre parole, qualcosa di simile a questo:
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
In sostanza, si sta andando ad un codice difficile if nel codice HTML del tuo sito per farlo di modificare il contenuto meta per tutto ciò che hai cambiato per quello postale. Si tratta di una soluzione di disordinato, ma funziona.
