いいねボタンを配置するのは簡単なのですが、昔調べたコードをそのまま利用しており、古くなったりしてないか気になった。あと、テストユーザでいいねすると、いいねが反映されない。あと、デフォルトのいいねボタンではなく、独自の画像なりタグなり、ボタンなりをいいねボタンとして使う方法も知りたい。
■いいねボタンを独自デザインにする 参考：SNSボタンをオリジナルデザインにする方法
なんか、すごく簡単そうだ。facebookのいいねボタンを設置する場合、javascriptのコードも配置してたけどいらないのかな？？普通のaタグを使っているだけのようだ。ogp設定はしっかりしておく必要があるらしい。
FacebookやGoogle+はogp設定をしていないと正しくシェアできません。
参考：facebook いいねボタン設置時のOGP設定方法♪
OGPの設定は、まずタグにxmlnsというのを追加するらしい。
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
次にmetaタグを追加します。
<meta property="og:title" content="記事のタイトル" /> <meta property="og:type" content="article" /> //トップページはwebsite、個別ページはarticle <meta property="og:description" content="記事の説明" /> <meta property="og:url" content="記事のURL" /> <meta property="og:image" content="画像のURL" /> <meta property="og:site_name" content="サイトのタイトル" /> <meta property="og:locale" content="言語" /> <meta property="fb:admins" content="facebookのユーザーID" /> //できればfb:app_idを利用 <meta property="fb:app_id" content="facebookのアプリID" />
localeは、日本語の場合は、ja_JPと記載するようです。 画像サイズは、180px × 180px以上のjpg or pngだそうです。
OGPの設定チェックは、debuggerというのでやります。 https://developers.facebook.com/tools/debug/
さて、ソーシャルボタンの独自デザインですが、aタグ使うと簡単でした。facebookのいいねボタンをjavascriptで表示させると読み込み遅延があり微妙でしたが、これだとそういうこともありません。でもfacebookだとシェアボタンであり、いいねボタンは難しいのかもと思いました。あと、カウントについてどう読み込んでいるのか調べてみたいと思います。
