ソーシャルボタンを設置してみる
ヘッドライン
ここ最近の、ホームページでのアクセス流入というものは、半分は検索エンジン、半分はソーシャルメディアからのアクセスです。
いいね!や、ツイート、はてなブックマークなどがたくさんされていればされているほど、アクセスが伸びます。
いわば、容易にいいね！・ツイート・はてブができるページとできないページでは同じような情報でも、倍以上アクセスが違ってくると考えてください。
ソーシャルボタンとは
ソーシャルボタンは、主に（効果的なもの）、Facebook、Twitter、Google+1、はてなブックマークなどがあります。
それ以外にも、mixi、Line、Evernote、etc…数え上げたらきりがありません。
全て設置するのもいいですが、効果的なものだけでも設置したほうがいいでしょう。
ソーシャルボタンのためにロードタイムを犠牲にしないように
ソーシャルブックマークを一つのタグコードで差し込んでくれるようなクラウドサービスもあります。
当初私も面倒くさがりということもあり、そちらを設置していました。
しかしながら、そのクラウドコードを呼び出し、出力するのに異常なくらいの時間が必要でした。
何度か説明したと思いますが、ロードタイムが遅くなればなるほど、品質が下がったとみなされますので、時間を犠牲にはしたくないものです。
また、システム的に多少遅くなるのは仕方がないとしても、実際の本文エリアの表示に影響しないように考えて設置してください。
HTML文最下段に設置することで、本文エリアを読み込んでからソーシャルボタンのロードが始まる
私が行った施策は、まずは最低限のソーシャルボタンとして、Facebook、Twitter、Google+1、はてなブックマークのアクセス効果があるといわれているソーシャルボタンと、スマホで閲覧した方に、友人にまた紹介してほしいという意図を込めてLineのボタンを設置しました。
これらのほとんどは、ボタン画像を設置してリンクを張るという形式の物ではないため、Facebook等の外部サーバーへ接続する必要が出てきます。
どうしても、設置前よりロード時間が伸びるのは致し方のないところです。
ただ、本文エリア、要は人間が見たとき、各ページの本文エリアのロードに影響してほしくないので、本文をすべて書き切った最下段でソーシャルボタンを描画するようにタグコードとしては最下段に設置。これにより、全体のロードタイムは少々伸びたが、人が見たときの実測はさほど変わらない状況になりました。
最下段に設置→最下段に表示。ではない。
もちろん、そうすればいいということは誰しもが感じ思うことです。
ただ、それはそのソーシャルボタンを最下段に設置するだけにすぎず、要は目立たないところに設置しただけのことです。
だからと言って、目立つ上部にもってこれば本文を読み込む前にボタンの描画が始まるしそれだけ全体を表示するまでに時間がかかるということにつながるわけです。
そういったことで結果的に面倒になり、また、設置する意味を見いだせなくなり、設置しないという方も増えます。
少なくとも、設置しないという選択肢は、自らアクセスが半分でいいといっているようなものです。
スタイルプロパティ【position】を知っていますか?
スタイルのプロパティにpositionという項目があります。
この項目は、ボックス要素に設定すると、そのボックス要素をどのポジション（位置）に持ってくるかを決めることができます。
positionに設定できる値に【fixd】と【absolute】と言う値があります。
実は、この値を設置すると、ほかのボックス要素との関係性が”無くなり”、そして指定された座標位置にそのボックスが描画されます。
どういうことかと言いますと、最下段に書いたボックス要素のpositionプロパティが”fixd”になっていると、最下段に記載したボックスが、指定した座標位置に好きに登場してきます。
例を以下に記します。
<div id=”side-snsbox” style=”width: 100px; position:fixed; left: 30px; top: 250px; border: 2px solid #000; background-color: #6cf;border-radius:5px;”>このボックスの出し方の説明が下段に記載されています。<br /><button onclick=”document.getElementById(‘side-snsbox’).style.display=’none’;”>非表示</button></div>
上記のスタイルを設定したものが、当ページを開いたときに左側に出てきた青いボックスですね。
当ページでもそうしていますが、このボックスはHTML文の最下段に書いてあります。
positionをfixed（一定）の位置に設定することで、HTML構文としては最下段のボックス要素ですが、見た目はほかの要素に関係がなくなり、指定された座標位置に表示してくれるようになるのです。
座標位置は、leftや、topというプロパティで指定しており、leftプロパティなら左端からの位置、topなら上端、bottomは下端、rightは右端からの位置になります。
これを利用して、表示上は、上部や下部に設置しつつも、HTML構文は好きな位置に記載することが可能になります。
absoluteは、スクロールしても固定
fixedとabsoluteという値は、要素を位置固定する設定です。
fixedは、画面上の座標位置に固定となり、absoluteというのは画面座標位置ではなく、HTML内の絶対座標位置に表示されます。
どう違うのかというと、absoluteで指定した場合は画面スクロールしても、その要素はついてこない、fixedだと、その要素はスクロールしてもついてくるという違いです。
用途によって使い分ければいいでしょう。
さて、このpositionプロパティを利用することで、下段位置に記載したボックス要素を上部の見える位置、もっというと、本文エリアの横などに設置することができるようになるため、先ほどん、本文を表示してからソーシャルボタンを表示しつつも画面上は目立つ上部に設置という裏ワザが使えます。
これらを利用すれば様々なことができるようになります。
たとえば、画面中央にある程度の大きさのボックス要素をfexedで設置し、その中にメルマガ応募フォームなどを記載。
良くあるセールスレターのメルマガ購読とか無料レポートの配信などを実現できます。
たとえば、最上部やサイドにメニューを設置し、スクロールしても、ずっと表示されるように描画することで、簡単に固定メニューを作ることができます。
javascriptなど設置の必要がない
実は、このような固定枠の表示はこれ以外でもいくつか実現できる方法はあります。
一つはfloatプロパティを利用した方法です。
本文エリア全体を一つのボックス要素で囲み、同じレベルにソーシャルボタンの要素、そして、本文エリア全体のボックス要素にfloatをかければ、回り込んで表示してくれますので、同じようなものが実現できます。
しかし、レイアウトボックスを一つ作る必要があり、私からすれば不要なネスト構造を1階層増やすだけだと感じますのであまり選びたくない。
次に、javascriptなどで実現できないわけではないのですが、こちらもそれだけのためにマシンパワーを使わせるのはいかがなものか。と感じます。
万能ではない。デメリットもあり
このpositionプロパティでどうにもならないのは、座標絶対位置に表示という設定のため、画面解像度の低いマシンなどで見た場合に重なって見える可能性がある。
ということです。
簡単に実現する方法としては、ブラウザを最大画面で表示ではなく、自由に調整がきくようにして、幅を小さくしてみてもらえばわかると思いますが、指定された座標位置に表示するため、横幅が小さいと、本文エリアの上に乗っかるように表示されてしまうこともあります。
なので、非表示ボタンをつけ、いつでもボックスを消すことができるようにしておくことと、あとは、ボックス要素の順番を意識したほうがいいでしょう。
z-indexというプロパティがあり、数字が大きくなればなるほど上部に表示されます。
なので、最上部に表示したければ大きい数字を下段に配置したければ小さい数字を表示すればいいはずです。
ちょっと頑張って作ってみたサイト
このボックスの出し方の説明が下段に記載されています。