だるかぶ
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
訳あって、Facebook のいいねボタンと OGP を設置したのでメモしておきます。 いいね！ボタンと OGP のタグは、Like Button – Facebook 開発者 のページで生成できます。
[ Step 1 ] いいねボタン用のタグを生成
次のようなフォームがあるので、必要事項を入力していきます。
各項目の役割は次のとおりです。
-
URL to Like
いいねボタンを設置するページの URL -
Send Button
送るボタンの表示・非表示 -
Layout Style
ボタンレイアウトのスタイル -
Width
ボタンの幅 -
Show Faces
いいねした人のアイコンを表示・非表示 -
Verb to display
[ いいね！] か [ おすすめ！ ] か -
Color Scheme
ボタンの色 -
Font
フォント選択。日本語だと無意味っぽい
あとは、[ Get Code ] クリックしてコードを生成し、ページのボタン設置場所にコピペします。
[ Step 2 ] OGP 用のメタタグを生成
次のようなフォームがあるので、必要事項を入力していきます。
各項目の役割は次のとおりです。
-
Title
設置するページのタイトル -
Type
ページの種類 -
URL
設置ページ URL -
Image
サムネイル画像 -
Site name
サイト名 -
Admin
Facebook のユーザー ID
※ サムネイル画像は、180x180px ぐらいが良さげです。
Type ( og:type ) の設定は、ページの種類によって書き換えます。
-
website
サイトのトップページ -
blog
ブログのトップページ -
article
その他のページ
あとは、[ Get Code ] クリックしてコードを生成し、ページの head 部分にコピペします。
[ Step 3 ] html 要素に属性を追加
次のような感じで、html 要素に属性を追加します。
<html xmlns:og="http://ogp.me/ns#">以上で設置完了です。お疲れ様でした！
正常にいいねボタンが設置できたかテスト・デバッグする
いいねボタンを設置したら、実際にボタンを押してテストすればいいのですが、ボタンを押してしまうと、
-
外部に公開されてしまう。
-
Facebook 側のキャッシュに残り、後々の調整作業が面倒になる。
などの理由から、Debugger – Facebook 開発者 と言うテストページで OGP の内容を確認するのが良いようです。
また、上記のページに URL を入力する事によってキャッシュが削除されます。 ただし、それまでに押してもらった [ いいね！] のカウントはリセットされるので注意が必要です。
参考にさせてもらったページ
ありがとうございます！
現場からは以上です。それでは、またッ！！！
だるかぶ
