Facebookやtwitterやmixiのボタン設置まとめ

snsbo1.gif
このブログでもそうなんですが、Facebookやtwitter、mixiなどのソーシャルメディアへの誘導を促すためのボタンを色々付けてみたのでまとめてみました。

Facebookの「Share」と「いいね」

まずは、この頃いろいろと話題になっているFacebookです。
Facebookのボタンには、Facebookの友達間で共有するための「Share」ボタンと、自分の備忘録的に使えるような「いいね」ボタンがあるので、それぞれ用途にあわせて付けてみて下さい。
まずは。Shareボタンから。

「Share」ボタンのつけ方

FavebookのShareボタンは、これをチェックすると、Facebookの自分のページに写真付きで表示され、自分の友人達に知らせることが出来るので、共有目的に付けるといいですね。twitterボタンとかmixiボイスに投稿ボタン的な感じでしょうか。
(1)FacebookのShareボタン設置ページに行く。
(2)Shareボタンの作成を行う。
(3)作ったコードを自分のサイトに貼り付ける。
以上で完成なので、簡単ですね。facebookの説明ページも日本語だし。

「いいね」ボタンのつけ方

つづいても同じくFacebookの「いいね!」ボタンです。
こちらは、どちらかというと、共有を目的というよりも、自分のためにそのページに対するブックマークとかタグを付ける的な目的で設置します。
はてなブックマークとか、Read it laterのようなイメージでしょうか。
(1)Facebookのボタン作成ページへ行く。
※英語で分かりづらいですけど、あまり気にせずに。
(2)作成ページにおける設定。
 ①URL to Like欄は、通常は空欄。もしくは特定の1ページにLike表示をさせたい時だけ当該URLを入れてください。
 ②LayoutStyleは、三種類の中からお好きなスタイルを選んで下さい。
 ③Widthは、自分のお好きなサイズを。ただ、50pxにしちゃうと、途中で表示が切れちゃったりするので、80pxくらいが丁度良いのかと思います。
 ※残りの欄は、あまり影響ないと思うので、自分のお好きなように適当に選んで下さい。
(3)コードを作成したら、その一部を変更させる。
これは、それぞれのブログ環境によるのですが、作成したコード内の「href=」のイコールの後ろ部分と、「&amp」のアンド前ををれぞれのブログ環境における個別ページのURLを表すタグ等に変更します。
僕の場合ですが、以下のようにいれました。
例)・Movabletypeの場合
 ここの部分に<$MTArchiveLink$>を入れる。
  ・seesaaブログの場合
 ここの部分に<% article.page_url %>を入れる。
まあ、これは各ブログやページ環境によると思うので適切なタグを入れてみて下さい。
(4)作成したコードを設置する。

twitterボタンを設置する

つづいては、twitterの「この記事をツイートする」ボタンの設置です。
以前は、自分で作成したりしてたのですが、twitterの公式作成ページが出来たので非常に楽勝です。
(1)twitterの公式作成ページに行く。
  ※自分のアカウントにログインしておいて下さいね。
(2)ページの指示に従って作成する。
※この時、貼り付けるのが個別ページの時だと問題ないですが、TOPページにおいて、各ページへのリツイート数を表示させるような場合、TOPページのリツイート数が表示させないで、各記事のツイート数を表示させるために、URL欄の初期表示させるURLの部分は<% article.page_url %>等のタグをつけといて下さい。
(これはseesaaブログにおいて、トップページに各記事のリツイート数を表示させる場合です。)
(3)作成したコードを自分のサイトに貼る。
  

mixiチェックをつける

つづいては、この頃CMもお盛んなmixiチェックです。
Facebookがこの頃盛んですが、それはあくまでアーリーアダプターの間だと思うんですよね。
何だかんだで、マジョリティなSNSといえばmixiだと思うので、mixi系も付けておきましょう。
(1)mixiのディベロッパー登録をする。
mixiチェックを付ける場合、このディベロッパー登録が必要なので、このページで自分のアカウントをディベロッパー登録しておきましょう。
(2)登録し終えたら、ディベロッパーダッシュボードのmixiPlugin にて、自分のサイトを登録してチェックキーを発行する。
※この登録後、どうしてもmixiチェックがうまく動かなかったのですが、確認してみたらサイト名の末尾に「/」(スラッシュ)が抜けていただけだったので、注意して入力してみてください。
(3)チェックキーを発行したら、自分のサイトに、以下を埋め込む。

<a href=”http://mixi.jp/share.pl” class=”mixi-check-button” data-key=”チェックキー” data-button=”button-1″>Check</a>
<script type=”text/javascript” src=”http://static.mixi.jp/js/share.js”></script>

※このチェックキー部分に発行したチェックキーを埋め込んで下さい。
※また、各タグのカッコが大文字になってますので、小文字に直してください。
コチラの各サイトもご参考に
mixiの公式技術仕様
ブログにmixiチェックを設置 – F.Ko-Jiの「一秒後は未来」

はてなブックマークを入れる

つづいては、はてなブックマークです。
はてなブックマークについては、はてなの公式サイトにブックマークボタンとそのページのブックマー数表示のつけ方についての説明があるのでそちらを参考にしていただければと思います。
はてなブックマークボタンのつけ方
自分のブログに「○○users」を表示する
主要どころは、上記のものかなと思うのですが、他にgreeのボタンとか、Evernoteへのクリップとかいろいろありますよね。
あまりやり過ぎるとごちゃごちゃしすぎちゃう気がするのですが、とりあえず代表的なものだけ付けてみました。