さらなる検証を行った結果、必ずしも「４番目」とは限らないようです。
訂正いたします。
詳細は8月5日のブログに記載しますので、そちらをご確認ください。
【追記ここまで】
タイトルを読んでも何のことかわからないと思います。
画像で説明します。
これが、アメブロに設置した「いいね！ボタン」です。
そして、これを押すとFacebookの自分のウォールに、次のように表示されます。
上の画像中の赤丸で囲った部分に表示される画像。
これが今回の課題です。
昨日、いいねボタンを設置して、早速押してみたらこんな画像が表示されました。
ここに表示される画像は、metaタグで設定することができます。
詳しくは、佐渡ヶ島＠こさどさんのブログで御覧になってください。
FacebookのOpen Graph Protocol（オープングラフプロトコル）の設定の仕方
http://ameblo.jp/kosado/entry-10866825431.html
--引用はじめ--
で、今回Facebook用にOpen Graph Protocol（オープングラフプロトコル）を記載してみよう！ということなのですが、実はこれ、、、HTMLのヘッダー特にMETAタグがいじれないとお話になりません。つまりアメブロでは無理～～。なんですよね。
--引用おわり--
アメブロでは正規の方法で表示される画像を設定することはでません。
metaタグで指定のない場合、imgタグで指定された画像の中から１つを選ぶとのことです。
これは仕方ないと思いますが、いくらなんでも、ツイートボタンを表示することはないと思います。
あまりに酷いのでなんとかできないか試してみましたら、変える方法が見つかりました。
「metaタグで指定のない場合、imgタグで指定された画像の中から１つを選ぶ」
この選び方にある規則があるようなのです。
1. imgタグで指定された画像を、ページの上から（ソースコード）順にピックアップする
2. 重複している画像がある場合、先にあるものを優先し後から出てきたほうはピックアップしない
3. ピックアップされた画像のうち最後から４番目がFacebookのウォールに表示される
ある程度の大きさのある画像でないとピックアップされないようなのですが、この部分は詳細確認できていません。
「最後から４番目」の画像、ここがポイントです。
今回表示されてしまった「ツイートボタン」より前にいくら画像があっても関係ないのです。
記事本文は「ツイートボタン」より前にありますので、記事本文中の画像がFacebookのウォールに表示されることはありません。
では、どうすればいいか。
「ツイートボタン」より後ろにくる「フリースペース」にimgタグを貼るのです。
今回は以下の２行を貼りました。
<img style="visibility:hidden; height:1px;" src="http://stat.ameba.jp/user_images/20110727/18/tsuyoshi0812/df/ad/j/o0720054011377199021.jpg" />
<img style="visibility:hidden; height:1px;" src="http://stat.ameba.jp/user_images/20110728/09/tsuyoshi0812/47/8a/j/o0300022511378437735.jpg" />
タグの中の画像ファイルの指定が正しければ、画面が表示されなくても構いません。
但し、本文中など別のところで使った画像は重複でカウントされないので注意が必要です。
この２行を加えたことにより、「最後から４番目」の画像は１行目に指定した画像になります。
前述のソースコードの赤文字の部分に、表示させたい画像を指定してください。
但し、レイアウトの違いによって、「最後から４番目」が、どこになるのかは違ってきます。
以下のツールで、実際に表示される画像が何になるか確認することをお勧めします。
http://developers.facebook.com/tools/lint