2013年7月12日 11:07 PM  カテゴリー: facebook, Tips, web制作, WordPress

今までずいぶんプラグインにお世話になってきてしまったんですが今回クライアントさんのWordpressのテーマをオリジナルで作成し、時間もあったのでこの際全部手作りでやったろか!と思い立ちプラグインのお世話になるのはやめ、OGPから何からすべて自分で入れてみました。

OGPで実装したいイメージ

1.トップページ、記事ページ、すべてページごとのOGPを取得。
2.画像は記事サムネイルから抽出。

のみ。笑

要はいいね!を押してもらった時にニュースフィード上に記事内のサムネイル画像も表示されたらうれしいわけです。

プラグインならこんな当たり前なことはぶち込めば勝手にやってくれました。ですが今回は自作です。
今回はapp_idの取得方法などは省きます。いずれ書くかもしれませんがググればいくらでも出てきますので。

OGPの設定

■wp-content/themes/テンプレート名/header.php

ここまででヘッダー内の記述はおしまい。

そして今度は差し込みたいページ、今回僕はオリジナルテンプレートはsingle.phpなので表示した個所にここでfacebook開発者ページとってきたいいね!ボタンを設置。

いいねボタンの設置

これでちゃんといいね!ボタン設置できるはず。ですよね?大丈夫ですよね?笑
僕が確認したところちゃんと表示されているので問題はないはずです。

いろいろ見て探してみたところかなりたくさんやり方はありましたがこれが一番シンプルでわかりやすいように思います。もちろんもっとスマートでかっこいいやり方もあるとは思いますがもし同じようにプラグインを使わずに!って言う方がいらっしゃいましたらお試しください。

きっとまるっとコピペしてapp_idちゃんと入れたら動きます。

大変勉強になった参考サイト:http://mytown.main.jp/blog/?p=335
ありがとうございましたm(_ _)m

■7月13日追記
functions.php内に下記記述を忘れずに!!(僕は忘れてて画像がちゃんと表示されなくて小一時間悩みましたorz)

ABOUT

仕事と子育てを楽しむパパです。 趣味は漫画、映画、海外ドラマ、波乗り、スノボ、カメラ。 最近いけてないけど旅行も大好き。仕事はweb以外にも企業向け技術教育事業、投資、ディレクション、アパレル、写真、店舗プロデュースなどなどなんでもこなします。

Twitter