プラグインを使わずにWordPressにFacebookいいね!ボタン設置したらこうなった。

LINEで送る
Pocket

今までずいぶんプラグインにお世話になってきてしまったんですが今回クライアントさんの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)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">