Come integrare Facebook Open Graph con WordPress

Il protocollo Facebook Open Graph ti consente di condividere i contenuti del tuo blog non solo con i tuoi lettori, ma anche con i loro amici di Facebook. La parte migliore è - ogni volta che qualcuno è piaciuto i tuoi contenuti, saranno pubblicati sul loro profilo Facebook. Ma non è tutto, Open Graph ti consente di esplorare modi più interessanti per interagire e interagire con i tuoi lettori. In fin dei conti - se questo è fatto bene - costruisce il tuo marchio e aumenta il traffico del tuo sito.

Nel post di oggi, esamineremo come integrare Facebook Open Graph con un WordPress self-hosted in una dettagliata guida passo-passo. Richiederà la modifica dei temi WordPress esistenti e la creazione di un'applicazione Facebook (se non ne hai uno).

Pronto? Apriamo il browser e il tuo editor di codice preferito. Guida completa dopo il salto.

Passaggio 1. Creare un'app per Facebook

Avremo bisogno di un ID applicazione e per farlo, devi creare un'app Facebook. Se ne hai già uno, vai al passaggio 2.

Creare un'applicazione è facile, ecco cosa fai:

1. Accedi a Facebook, vai alla pagina degli sviluppatori.
2. Clicca "Configura una nuova app"pulsante nell'angolo in alto a destra.
3. Dai un nome alla tua nuova app, essere d'accordo ai termini di Facebook, colpo Crea app.
4. Vai a Sito web scheda, riempire indirizzo del sito e Dominio del sito.
5. Annotare il valore di ID applicazione da qualche parte e ha colpito il "Salva I Cambiamenti"pulsante.

È tutto! Puoi sempre tornare più tardi per riempire il resto delle informazioni.

Passaggio 2. Sostituisci Etichetta

Apri il file di intestazione del tema (Header.php) nel tuo editor preferito. Conserva sempre una copia di backup nel caso in cui qualcosa vada storto.

Cerca questa seguente riga di codice o quella che inizia con >

Sostituirlo con:

Tieni aperto header.php, ne avremo bisogno per il 3 ° passaggio.

Passaggio 3. Inserisci OG tag

Incolla il seguente codice subito dopo tag, o prima etichetta.

       "/>          

Ecco alcuni dei valori che dovrai modificare:

• Linea 3: Sostituisci your_fb_app_id con il ID applicazione dal passaggio 1.
• Linea 4: puoi ottenere your_fb_admin_id sotto la tua pagina Facebook Insights, (Ulteriori informazioni). Clicca sul "Insight per il tuo sito web"pulsante verde, prendi l'intera stringa di codice e sostituisci la riga 4.
• Riga 12: questa linea determina l'immagine che rappresenta il tuo post. Se il tema supporta WordPress Post Thumbnails, dovrebbe funzionare correttamente. Ma se non lo fa, fallirà con grazia senza un'immagine. Controlla il passaggio 3a per una soluzione alternativa.
• Riga 19: Sostituisci logo.jpg con un url per il logo del tuo blog. Verrà visualizzato quando una pagina non postata sul tuo blog è condivisa su Facebook.

Passaggio 3a - Quando "wp_get_attachment_thumb_url" non riesce

quando wp_get_attachment_thumb_url () non è riuscito a funzionare, è probabile che tu stia andando a un attributo di contenuto senza valore, ad esempio come mostrato di seguito:

Una semplice soluzione sarà sostituire la riga 12 con il seguente codice:

Quindi, apri functions.php e inserisci il seguente codice:

function catch_that_image () global $ post, $ post; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ matches); $ first_img = $ corrisponde a [1] [0]; if (empty ($ first_img)) // Definisce un'immagine predefinita $ first_img = "/images/default.jpg";  return $ first_img; 

Questo codice di sostituzione tenta di utilizzare una chiamata di funzione catch_that_image () per afferrare e produrre l'URL della prima immagine che incontra. Sostituisci la riga 10 con l'URL con un'immagine predefinita se la funzione non riesce a trovare la sua prima immagine.

Passaggio 4. Inserire l'SDK Javascript di Facebook

Il seguente Javascript ti consente di accedere a tutte le funzionalità dell'API e delle finestre di dialogo Graph. Consente inoltre di integrare facilmente plug-in sociali di Facebook come il pulsante Mi piace, FacePile, Consigli, ecc.

Mettilo dentro header.php, subito dopo

Sostituire your_fb_app_id nella linea 4 con ID applicazione dal passaggio 1 in precedenza.

Passaggio 5. Proviamolo!

Abbiamo completato l'integrazione di Facebook Open Graph nel blog di WordPress. Facciamo un paio di test per assicurarci di aver fatto le cose correttamente.

Test # 1 - Visualizza il codice sorgente

Dai un'occhiata ai codici sorgente di uno dei post del blog, dovresti avere qualcosa di simile a questo:

Controlla le proprietà e i suoi valori, assicurati che siano corretti.

Test # 2 - Installa una scatola simile

Se non hai installato un pulsante Mi piace di Facebook, è probabile che sia il momento di procurarsene uno. Inserire il seguente codice ovunque (preferibilmente prima del contenuto o dopo il contenuto) all'interno single.php:

Quindi, porta un amico a Piace esso. Dovresti vedere qualcosa di simile apparire nel suo profilo Facebook:

Extra: WordPress Plugin

Se in qualche modo non sei riuscito a installare i codici o hai bisogno che ciò avvenga in modo facile e veloce, c'è un plugin WordPress per questo.

Facebook Open Graph Meta in WordPress è un plugin per WordPress che aggiunge i metadati di Facebook per evitare problemi di miniature, problemi di titoli, problemi di descrizione, ecc..