Hur man integrerar Facebook Open Graph med WordPress

Med Facebook Open Graph-protokollet kan du dela ditt blogginnehåll, inte bara med dina läsare, utan även deras Facebook-vänner. Den bästa delen är - närhelst någon omtyckt Ditt innehåll (er), det kommer att publiceras på sin Facebook-profil. Men det är inte allt, med Open Graph kan du utforska mer intressanta sätt att interagera och engagera dig med dina läsare. I slutändan - om detta är gjort rätt - bygger det upp ditt varumärke och ökar din webbplatss trafik.

I dagens inlägg kommer vi att undersöka hur man integrerar Facebook Open Graph med ett självhäftat WordPress i en detaljerad steg-för-steg guide. Det kommer att kräva att du redigerar dina befintliga WordPress-teman och skapar en Facebook-applikation (om du inte har en).

Redo? Låt oss skjuta upp webbläsaren och din favoritkodredigerare. Full guide efter hopp.

Steg 1. Skapa en Facebook App

Vi behöver en ansöknings-ID och för att få det måste du skapa en Facebook-app. Om du redan har en, gå vidare till steg 2.

Att skapa en applikation är lätt, här är vad du gör:

1. Logga in på Facebook, gå till utvecklarens sida.
2. Klick "Ställ in en ny app"knappen längst upp till höger.
3. Ge ett namn till din nya app, hålla med till Facebook villkor, hit Skapa app.
4. Gå till Hemsida flik, fyll upp Webbadress och Site Domain.
5. Notera värdet på ansöknings-ID någonstans och slå "Spara ändringar" knapp.

Det är allt! Du kan alltid komma tillbaka senare för att fylla i resten av informationen.

Steg 2. Byt ut Märka

Öppna ditt temas huvudfiler (Header.php) i din favoritredigerare. Håll alltid en säkerhetskopia bara om något går fel.

Leta efter den här följande koden, eller en som börjar med >

Byt ut den med:

Håll header.php öppen, vi kommer att behöva det för det tredje steget.

Steg 3. Sätt in OG taggar

Klistra in följande kod strax efter tagg eller tidigare märka.

       "/>          

Här är några av de värden du behöver ändra:

• Rad 3: Byt ut your_fb_app_id med ansöknings-ID från steg 1.
• Linje 4: Du kan få your_fb_admin_id på din Facebook Insights-sida, (Mer info). Klicka på "Insikt för din webbplats"Grön knapp, ta tag i hela koden och ersätt Linje 4.
• Rad 12: Denna rad bestämmer bilden som representerar ditt inlägg. Om ditt tema stöder WordPress Post Thumbnails, ska det fungera bra. Men om det inte gör det, kommer det att misslyckas graciöst utan en bild. Kolla in steg 3a för en alternativ lösning.
• Rad 19: Byt ut logo.jpg med en url till bloggens logotyp. Den kommer att visas när en sida som inte är inlägg i din blogg delas på Facebook.

Steg 3a - När "wp_get_attachment_thumb_url" misslyckas

När wp_get_attachment_thumb_url () Misslyckades med att arbeta, du kommer sannolikt att ha en innehållsattribut utan något värde, som det som visas nedan:

En enkel lösning är att ersätta rad 12 med följande kod:

Öppna sedan upp functions.php och sätt in följande kod:

funktion catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// I ', $ post-> post_content, $ matchningar); $ first_img = $ matchningar [1] [0]; om (tomt ($ first_img)) // Definierar en standardbild $ first_img = "/images/default.jpg";  returnera $ first_img; 

Denna ersättningskod försöker använda ett funktionssamtal catch_that_image () att ta tag i och mata ut webbadressen till den första bilden som den kommer att stöta på. Byt linje 10 med URL till en standardbild om funktionen inte hittar sin första bild.

Steg 4. Sätt in Facebook Javascript SDK

Följande Javascript ger dig tillgång till alla funktioner i graf API och dialogrutor. Det låter dig också integrera Facebook sociala plugins som likadana knappen, Facepile, Recommendations, etc med lätthet.

Placera den header.php, direkt efter

Byta ut your_fb_app_id i rad 4 med ansöknings-ID från steg 1 tidigare.

Steg 5. Låt oss testa det!

Vi är redo att integrera Facebook Open Graph till WordPress-bloggen. Låt oss ge det ett par test för att se till att vi har gjort saker på rätt sätt.

Test # 1 - Visa källkod

Ta en titt på källkoderna i ett av blogginlägget, du borde ha något så här:

Kontrollera egenskaperna och dess värden, se till att de är korrekta.

Test # 2 - Installera en liknande låda

Om du inte har installerat en Facebook-liknande knapp, är det förmodligen dags att få en. Placera följande kod var som helst (helst före innehåll eller efter innehåll) inuti single.php:

Därefter, få en vän till Tycka om Det. Du borde se något liknande som visas i hans Facebook-profil:

Extra: WordPress Plugin

Om du på något sätt inte lyckades installera koderna eller behöver det här görs snabbt och enkelt - det finns ett WordPress-plugin för det.

Facebook Open Graph Meta i WordPress är ett WordPress-plugin som lägger till Facebook-metadata för att undvika ingen miniatyrproblem, felaktigt titelförlust, felaktigt beskrivningsproblem etc..