2011.07.08

facebookシェアの実装時に起きた問題

AUTHOR

こんばんわ、yasuiです。
今回は初めてまとめネタ以外で記事を書こうと思います。
最近流行のfacebookのシェアについてです。
躓いたことがいくつかあったので、原因と解決方法をまとめておきます。

1.facebookの「シェア」とは?

facebookのウォールに表示される、リンクのことです。Twitterで言うところのつぶやきでのようなものです。
Twitterであればタイトル、URLしかつぶやけませんが、facebookのシェアでは画像とタイトル、説明文、URLをシェアすることができます。

2.facebookのシェアに必要なこと

facebookのシェアはとってもカンタンです。
まずやることの確認。

  • シェアのリンクを張る
  • OGPを設定する

これだけです。とってもカンタンですね。
それではまずは基礎的なところから…。

3.シェアのリンクを張る

<a href="http://www.facebook.com/sharer.php?u=[シェアしたいurl]&t=[シェア投稿時のタイトル]" rel="nofollow" target="_blank">リンク表示したい文字または画像</a>

ボタンなどを使わずにリンクを貼る場合は上のソースの通りです。
ブログなどでみる、facebookのボタンからシェアを実装したい場合は、下のようにになります。

<a name="fb_share" type="ボタンのタイプ" share_url="シェアしたいurl">シェアする</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

4.OGPを設定する

まずOGPとは何か。OGPとはOpen Graph Protocolの略称で、このWEBページがどういうものなのか、
という情報をプログラムが理解できるように書く記述方法のことです。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    <title>facebookシェアの実装時に起きた問題 | disスタッフブログ</title>
    <meta property="og:title" content="facebookシェアの実装時に起きた問題 | disスタッフブログ">
    <meta property="og:type" content="article">
    <meta property="og:description" content="facebookのシェアを実装してみたら、色々問題が起こったので、解決策をブログにまとめてみました。">
    <meta property="og:url" content="http://dis.ne.jp/blog/topics/3660.html">
    <meta property="og:image" content="http://dis.ne.jp/blog/entryimg/share_2.png">
    <meta property="og:site_name" content="disスタッフブログ">
  </head>
  <body>

こんな風に書きます。このブログのタイトル、説明文などを記述することができます。
ちなみに指定しなかった場合、シェアのタイトルには、そのままhtmlソースのtitleタグが、
説明文には、metaタグのdescriptionから引っ張ってくるようです。

この時サイトのURLや画像のURLは、相対パスではなく絶対パスを指定する必要がありますので、ご注意を。
OGPで画像を指定しなかった場合、サイトで使用されている画像の中からランダムに選ばれてしまいます。

詳しくはこちらのサイトをご覧下さい。とても分かりやすいです…!
「フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記」
「Facebookなどで使われている「OGP」の一覧」

5.OGPで設定したタイトルや画像が出てこない

以上で設定は終わりです。
これで実際に動くはず!なんですが、実際に動かしてみると、ちゃんとOGPで指定しているタイトルや画像が出てきません。
どうしてこんなことが起こるのか。

結論から言えば、これはfacebook側のキャッシュが残っているからです。
一度でもOGPを設定していない状態で、facebookのシェアを実行してしまうと、
facebookにシェアのキャッシュが保存されてしまいます。
これはfacebook側のキャッシュなので、
クライアント側でブラウザのキャッシュを消したところで意味がありません。

facebookのキャッシュはすぐに消えるようなものではなく、結構長いこと残っているみたいです。
いつ消えるか分からないものを待ってもいられませんので、キャッシュを消してくれるツールを使います。

「URLリンター」
このツールは元々、シェアを行った時にどのようにタイトルや画像が出てくるか、ということを確認するために使うツールです。
本来の使い方ではりませんが、副次的にキャッシュも消してくれるというありがたいツールです。
当たり前ですが、BASIC認証かかってるURLはチェックできません。
(私はコレをやってしまってしばらく悩みました…。)

6.タイトルや説明文は指定のものが出てきたけど、画像が出てこない!

一定の大きさがないと出てきません。
どこからいけるのか検証はしていませんが、150px×150pxだと上手くいきました。
画像が出てこない!と思ったら、サイズを確認しましょう。

ちなみに、facebookのシェアはこれからなくなっていくらしく、今後はイイネ!に統合されるそうです。
いきなりシェアが使えなくなったりしたら困りますね…。
個人的には、ウォールに文字だけ出てくるイイネ!より、画像も出てくるシェアの方が好きなんですけども。
facebookさんは仕様をガンガン変えてくるので、これからも注意して動向を追っていかなければと思います。

戸田@ドアズ社長ブログ

  • No items
PAGE TOP