2011年12月3日土曜日

Bloggerにソーシャルブックマーク&投稿ボタンを綺麗に設置する方法

FACEBOOK(LET) Frontside
"Original Update by GOIABA (Goiabarea) "

ソーシャルブックマーク&投稿ボタンの設置方法


今回導入してみたのはこちらの6つのサービスです。
Twitter Twitter Fb Facebook Gplus Google+ Tumblr tumblr Evernote Evernote Hatena はてなブックマーク

他にもYahooブックマークやGREE、mixiなど多くのボタンが設置できますが、あまり多く設置してもゴチャゴチャするだけなので、自分の使っているものだけにしぼりました。



Twitter
Twitterへの投稿ボタンです。説明はいらないですよね。
>Twitter / ツイートボタン

Facebook: いいね!ボタン
こちらは英語ですが、選択するとリアルタイムでどのようなボタンができるか表示されるので簡単です。
>Like Button – Facebook開発者

はてなブックマーク
こちらはソーシャルブックマークです。新しいボタンが使いやすくなっています。
>使いやすくなりました! はてなブックマークボタン
Google +
こちらはGoogleのSNS・Google+へ+1できるボタンです。Facebookの「いいね」のような感覚ですね。
>+1 をウェブサイトに表示

Tumblr
tumblrは登録してからずっと放っていたんですが、最近久々に見たらハマりました!
面白い情報があふれていますね。
>Tumblr共有ボタン

Evernote
これはEvernoteに簡単にクリップできるボタンです。全部のサイトが設置してくれると便利ですね!私は買い物から仕事の予定、ちょっとしたメモまで全部Evernoteに入れて、どこでも見れるようにしています。
>サイトメモリーって何?

Bloggerへの設置方法

JavaScriptや書き方に制約のないブログサービスを使っている方なら、上記のリンクから取得したコードをそのまま貼りつければ使えると思いますが、Googleのブログサービス「Blogger」を利用している方は、このまま貼るとエラーが出て使えません。 「&」の部分を「&」に直さなければ必ずエラーが出ます。 しかも、そこを訂正しHTML内に記載しても、綺麗に横に並んでくれずガタガタに表示されてしまいます。
最初liタグで綺麗に横に並べようと思ったのですが、なぜかうまく表示されませんでした。
ちゃんと検証するまえに、今回はdivタグに変更しました。
下記のコードをBloggerのレイアウトテンプレートのHTML編集より記載します。
コードは< head >と< /head >の間に入れます。< /head>の直前に入れるのが分かりやすいと思います。
編集する前に必ずテンプレートのバックアップを行なってからやってください。失敗すると今まで設定したものが水の泡になってしまいます。
あとはdivで囲ったものに調整を加えます。
.sns_btn  {
margin: 10px 0px 0px 0px; 
padding: 0px; 
width:490px; 
}

.sns_btn .twitter { 
float: left; 
margin: 0px 10px 0px 0px; 
padding: 0px; 
display: inline; 
width: 82px; 
}

.sns_btn .facebook { 
float: left; 
margin: 0px 10px 0px 0px; 
padding: 0px; 
display: inline; 
width: 100px; 
}

.sns_btn .evernote { 
float: left; 
margin: 0px 10px 0px 0px; 
padding: 0px; 
display: inline; 
width: 52px; 
}

.sns_btn .hatena-bookmark{ 
float: left; 
margin: 0px 10px 0px 0px; 
padding: 0px; 
display: inline; 
width: 21px; 
}

.sns_btn .gplus{ 
float: left; 
margin: 0px 10px 0px 0px; 
padding: 0px; 
display: inline; 
width: 60px; 
}

.sns_btn .tumblr{ 
float: left; 
margin: 0px 10px 0px 0px; 
padding: 0px; 
display: inline; 
width: 90px; 
}

私は上記のような数値にしました。「mixi」や「Yahoo!ブックマーク」などを追加するときは、それぞれの値を調整してみてください。