Facebookのシェアボタンをブログに設置しよう! | 佐渡の洋食屋店長のブログ

佐渡の洋食屋店長のブログ

佐渡の洋食屋店長のマニアックなブログです。 グルメネタは少なく、マニアックなネットTEC的なネタ、佐渡ネタが豊富なブログです。


テーマ:
え?いいね!ボタンがあるから要らないって?
いやいや、違うんですって・・・Facebookのシェアボタンにはシェアボタンのいい所があるんですよ。

例えば、このアメブロにいいね!を押してくれた方のウォールを見てみましょう。

$佐渡の洋食屋店長のブログ-Facebokのシェアボタンを押すと・・・

こうなりますよね。
OpenGraphProtocol(オープングラフプロトコル)を設定していないと画像サムネイルが選べないのです。
OGP(オープングラフプロトコル)についての記事はこちら。

ですが、シェアボタンならこういうことも出来るんです!

$佐渡の洋食屋店長のブログ-shareボタンを押してサムネイルを選ぶ

ほらね?同じ記事ですが、サムネイルがわかりやすく表示されましたね。
これ、実際使ってみるとひじょ~~~~~~~に便利です。
デメリットをあげるとすれば、いいね!ボタンはワンアクションで記事を自分のウォールに反映できますが、シェアボタンは別ウィンドウが立ち上がり、「リンクをシェア」のボタンを押さないと反映されません。ツーアクションなんですね。

メリットとしては、以下があげられます。

1、サムネイル画像が選択出来る。
2、シェアした記事を自分のウォール、友達のウォール、グループのウォール、自分が管理しているフェイスブックページのウォール、メッセージと選択出来る。
3、投稿する際の公開範囲が選べる。


では、実際に付けるのはどうすれば?
あ、めっちゃ簡単だったりします。
以下のコードを埋め込むだけです。

<a name="fb_share" type="button" share_url="【サイトのURL】">【ボタンに表示したい文字】</a>

<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>



こういう感じですね。
↓↓↓↓↓↓↓↓↓



ボタンを押すとウィンドウが立ち上がると思います。

操作方法は以下の画面のようになります。
$佐渡の洋食屋店長のブログ-シェアボタンをAmebloに付けてみる


これをアメブロに設置するにはどうすればいいのか?
どこに設置するか?によりますが、私の場合はコメント欄の上に設置しております。

コメント欄プラグインとGoogle+1ボタンと複合で設置しておりますので、以下のようなソースになってます。


<script>
$(function(){prohibitedTagsUse();});
</script>
<script type="text/javascript">
var current_uri = window.location.href;
var fb_notif = current_uri.indexOf("fb_comment_id=");
if (fb_notif != -1) {
var url = current_uri.substring(0, fb_notif);
window.location.replace(url);
}
</script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'ja'}
</script>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=205198886175941&amp;xfbml=1"></script>
<script type="text/javascript">
var html = '<div id="fb-comments"><table><tr><th nowrap><g:plusone></g:plusone></th><th nowrap><a name="fb_share" type="button" share_url="">この記事をFacebookでシェアしてください♪</a></th></tr></table><div id="fb-root"></div><fb:comments href="%%current_uri%%" num_posts="10" width="420" migrated="1"></fb:comments></div>';
html = html.replace('%%current_uri%%', window.location.href);
document.write(html);
$(document).ready(function(){
uri = window.location.href;
_uri = encodeURI(window.location.href);
if (_uri.indexOf('/entry-') != -1) {
$("#fb-comments").insertAfter("#exLinkBtn");
} else {
$("#fb-comments").hide();
}
});
</script>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>


これをコピペして、フリープラグインのところにペタっとやるわけです。
もし上手くいかない!なんて方はコメント欄にブログURLを付けてどういう風に上手くいかないかお知らせください。がんばってレクチャーいたします。

また、他のブログにも同様に付けられます。
各ブログによってつけ方が違いますので、ご相談には乗りますが・・・カスタマイズ料金を取るかもしれませんw
(親密度による・・・。)





ブログ読者登録はこちらです。
↓↓
読者になる

こさど@伊藤善行さんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス