Facebook Open GraphとWordPressを統合する方法

Facebook Open Graphプロトコルを使用すると、ブログのコンテンツを読者だけでなくFacebookの友達とも共有できます。最良の部分は - 誰かがいつでも好きあなたのコンテンツは、Facebookのプロフィールに公開されます。しかし、それだけではありません。OpenGraphを使用すると、読者と対話したり興味を持ったりするためのより興味深い方法を探ることができます。最終的に - これが正しく行われれば - それはあなたのブランドを築き上げ、あなたのサイトのトラフィックを増やします。.

今日の記事では、私達は調べていくつもりです Facebook Open Graphと自己ホスト型WordPressを統合する方法 詳細なステップバイステップガイド既存のWordPressテーマを編集してFacebookアプリケーションを作成する必要があります（まだ持っていない場合）。.

準備はいい？ブラウザとお気に入りのコードエディタを起動しましょう。ジャンプ後のフルガイド.

ステップ1. Facebook Appを作成する

私たちは必要だ アプリケーションID そのためには、Facebookアプリを作成する必要があります。すでにお持ちの場合は、手順2に進みます。.

アプリケーションを作成するのは簡単です、これがあなたがすることです：

Facebookにログオンし、開発者ページに移動します.
"をクリック新しいアプリを設定する"右上のボタン.
名前をつける 新しいアプリへ, 同意する Facebookの用語に、ヒット アプリを作成.
に行く Webサイト タブ、記入 サイトのURL そして サイトドメイン.
の値を書き留めます アプリケーションID どこかで "変更内容を保存「ボタン.

それで全部です！あとで戻ってきて、残りの情報を埋めることができます.

ステップ2。交換タグ

テーマのヘッダファイルを開く （header.php） あなたの好きなエディタで。万が一問題が発生した場合に備えて、必ずバックアップコピーを保存してください。.

次のコード行、またはで始まる行を探してください。 >

次のものに置き換えます。

header.phpを開いたままにしておきます。3番目のステップで必要になります。.

ステップ3.挿入OG タグ

次のコードを直後に貼り付けてくださいタグ、またはその前タグ.

       "/>   " />

変更する必要がある値は次のとおりです。

3行目：置き換え your_fb_app_id とともに アプリケーションID ステップ1から.
4行目：あなたは得ることができます your_fb_admin_id Facebook Insightsページの下に（詳細）。クリックしてください "あなたのウェブサイトへの洞察「緑色のボタン、コードの文字列全体を取得して4行目を置き換える.
12行目：この行はあなたの投稿を表す画像を決定します。あなたのテーマがWordPress Post Thumbnailsをサポートしていれば、それはうまく機能するはずです。そうでなければ、それは画像なしで優雅に失敗します。代替の回避策についてはステップ3aをチェックしてください.
行19：置き換え logo.jpg ブログのロゴへのURL付き。ブログの非投稿ページがFacebookで共有されているときに表示されます.

ステップ3a - "wp_get_attachment_thumb_url"が失敗したとき

いつ wp_get_attachment_thumb_url（） うまくいかなかった場合は、以下に示すように、コンテンツ属性に値が設定されていない可能性があります。

簡単な回避策は、12行目を次のコードに置き換えることです。

次に開きます functions.php 次のコードを挿入してください。

function 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]; if（empty（$ first_img））//デフォルトの画像を定義します$ first_img = "/images/default.jpg"; $ first_imgを返します。

この置換コードは関数呼び出しを使用しようとしています catch_that_image（） 出会った最初の画像のURLを取得して出力する。関数が最初の画像を見つけられない場合は、10行目をデフォルトの画像へのURLに置き換えます。.

ステップ4. Facebook Javascript SDKを挿入する

次のJavascriptを使うと、Graph APIとダイアログのすべての機能にアクセスできます。また、Likeボタン、Facepile、RecommendationsなどのFacebookソーシャルプラグインを簡単に統合することもできます。.

に置く header.php, 直後の

交換する your_fb_app_id 4行目に アプリケーションID 先のステップ1から.

ステップ5.テストしましょう!

Facebook Open GraphをWordPressブログに統合しました。正しく動作したことを確認するために、いくつかテストを行いましょう。.

テスト1 - ソースコードの表示

ブログ記事の1つのソースコードを見てください、あなたはこのようなものを持っているべきです：

プロパティとその値を確認し、それらが正しいことを確認してください。.

テスト＃2 - いいねボックスをインストールする

Facebook Like Buttonをインストールしていない場合は、おそらくそれを入手する時期です。次のコードをどこにでも（できればコンテンツの前またはコンテンツの後に）配置します。 single.php：

次に、友達に好きそれ。彼のFacebookのプロフィールにも似たようなものが表示されるはずです。

Extra：WordPressプラグイン

どういうわけかあなたがコードをインストールするのに失敗したか、またはこれを迅速かつ簡単にされる必要があるならば - そのためのWordPressプラグインがあります.

WordPressのFacebook Open Graph Metaは、Facebookのメタデータを追加してサムネイルの問題、タイトルの問題、説明の誤りなどを回避するWordPressプラグインです。.