Google＋1（プラスワン） Mixiチェック Facebookいいね！ はてなブックマーク ボタンの設置

Google＋1　Twitterのツイートボタン、Facebookいいね！　はてなブックマーク　ボタン、Mixiチェック　
この5点セットを自分のホームページに設置する方法を紹介します。
ホームページは、ブログでもいいし、静的サイトでも可能ですが、静的サイトの場合phpで作って置くと、１セット作っただけで共通ファイルとして全ページへ読み込みできるので便利です。

---

１）Google＋1（グーグルプラスワン）ボタンの設置


http://www.google.com/webmasters/+1/button/
ここへ行って、コードを取得して、サイト内のソースへ貼り付けします。

---

２）Twitterのツイートするボタン

ここへいって、コードを取得します

 http://twitter.com/goodies/tweetbutton

---

３）facebookのいいね！ボタン

ここでコードを取得します

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

---

４）はてなブックマークのボタン

ここでコードを取得できます。

http://b.hatena.ne.jp/guide/bbutton

---

５）Mixiチェックのボタン

これが一番ややこしかったので丁寧に解説しますね。

5-1）mixiにてdeveloper登録をします

https://mixi.jp/guide_developer.pl

Mixiのパスワードを入れてすすみます

個人情報を入れて、デベロッパーとしての登録をします。

登録したあと、携帯での認証があるので、携帯メールアドレスを入れて送信し、

すぐに認証してください。

5-2）デベロッパーにログインしてから、

http://developer.mixi.co.jp/

MixiPluginというのを選んで、新規サービス開始

必要事項を入れて、同意するにして、内容を登録します

↓ここで、「タグを取得」すると、コードが出てくるのですが

これをそのままホームページのHTMLに貼り付けすると「Mixiいいね」ボタンになってしまいます。

イイネボタンじゃなくてMixiチェックにするにはもうひとつ工程が必要です。

5-3）Mixiチェックボタンにコードを入れる

下記のコードをホームページのHTMLに貼り付けてから、

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

先ほどMixiDeveloperで取得した、識別キーをはりつけます。
ボタンのタイプは、data-button="button-★"　←この★のところに番号を

---

6）HTMLとCSSの調整

一例ですが、ulで囲んで、それぞれのボタンをリストにして、フロートさせています。

個別にIDをふっておけば、何か微調整したくなったときに便利です。

---

7）phpにしてサイト内に読み込む

上記のコードをワンセットにして、例えばlike.phpというファイル名で保存
（ファイル内に日本語がある場合、文字コードには気をつけてください。文字化けするようなら、頭に一行


＜meta http-equiv="Content-Type" content="text/html; charset=utf-8"＞


を追加しておくと正しく読み込まれることがあります。


そして、phpファイルを読み込むようにすれば完成です。
phpではなく、htmlで作っている場合は、Dreamweaverなどのソフトを使って、テンプレートに入れるか、ライブラリーに書き込んで必要箇所に挿入すればOKです。