スクロールしてもついてくる!ブログにソーシャルボックスをつけよう。
こんにちは、霙です。
ウェビメモ製作時に、ページをどんなにスクロールしても横にくっついて来るソーシャルボックスを作りました。
コードを教えて欲しいという方がいたので、他の方にも需要あるかな?と思い、記事にしてみました:)
自分のサイトに使いたい方はコピペしてご自由にどうぞ!
(IE6対応版にはこちら)
読者が利用するタイミング
みんなが設置しているソーシャルボタン。いざ自分のブログにつけるとなるとどこに置こうか迷いますよね。
記事の最初に設置するもよし、最後に設置するもよし、両方設置するもよし。
とにかく設置するにあたって重要な事は
「どこに置けば読者の方々に押してもらいやすいのか」です。
自分が読者の立場になった時はどうですか??
私は寂しがり屋なので、常に隣に居て欲しいんですよ・・・/////
てゆうのは冗談ですが、自分だったら記事を読む前にツイート数、はてブ数を見てます。
タイトルを見て「お、よさげ?」となり、ツイート数などを見て少なかったら流し読みしますし、多かったらガッツリ読む気で開きます。
そして記事を読み終わった後で良かったらツイートなりはてブなりをしますね。
まあ人それぞれタイミングは違うでしょう。だからこそずっと画面上にいて欲しいわけです。どんな方でもすぐ手の届く位置に設置すればよいわけなのです。
さて、コードです。
以下をコピペして頂ければあなたのブログにも可愛いソーシャルボックスたんが!
paddingやbottom値などは各自で調整願います。
HTML
<div id="wrap">
<ul id="social_box">
<li>お好きなソーシャルボタンのコード</li>
<li>お好きなソーシャルボタンのコード</li>
<li>お好きなソーシャルボタンのコード</li>
</ul>
<div id="main"></div>
<div id="side"></div>
</div>
ソーシャルボックス自体は<ul>~</ul>です。
それをメインカラム、サイドカラムと同じ階層に置けばよいです。
CSS
#wrap{
width:960px;
margin:10px auto;
}
#social_box{
background:#fff;
width:60px;
padding:15px;
margin-left:-100px;
text-align:center;
position:fixed;
bottom:30px;
list-style-type:none;
}
#main{
width:660px;
float:left;
}
#side{
width:300px;
float:left;
}
wrapのwidthはメインカラム+サイドカラムでOKです。
ソーシャルボックスはネガティブマージンを指定しているので関係ないみたいです。
ネガティブマージンについては以下の記事がとても参考になりました。
※2012.12.10追記
position:fixedをtop値で設定していましたが、小さい画面でも見切れない様bottom値に変更しました。
中身は何を置きましょう?
さて、大まかなレイアウトは終わりました。
あとはご自分が置きたいソーシャルボタンをどんどん並べるだけです:)
もちろん、ソーシャルボタン以外のものを置いてもよいでしょう。
うちのサイトみたいに、ページトップへ戻るボタンを置いたりとか。(コレすっごく操作性よくて病みつきになります)
ちょっとソーシャルボックスの中身におすすめなページをいくつかまとめときますね。
後で読み返す系
人に拡散系
- [公式]ツイートボタン
- TweetMeme Button | Tweetmeme Help
- [公式]Facebookいいねボタン
- Facebook のシェアボタンが設置出来なくて涙目なそこのキミぃー ☆ actyway
ちょっと面倒だなぁ。一発で全部つくれないの?
はい、5509さんで作れます。
mixiチェックとかもあります。(Facebookシェアボタンはありませぬ)
おまけ
ウェビメモのソーシャルボックスのようにjQueryでページトップへのリンクをしたい方はこちらの記事が参考になります。
その際、わたしのようなアホなミスはしないように注意してくださいねw
ボタン画像はご自分で用意してみてください:)
5/25追記
かっこいいPageTop用ボタンを発見しました!!
参考:Themes Kingdom
さいごに
このソーシャルボックスは読者のため、というのもそうですが、私は私のために置いています。
一番閲覧回数が多いであろう自分が使いやすければ、きっと読者も使いやすいんじゃないかなと思います。
みなさんも是非ブログにソーシャルボックスを設置してみてください!!
以上、霙でした!
この記事がお役に立ったら
いいね!お願いしまっす
(*´∨`*)
この記事を書いたみぞれしはTwitterをやっています
Follow @xxmiz0rexx