LoginSignup
1
0

More than 5 years have passed since last update.

Facebookのいいね!ボタンを複数ページに設置する

Posted at

TODO

Facebookタグのコードを生成する

いいね!ボタン(ウェブ用)でコードを生成する
この作業は一度だけでOK

コード書く

取得した上記jsファイルを設置し、HTMLをよしなに編集する。
ここまでは一般的ないいね!ボタンの設置方法。

titleを変更する

ページごとに異なるtitleをつける。

<title>blar blar</title>

metaタグを変更する

ページごとに異なるmetaタグをつける。

<meta property="og:title" content="XXX-XXX" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://xxx.xxx/" />
<meta property="og:image" content="http://xxx.xxx/xxx.jpg" />
<meta property="og:site_name" content="XXX" />
<meta property="fb:admins" content="*********************" />

困った時

上記の設定で異なるページに同じ(tilte||meta)タグを使ってしまうと他のページのいいね!数を取得してしまう。
一度取得してしまうとコード上で修正することはできないようなのでOpen Graph Debuggerと呼ばれるFacebookのデバッガを利用する。

デバッガのページを開くと下記の画面が表示される。
ここに該当ページのURLを打ち込み、Debugボタンを押す。

スクリーンショット 2017-05-18 12.14.42.png

すると下記の画面が表示される。
Scrape Againボタンを押すことで正しく設定したURLが反映され、いいね!数もリセットされる。
スクリーンショット 2017-05-18 12.15.01.png

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0