Facebook のシェアボタンが設置出来なくて涙目なそこのキミぃー

シェアボタン -Share Button-
もう使えなくなるのでしょうか〜?シェアボタン!

シェアボタン復活してたみたい!(追記:20131204)

追記です。いつから復活したのか不明ですけど、「Facebook developers」にてソースコードの取得が出来る様になっていますよ!

Share Button – Facebook developers

無いないっ!シェアボタンがなーい!

Facebook のシェアボタンがなんだか分からないけど、突然格好良く感じたのでブログに設置したくなりました!早速 Facebook からボタンのソースを入手して WordPress に貼りつけてやるー!と意気込んで Facebook にアクセスしてみたところ何故か見当たりません。Google 先生に聞いたところ、このページを見つけました。

→ Facebook、「Like」ボタンの機能を強化–「Share」ボタンの機能を統合 – CNET Japan

と言うことで〜、「Shere」ボタンは廃止されて「Like」ボタンになってしまうんですねー!仕方ないので「Like」ボタンで何か変わったこと出来ないかなー?と見てみました。

「Like」か「Recommend」ボタンで我慢!

早速ボタンのコードを入手してみたいと思います〜!

http://developers.facebook.com/docs/reference/plugins/like/
Like Button – Facebook開発者
このページよりボタンのコードが入手できますよー!

Facebook - Get Like Button Code
ボタンのコードを発行してくれるフォームはこんな感じです!

ボタンの種類?のところ(Verb to display)に「like」と「recommend」ってある!「recommend」ってなんでしょう@@?

「Recommend」ボタン?

Google 翻訳
Google 翻訳してみると、お勧めってでるんです!
調べてみると、日本では「おすすめ」ボタンみたいです。見たことあるような、無いようなー。

自力でわかりそうになかったので Twitter で聞いてみたところ @glatyou さんと @ub_pnr さんがお返事くださいました。

FB の「like」と「recommend」ボタンの違いがわからん〜><
良いねとおすすめって、そんなに違う??
誰かわかりませーん?Thu Apr 07 13:24:20 via web


@actywav ふぁぼとRTの関係に近い気がするなぁ。ぼくの感想だけど、ふぁぼは「個人的に好き」RTは「皆見て見て」じゃんね。僕はこれ役に立つ!とかウケる!とか思ってもわざわざ見て見て、って気持ちの時と、こいつ…!wwみたいなときないかなぁ?Thu Apr 07 13:27:15 via Janetter


@actywav 海外ですがニュースサイトなんかは recommend 使ってることが多い気がします。like だと悪いニュースの時に使いづらいですし。Thu Apr 07 13:38:03 via Echofon


「いいね!」はその人に対してで、「おすすめ」は他者に対してのアプローチって解釈でいいんかな??Thu Apr 07 13:36:50 via web


じゃぁ「おすすめ」の方がシェアボタンに近い感覚かな??Thu Apr 07 13:37:32 via web


@actywav あくまで俺の感想ですけどねw でも自分がそういうサイトに置くとしたら recommend にしますねー。Thu Apr 07 13:41:06 via Echofon


@actywav これはあくまで言葉のニュアンスとツイッタの話だから一緒じゃないかも知れんけどw例えば自分に向けてのリプが嬉しかった場合、それをわざわざ人には見せないじゃん?それと、コレ面白いから見てみ!とか役に立つよ!って違うじゃん。イイネもネタに対する喜びの表現でしかないと。Thu Apr 07 13:41:17 via Janetter


@actywav 自分の感想ですが、お役に立てたのなら何よりです。個人ブログにおくなら like でいいんじゃないですかね~・Thu Apr 07 13:48:26 via Echofon

 
少し端折っていますがこんな感じの流れでお返事をいただけました〜w
@glatyou さん、 @ub_pnr さんありがとうございました〜w

「Like」と「Recommend」どっち使う?

わたし的な解釈は、「Like」ボタンは気軽に「いいね!」って押せるボタンで、その「いいね!」って気持ちは他の人に分かってもらう為ではなく、例えばブログに設置してあるならブログを書いてる人に対して送っている感覚です。「Recommend」は「おすすめ」だから、どちらかと言うとそのブログを書いている人より、他者に対して「このブログの記事良かったよー!読んでみて〜w」とシェアボタンに近い感覚です!

よくばって両方表示してみた!

とりあえず「使用用途が違うんだ!」だから「両方表示させるんだ!」と思い、どちらも表示することにしました〜w
「おすすめ」の方はシェアボタンを意識して暗い色を選んでみました!

ソーシャルボタン

さっそく「いいね!」をポチっとしました。

ソーシャルボタン

すると、何故か「おすすめ」も押したことになってしまいます。
ボタンのコードを確認してもおかしいところはありません!
少し試してみてわかりました。

なんと「いいね!」も「おすすめ」もデータが反映される先が一緒なんです!

てっきり使用用途毎に別々に使える物だとばかり思っていました〜w
2種類を同時に設置しても意味ないんですね〜w
表示されている文字が違うだけで中身は同じだったんですね><っ

フォームの説明!

ボタンのコードを発行してくれるフォーム を色々といぢれば簡単に理解できると思いますが各項目の意味を書いておきます〜w

★ URL to Like
URL to Like
設置するページの URL(アドレス)を記入します。

Like Buttonのプラグインコード:
コードを発行すると iframe と XFBML の2種類を表示してくれるんですが、iframe だと URL を入力しないと正常に機能しません。逆に XFBML だと URL 入力しなくても JavaScript で表示する URL を自動取得してくれるみたいなので空でも OK みたいですよ。

★ Layout Style
Layout Style
レイアウトスタイルってそのままですが、standard、button_count、box_count の3種類から選べます。


↑ standard でーす!


↑ button_count でーす!


↑ box_count でーす!

★ Show Faces
Show Faces
いいね!、おすすめのボタンを押してくれた人のアイコンを表示するかしないかです。Facebook で友達関係にある人が押してくれていたら優先的に表示されると思います。上の Layout Style で standard を選んでいないとアイコンは表示されないんじゃないかな?どうなんだろw


↑ Show faces にチェックを入れたのでアイコンが表示される状態でーす!アイコン出てますか?w

★ Width
Width
ボタンを表示するエリアの横幅をピクセルで指定します。

★ Verb to display
Verb to display
like だと「いいね!」のボタンで、recommend だと「おすすめ」のボタンになります。


↑ いいね!でーす!


↑ おすすめでーす!

★ Font
Font
一応フォントも指定できるってことですねー。指定しなくても OK でーす!

★ Color Scheme
Color Scheme
カラースキーマ、配色です。青色と灰色から選べます。


↑ light で青色でーす!


↑ dark で灰色でーす!

ソースの説明!

こうゆうのをサイトに貼り付ける人ってある程度ウェブ理解されてそうなので特に説明することもないと思います、発行されたコードをHTMLファイルとか表示したい部分にペーストして試してみてください。

WordPress なら…

ここでは 「WordPress にいいね!ボタンをプラグインなしで表示する方法」を書いてみたいと思います。特に難しいこともなく、function.php に関数を作って表示したい場所で呼び出して表示するだけです。

function fb_likebutton(){
?>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=50" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:450px;height:50px;" allowTransparency="true"></iframe>
<?php
}

finction.php に書くコード
関数名とか適当です。もっとタグとか追加して好きに加工してくださーい!

<div class="fb-like"><?php fb_likebutton(); ?></div>

index.php や singles.php などに書くコード
表示させたい部分にコピペしてください。


↑ 実行するとこんな感じになります!

http://www.facebook.com/plugins/like.php ← GET で渡すプログラム
?href=<?php echo urlencode(get_permalink($post->ID)); ?> ← 記事の固定アドレスをURLエンコード
&amp;layout=standard ← standard、button_count、box_count のどれか指定 (Layout Style の値)
&amp;show_faces=false ← true か false を指定(アイコンを表示するかどうか)
&amp;width=450 ← 横幅
&amp;action=like ← like か recommend を指定
&amp;font ← 今回はフォントを指定してないので空っぽ
&amp;colorscheme=light ← light か dark を指定(配色)
&amp;height=50 ← 高さ

iframe の src 部分の説明です。
分かりやすいように改行とコメント入れてます。
コード発行のフォームの値が入ってきます。
変更して好きなボタンを表示したり試してみてくださ〜い!

本命のシェアボタンを表示する!

まだシェアボタンは使えているみたいなので、設置方法を書いておきたいと思います!
シェアボタンは全部で5種類あるみたいですよ!


↑ icon でーす!(アイコンのみ)

お好きな文字
↑ icon_link でーす!(アイコンと文字を表示したい場合)

Share
↑ button でーす!(ボタンのみ)

Share
↑ button_count でーす!(ボタン+小さいカウンター)

Share
 

↑ box_count でーす!(大きいカウンター)

ソースの説明!

今はもうシェアボタンのコードを発行してくれるフォーム(Facebook 公式)が無いみたいなので、他のサイトを参考にしながら試行錯誤してみたんですけど、どうも思った通りの動作をしてくれません。答えが分からず前進しないので手っ取り早く解決すべく http://static.ak.fbcdn.net/connect.php/js/FB.Share の JavaScript を読んでみました。
急がば回れですねw

ぁ、上記の思った通りの挙動は、通常なら設置した URL に関係なくどこに設置しようが、sharer.php に渡した URL を受け取ってくれると思っていたのですが、これが設置した URL のみでしか処理してくれません。
元々そうゆう仕様??

非公式ですけど…

とりあえずわたしが思っている挙動には出来たのでそのソースを貼っておきます!あくまでも非公式なソースってことで使って問題あっても知りません〜w

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php?u=シェアしたいURL&amp;t=ページのタイトル" share_url="シェアしたいURL">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

必要ヶ所を変更してください。

<a name="fb_share" ← fb_share はシェアボタンなので固定
type="box_count" ← icon、icon_link、button、button_count、box_count のどれか表示したいタイプを
href="http://www.facebook.com/sharer.php ← ゲットで渡すプログラム
?u=シェアしたいURL ← シェアしたいページの URL(日本語を含むならURLエンコードをお忘れなく)
&amp;t=ページのタイトル" ← ページのタイトル(日本語を含むならURLエンコード)
share_url="シェアしたいURL" ← シェアしたいページの URL(日本語を含むならURLエンコード)ここがポイント!JavaScript でここの値を使っています!share_url 全部を消してしまえば呼び出しページの URL で処理されます。
>Share</a> ← ボタンに表示される文字、好きな文字に変更 OK!
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> ← JavaScript 呼び出し

改行とコメント入れて説明するとこんな感じです。

<a href="http://www.facebook.com/sharer.php?u=シェアしたいURL&amp;t=ページのタイトル" target="_blank" title="Facebookでシェアする">文字かimgタグとか</a>

JavaScript が使えない環境ならこんな感じで良いと思います。

WordPress なら…

「WordPress にシェアボタンをプラグインなしで表示する方法」を書きます。特に難しいこともなく、function.php に関数を作って表示したい場所で呼び出して表示するって感じです。

function fb_sharebutton(){
?>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&amp;t=<?php echo urlencode(get_the_title()); ?>" share_url="<?php echo urlencode(get_permalink()); ?>">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<?php
}

finction.php に書くコード

<div class="fb-share"><?php fb_sharebutton(); ?></div>

index.php や singles.php などに書くコード

まとめ

Facebook のいいね!ボタンとシェアボタンの違いって現状あるみたいで、ボタンを押した後の挙動なんですが、いいね!ボタンはウィンドウも何も開かず1クリックだけで済んでしまいます。シェアボタンは新たにタブなりウィンドウなりが開いて、サムネイルを選んだりコメントを書いたりできますね〜w

どちらが良いかは押す側、押してもらう側の観点により違うと思いますが、いいね!ボタンとシェアボタンを統合するなら挙動も一緒にして欲しいなー!と1ユーザーの感想でした。

押してカウントされる先は、いいね!ボタンもシェアボタンも同じみたいです。

おまけ

シェアボタンの CSS を見てる時にボタンの背景画像を見てみたんですけど、色々なサイズが用意されていたんですね〜w
これはちょとびっくりしましたー!

connect_sprite