2011.08.09
Yoshi 開発

ソーシャルメディアボタン

今回はネタが無いので・・
この記事の中で今流行のソーシャルメディアボタンでも設置してみようかなぁ・・と思います。

まずソーシャルメディアボタンとは何か?という方の為に説明から・・・。
ソーシャルメディアとは(引用
オンライン上で、ユーザー同士が情報を交換(送受信)することによって成り立っているメディア。「1対多」「多対多」の双方向で、画像・動画を含む視覚ツールを使ったコミュニケーションが可能なことも特徴とする。
一般には、ブログをはじめ、2ちゃんねる、YouTubeなど閲覧者を制限しないオープンなサービスと、mixi(ミクシィ)、GREE(グリー)、モバゲーに代表される会員制・招待制のソーシャル・ネットワーク・サービス(SNS)に分けられる。最近は、上限140字の「つぶやき」をチャット感覚で投稿し、フォロワーとのゆるやかなコミュニケーションをはかるTwitter(ツイッター)が人気を集めている。
ということはソーシャルメディアボタンとは、ボタンがある記事やニュースの事を自分の利用しているSNSに対してすぐにつぶやいたり、ブログに書いたりできるようにする為のボタンだと私は思っています・・。

最近はどこでもよく見るようになりましたので、アメブロや楽天ブログなどの大手ブログサイトでも標準でついていたりします。
設置自体はすごく簡単で、SNSのサイトにはボタンを作ってくれる専用ページが存在しており、そこで発行されたタグをページに埋め込むだけ。

それでは実際に設置をしてみます。

まずはTwitter
以下のサイトに遷移すると日本語でわかりやすく書いてあるので特に作成には困らないと思います。
※言語選択のタブから日本語を選択すると日本語になりますが、デフォルトは英語です。
https://twitter.com/goodies/tweetbutton


<a href=”https://twitter.com/share” data-count=”horizontal” data-lang=”ja”>ツイート</a><script type=”text/javascript” src=”https://platform.twitter.com/widgets.js”></script>

簡単すぎる・・・。

続いてfacebookのいいね!ボタン
facebookは日本語での作成ができませんが、twitterと同様でそのままの設定を変更する必要なく設定できます。
ただこちらもデフォルト英語表記ですので、発行されたタグの中のコードに含まれる「en_US」の部分を「ja_JP」に変更する必要があります。

https://developers.facebook.com/docs/reference/plugins/like/

<div id=”fb-root”></div><script src=”https://connect.facebook.net/ja_JP/all.js#xfbml=1″></script><fb:like href=”” width=”450″ show_faces=”true” font=””></fb:like>

次にmixiのチェックボタンですが、こちらは今までと違い少し手間がかかり、
mixiのデベロッパー登録をしないとチェックボタンを付ける事ができません・・。
https://mixi.jp/guide_developer.pl

設置しようと思ったのですが、なんせ時間が無く・・・・面倒なので・・・・今回はスルーします。

次にGREEのいいね!ボタン

https://developer.gree.co.jp/connect/plugins/sf
下の方に行くと、iframe出力サイトというのがありますのでそこから作成します。

<iframe src=”https://share.gree.jp/share?url=http%3A%2F%2Fbitstar.jp%2Fblog%2F%3Fp%3D389&type=0&height=20″ scrolling=”no” frameborder=”0″ marginwidth=”0″ marginheight=”0″ style=”border:none; overflow:hidden; width:100px; height:20px;” allowTransparency=”true”></iframe>

GREEは他のSNSと違い、ボタンを設置するURLを自分で入力する必要があります。
その為、ブログの記事につけたりする際は、タグのURLを動的に変更させる必要がありますね。

とはいえ、GREEも簡単に設置できました。

GREEの「url=http%3A%2F%2Fbitstar.jp%2Fblog%2F%3Fp%3D3894」のここさえ変更すれば、他のボタンはタグをそのままコピーして
他のサイトに張り付けても動作するので、一度作成してしまえば流用がきいていいですね。

次回は、mixiを設置するか違うボタンをいくつか付けてみたいなぁと思います。

Yoshi

一覧に戻る