So integrieren Sie Facebook Open Graph mit WordPress

Das Facebook Open Graph-Protokoll ermöglicht es Ihnen, Ihren Blog-Inhalt nicht nur mit Ihren Lesern, sondern auch mit Facebook-Freunden zu teilen. Das Beste ist - wann immer jemand gefallen Ihre Inhalte werden auf ihrem Facebook-Profil veröffentlicht. Das ist aber noch nicht alles. Mit Open Graph können Sie weitere interessante Möglichkeiten der Interaktion mit Ihren Lesern erkunden. Letztendlich - wenn dies richtig gemacht wird - baut es Ihre Marke auf und erhöht den Traffic Ihrer Website.

In dem heutigen Beitrag werden wir nachschauen So integrieren Sie Facebook Open Graph mit einem selbst gehosteten WordPress in einer detaillierten Schritt-für-Schritt-Anleitung. Sie müssen Ihre vorhandenen WordPress-Themes bearbeiten und eine Facebook-Anwendung erstellen (falls Sie noch keine haben)..

Bereit? Starten Sie den Browser und Ihren bevorzugten Code-Editor. Volle Führung nach dem Sprung.

Schritt 1. Erstellen Sie eine Facebook-App

Wir brauchen eine Anwendungs-ID und um das zu bekommen, müssen Sie eine Facebook-App erstellen. Wenn Sie bereits eine haben, fahren Sie mit Schritt 2 fort.

Das Erstellen einer Anwendung ist einfach. Hier ist, was Sie tun:

1. Melden Sie sich bei Facebook an und gehen Sie zur Entwicklerseite.
2. Klicken "Richten Sie eine neue App ein"Taste in der oberen rechten Ecke.
3. Gib einen Namen zu deiner neuen App, zustimmen zu Facebook-Begriffen, drücken Sie App erstellen.
4. Gehe zu Webseite Tab, auffüllen Seiten-URL und Site Domain.
5. Notieren Sie sich den Wert von Anwendungs-ID irgendwo und drücken Sie die "Änderungen speichern" Taste.

Das ist alles! Sie können später immer wieder zurückkommen, um die restlichen Informationen aufzufüllen.

Schritt 2. Ersetzen Etikett

Öffnen Sie die Header-Datei Ihres Themas (header.php) in Ihrem Lieblingseditor. Bewahren Sie immer eine Sicherungskopie auf, falls etwas schief geht.

Suchen Sie nach dieser folgenden Codezeile oder einer, die mit beginnt >

Ersetzen Sie es mit:

Halten Sie die header.php offen, wir werden es für den 3. Schritt brauchen.

Schritt 3. Legen Sie OG ein Stichworte

Fügen Sie den folgenden Code gleich danach ein tag oder vorher Etikett.

       "/>          

Hier einige Werte, die Sie ändern müssen:

• Zeile 3: Ersetzen your_fb_app_id mit dem Anwendungs-ID von Schritt 1.
• Zeile 4: Sie können bekommen your_fb_admin_id unter Ihrer Facebook-Insights-Seite (Weitere Informationen). Klicke auf das "Einblick für Ihre Website"grüne Taste, packen Sie den gesamten Code und ersetzen Sie Zeile 4.
• Zeile 12: Diese Zeile bestimmt das Bild, das Ihren Beitrag darstellt. Wenn Ihr Design WordPress Post Thumbnails unterstützt, sollte dies problemlos funktionieren. Wenn dies nicht der Fall ist, wird es ohne ein Bild grausam versagen. Überprüfen Sie Schritt 3a für eine alternative Problemumgehung.
• Zeile 19: Ersetzen logo.jpg mit einer URL zum Logo Ihres Blogs. Es wird angezeigt, wenn eine nicht-post-Seite in Ihrem Blog auf Facebook geteilt wird.

Schritt 3a - Wenn "wp_get_attachment_thumb_url" fehlschlägt

Wann wp_get_attachment_thumb_url () Wenn Sie nicht funktionierten, werden Sie wahrscheinlich zu einem Inhaltsattribut mit keinem Wert wechseln, wie nachstehend gezeigt:

Eine einfache Problemumgehung besteht darin, Zeile 12 durch folgenden Code zu ersetzen:

Als nächstes aufmachen Functions.php und füge folgenden Code ein:

function catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ entspricht); $ first_img = $ entspricht [1] [0]; if (empty ($ first_img)) // Definiert ein Standardbild $ first_img = "/images/default.jpg";  return $ first_img; 

Dieser Ersatzcode versucht, einen Funktionsaufruf zu verwenden catch_that_image () um die URL des ersten Bildes zu erfassen und auszugeben, dem es begegnet. Ersetzen Sie Zeile 10 durch URL in ein Standardbild, wenn die Funktion das erste Bild nicht findet.

Schritt 4. Fügen Sie das Facebook Javascript SDK ein

Mit dem folgenden Javascript können Sie auf alle Funktionen der Graph-API und der Dialoge zugreifen. Außerdem können Sie Facebook Social Plugins wie Like-Button, Facepile, Recommendations usw. problemlos integrieren.

Legen Sie es in header.php, gleich nach

Ersetzen your_fb_app_id in Zeile 4 mit Anwendungs-ID von Schritt 1 früher.

Schritt 5. Testen wir es!

Wir haben die Integration von Facebook Open Graph in den WordPress-Blog abgeschlossen. Lassen Sie uns ein paar Tests durchführen, um sicherzustellen, dass wir die Dinge richtig gemacht haben.

Test # 1 - Quellcode anzeigen

Schauen Sie sich die Quellcodes eines Blogbeitrags an. Sie sollten etwa Folgendes haben:

Überprüfen Sie die Eigenschaften und deren Werte und stellen Sie sicher, dass sie korrekt sind.

Test 2 - Installieren Sie eine Like-Box

Wenn Sie keinen Facebook Like Button installiert haben, ist es wahrscheinlich an der Zeit, einen zu bekommen. Platzieren Sie den folgenden Code an einer beliebigen Stelle (vorzugsweise vor Inhalt oder nach Inhalt) single.php:

Als nächstes einen Freund dazu bringen Mögen es. Sie sollten etwas Ähnliches in seinem Facebook-Profil sehen:

Extra: WordPress Plugin

Wenn Sie die Codes irgendwie nicht installiert haben oder dies schnell und einfach erledigen müssen, gibt es dafür ein WordPress-Plugin.

Facebook Open Graph Meta in WordPress ist ein WordPress-Plugin, das Facebook-Metadaten hinzufügt, um zu vermeiden, dass Miniaturbilder, falsche Titelausgaben, falsche Beschreibungen usw. auftreten.