Sådan integreres Facebook Open Graph med WordPress

Facebook Open Graph-protokollen giver dig mulighed for at dele dit blogindhold ikke kun med dine læsere, men også deres Facebook-venner. Den bedste del er - når nogen Kunne lide Dit indhold (er), det vil blive offentliggjort på deres Facebook profil. Men det er ikke alt, Open Graph giver dig mulighed for at udforske mere interessante måder at interagere og engagere sig med dine læsere. I sidste ende - hvis dette er gjort rigtigt - det opbygger dit brand og øger dit websted trafik.

I dagens post skal vi undersøge Sådan integreres Facebook Open Graph med en selvstændig hosted WordPress i en detaljeret trin-for-trin vejledning. Det vil kræve redigering af dine eksisterende WordPress-temaer og oprettelse af et Facebook-program (hvis du ikke har en).

Parat? Lad os slukke browseren og din yndlings kode editor. Fuld guide efter hoppe.

Trin 1. Opret en Facebook App

Vi skal bruge en Ansøgnings-id og for at få det, skal du oprette en Facebook App. Hvis du allerede har en, skal du fortsætte til trin 2.

Oprettelse af en applikation er let, her er hvad du gør:

1. Log på Facebook, gå til udviklerens side.
2. Klik på "Opsæt en ny app"knappen øverst til højre.
3. Giv et navn til din nye app, enig til Facebook vilkår, hit Opret app.
4. Gå til Internet side fane, fyld op Webstedets webadresse og Site Domain.
5. Bemærk værdien af Ansøgnings-id et sted og ramt "Gem ændringer"knappen.

Det er alt! Du kan altid komme tilbage senere for at udfylde resten af ​​informationen.

Trin 2. Udskift tag

Åbn dit tema's header-fil (Header.php) i dit yndlingsredaktør. Hold altid en sikkerhedskopi, bare hvis noget går galt.

Kig efter denne følgende kodelinje, eller en, der starter med >

Udskift det med:

Hold header.php åben, vi skal bruge det til 3. trin.

Trin 3. Indsæt OG tags

Indsæt følgende kode lige efter tag eller tidligere tag.

       "/>          

Her er nogle af de værdier, du skal ændre:

• Linje 3: Udskift your_fb_app_id med Ansøgnings-id fra trin 1.
• Linje 4: Du kan få your_fb_admin_id under din Facebook Insights-side, (Mere info). Klik på "Insight for dit websted"grøn knap, tag hele koden af ​​kode og erstat linie 4.
• Linje 12: Denne linje bestemmer det billede, der repræsenterer dit indlæg. Hvis dit tema understøtter WordPress Post Thumbnails, skal det fungere fint. Men hvis det ikke gør det, vil det svigte yndefuldt uden et billede. Tjek trin 3a for en alternativ løsning.
• Linje 19: Udskift Logo.jpg med en url til din blogs logo. Det vil blive vist, når en ikke-indlægsside på din blog deles på Facebook.

Trin 3a - Når "wp_get_attachment_thumb_url" fejler

Hvornår wp_get_attachment_thumb_url () Har du undladt at arbejde, går du sandsynligvis til en indholdsattribut uden værdi, som det der vises nedenfor:

En simpel løsning vil være at erstatte Linje 12 med følgende kode:

Derefter åbner du op functions.php og indsæt følgende kode:

funktion catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ matches); $ first_img = $ matches [1] [0]; hvis (tomt ($ first_img)) // Definerer et standardbillede $ first_img = "/images/default.jpg";  returner $ first_img; 

Denne erstatningskode forsøger at bruge et funktionsopkald catch_that_image () at gribe og udføre URL'en for det første billede, det kommer til at støde på. Udskift linje 10 med URL til et standardbillede, hvis funktionen ikke finder sit første billede.

Trin 4. Indsæt Facebook Javascript SDK

Følgende Javascript giver dig adgang til alle funktionerne i Graph API og Dialogs. Det giver dig også mulighed for at integrere Facebook sociale plugins som Like knappen, Facepile, Anbefalinger, osv. Med lethed.

Placer den i header.php, lige efter

Erstatte your_fb_app_id i linje 4 med Ansøgnings-id fra trin 1 tidligere.

Trin 5. Lad os teste det!

Vi er færdige med at integrere Facebook Open Graph til WordPress bloggen. Lad os give det et par test for at sikre, at vi har gjort tingene korrekt.

Test # 1 - Se kildekode

Tag et kig på kildekoderne til et af blogindlæg, du skal have noget som dette:

Kontroller egenskaberne og dens værdier, sørg for, at de er korrekte.

Test # 2 - Installer en lignende boks

Hvis du ikke har installeret en Facebook Like Button, er det nok tid til at få en. Placer følgende kode overalt (helst inden indhold eller efter indhold) inde single.php:

Næste, få en ven til Synes godt om det. Du skal se noget lignende, der vises i hans Facebook profil:

Ekstra: WordPress-plugin

Hvis du på en eller anden måde ikke har installeret koderne eller har brug for det, skal det gøres hurtigt og nemt - der er et WordPress-plugin til det.

Facebook Open Graph Meta i WordPress er et WordPress-plugin, der tilføjer Facebook-metadata for at undgå noget miniaturebillede, forkert titelproblem, forkert beskrivelsesproblem osv..