「いいね!」ボタンを押したときのテキスト・画像を指定する方法

Pocket

「いいね!」ボタンを押したとき、ウォールに表示されるタイトルや文章、画像。
何も指定しなければ、そのページのtitleタグとdescriptionの値が表示され、ページ内にある「50px×50px以上、縦横比が3:1以下のPNG、GIF、JPEGファイル」画像がランダムに選ばれるらしいです。

それは困る!と言う場合は、以下のタグを追加。

<meta property="og:title" content="表示したいタイトル"></meta>
<meta property="og:type" content=website></meta>
<meta property="og:url" content="http://xxxxxxxxxx.com"></meta>
<meta property="og:image" content="http://xxxxxxxxxx.com/images/fbimg.jpg"></meta>
<meta property="og:site_name" content="サイトタイトル"></meta>
<meta property="og:description" content="表示させたい文章を入れる。"></meta>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>

これを追加したら実際に「いいね!」を押してウォールに掲載される内容を確認して…「あっれ!?内容が変わってない!!」という場合は下に。

Facebookのキャッシュをクリアする方法

上記の方法でタグを入れた&内容を書き換えたのに、実際に「いいね!」ボタン押してみたらウォールに掲載される内容が古いまま!!
なんてことが起こります。

原因は…Facebook側のキャッシュ
WEBページの内容が更新されているのにFacebook側はキャッシュを表示しおるので古いサムネール画像や本文が表示されてしまいます。

解決策として、Facebookが「http://developers.facebook.com/tools/debug」という機能を用意してくれているのでコレを使います。

このページにアクセスして、キャッシュをクリアしたいwebページのURLを入力すれば最新情報に変わります。

Pocket

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>