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 gradisce i tuoi contenuti, sarà pubblicato 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 dettagliata. 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, dovrai 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. Fai clic sul pulsante " Configura una nuova app " nell'angolo in alto a destra.
3. Dai un nome alla tua nuova app, accetta i termini di Facebook, premi Crea app .
4. Vai alla scheda Sito Web, inserisci l' URL del sito e il dominio del sito .
5. Annotare il valore di ID applicazione da qualche parte e premere il pulsante " Salva modifiche ".

È 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 una 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:

• Riga 3: sostituisci your_fb_app_id con l' ID applicazione del passaggio 1.
• Riga 4: puoi ottenere tuo_fb_admin_id sotto la tua pagina di Facebook Insights, (Ulteriori informazioni). Fai clic sul pulsante verde " Insight for your website ", 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 ha funzionato, è probabile che tu stia andando a un attributo di contenuto senza valore, come quello mostrato di seguito:

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

Successivamente, 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 funzione chiamata catch_that_image() per catturare ed emettere 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.

Inseriscilo in header.php, subito dopo

Sostituisci your_fb_app_id nella riga 4 con l' ID applicazione del precedente passaggio 1.

Passaggio 5. Proviamolo!

Abbiamo finito di integrare 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. Inserisci il seguente codice ovunque (preferibilmente prima del contenuto o dopo il contenuto) all'interno di single.php :

Quindi, fatti amare da un amico. 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.

Crea il tuo Bot di risposta automatica con Bottr

La maggior parte di noi ricorda l' incidente di Microsoft Tay in cui gli utenti di Internet hanno insegnato a un robot di IA alcune parole piuttosto pazze in pochi giorni. È un divertente esempio di bot sul web, ma puoi creare il tuo proprio bot di messaggistica su Twitter o FB senza la roba dell'IA .

(Consigli tecnici e di design)

Freebie: 15 modelli di San Valentino

Se non hai ancora trovato il suggerimento, San Valentino è questo sabato. Che sia per lavoro o per uso personale, è probabile che tu abbia bisogno di risorse ispirate a San Valentino. Bene, sei fortunato.Abbiamo collaborato con i nostri amici a Freepik per contribuire a celebrare lo stile di San Valentino.

(Consigli tecnici e di design)