Hoe Facebook Open Graph te integreren met WordPress

Met het Facebook Open Graph-protocol kunt u uw blogcontent delen, niet alleen met uw lezers, maar ook met hun Facebook-vrienden. Het beste deel is - wanneer iemand vond uw inhoud (en) zal worden gepubliceerd op hun Facebook-profiel. Maar dat is niet alles, met Open Graph kunt u meer interessante manieren ontdekken om met uw lezers te communiceren en contact te maken. Uiteindelijk - als dit goed is gedaan - bouwt het uw merk op en vergroot het het verkeer van uw site.

In de post van vandaag gaan we kijken hoe Facebook Open Graph te integreren met een door uzelf gehoste WordPress in een gedetailleerde stap-voor-stap handleiding. Het vereist het bewerken van uw bestaande WordPress-thema's en het maken van een Facebook-applicatie (als u die niet hebt).

Klaar? Laten we de browser en uw favoriete code-editor activeren. Volledige gids na de sprong.

Stap 1. Maak een Facebook-app

We hebben een Applicatie ID en om dat te krijgen, moet je een Facebook-app maken. Als u al een account hebt, gaat u verder met stap 2.

Een applicatie maken is eenvoudig, hier is wat je doet:

1. Log in op Facebook, ga naar de pagina van de ontwikkelaar.
2. Klik "Stel een nieuwe app in"knop in de rechterbovenhoek.
3. Geef een naam naar je nieuwe app, mee eens naar Facebook-termen, klik Maak een app.
4. Ga naar Website tab, vul op Site-URL en Domein van de site.
5. Noteer de waarde van Applicatie ID ergens en druk op de "Wijzigingen opslaan"knop.

Dat is alles! Je kunt altijd later terugkomen om de rest van de informatie op te vullen.

Stap 2. Vervangen Label

Open het header-bestand van uw thema (Header.php) in je favoriete editor. Bewaar altijd een reservekopie voor het geval er iets misgaat.

Zoek naar deze volgende regel code, of een code die begint met >

Vervang het door:

Houd header.php open, we gaan het nodig hebben voor de 3e stap.

Stap 3. Voeg OG in labels

Plak de volgende code direct hierna tag of eerder label.

       "/>          

Hier zijn enkele van de waarden die u moet wijzigen:

• Regel 3: Vervangen your_fb_app_id met de Applicatie ID vanaf stap 1.
• Regel 4: Je kunt krijgen your_fb_admin_id onder je Facebook Insights-pagina, (Meer info). Klik op de "Inzicht voor uw website"groene knop, pak de volledige reeks code en vervang lijn 4.
• Regel 12: deze lijn bepaalt de afbeelding die overeenkomt met je bericht. Als uw thema WordPress Post Thumbnails ondersteunt, zou het prima moeten werken. Maar als het dat niet doet, zal het gracieus uitvallen zonder een afbeelding. Bekijk stap 3a voor een alternatieve oplossing.
• Regel 19: Vervangen logo.jpg met een url naar het logo van je blog. Het wordt weergegeven wanneer een niet-postingpagina op uw blog op Facebook wordt gedeeld.

Stap 3a - Wanneer "wp_get_attachment_thumb_url" mislukt

Wanneer wp_get_attachment_thumb_url () niet werkte, gaat u waarschijnlijk naar een inhoudsattribuut zonder waarde, zoals wat hieronder wordt weergegeven:

Een eenvoudige oplossing is om regel 12 te vervangen door de volgende code:

Open vervolgens functions.php en voeg de volgende code in:

function catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ overeenkomsten); $ first_img = $ komt overeen met [1] [0]; if (empty ($ first_img)) // Definieert een standaardafbeelding $ first_img = "/images/default.jpg";  retourneer $ first_img; 

Deze vervangingscode probeert een functieaanroep te gebruiken catch_that_image () om de URL van de eerste afbeelding die deze tegenkomt te pakken en uit te voeren. Vervang regel 10 door URL naar een standaardafbeelding als de functie de eerste afbeelding niet kan vinden.

Stap 4. Voeg een Facebook Javascript SDK toe

De volgende Javascript geeft u toegang tot alle functies van de Graph API en Dialogen. Het biedt je ook de mogelijkheid om Facebook sociale plug-ins zoals de Vind ik leuk knop, Facepile, Aanbevelingen, enz. Met gemak te integreren.

Plaats het in header.php, direct daarna

Vervangen your_fb_app_id in regel 4 met Applicatie ID vanaf stap 1 eerder.

Stap 5. Laten we het testen!

We zijn klaar met het integreren van Facebook Open Graph in het WordPress-blog. Laten we een paar tests uitvoeren om te controleren of we de dingen correct hebben gedaan.

Test # 1 - Broncode bekijken

Kijk eens naar de broncodes van een van de blogpost, je zou zoiets als dit moeten hebben:

Controleer de eigenschappen en de waarden ervan, zorg ervoor dat ze correct zijn.

Test # 2 - Installeer een Like Box

Als u geen Facebook-achtige knop hebt geïnstalleerd, is het waarschijnlijk tijd om er een te krijgen. Plaats de volgende code overal (bij voorkeur vóór inhoud of na inhoud) aan de binnenkant single.php:

Vraag vervolgens een vriend Net zoals het. Je zou iets gelijkaardigs in zijn Facebook-profiel moeten zien verschijnen:

Extra: WordPress Plugin

Als je op de een of andere manier de codes niet hebt geïnstalleerd of dit snel en gemakkelijk moet doen - daar is een WordPress-plug-in voor.

Facebook Open Graph Meta in WordPress is een WordPress-plug-in die Facebook-metadata toevoegt om geen thumbnail-probleem, verkeerd titelprobleem, verkeerd beschrijvingsprobleem, enz. Te voorkomen.