僕と私の物置き場

bloggerブログにボタン一発でソーシャルブックマークボタンを設置するツールを紹介します。
対応しているソーシャルメディアはFaceBook・Twitter・Google+・Digg・LinkedIn。
テンプレートの編集不要です。

ソーシャルボタンをウィジェットとして自動生成してくれるツールを利用すれば、テンプレートを編集しなくても簡単にbloggerにソーシャルメディア用ボタンを追加できます。

追加されるボタンは、ページスクロールに合わせて自動で動くフローティングボタンなので、デザイン的にもクール！

ツールを使ってbloggerにソーシャルブックマークボタンを設置

作業を始める前に、Google Bloggerにログインしておきます。

ログインしたら、Floating Social Media Buttons for Bloggerに進みます。下記のような画面が表示されるので、ボタンのデザインや利用するソーシャルメディアを設定します。

■ソーシャルブックマークボタン・設定画面

■ブログにボタンを追加しますか？します。




■ブロガーにウィジェットとして追加します。


ここで「タイトル」として入力したワードが、ソーシャルボタン用ウィジェットのタイトルになります。
後から変更できます。

追加したソーシャルボタンの編集・削除方法

追加したボタン用ウィジェットは、テンプレートのレイアウトメニューから編集や削除が可能です。

ウィジェットの追加は何度でも行えるので、設置後に気に入らない点があれば、一度ウィジェットごと削除してやり直すことも可能です。

また、デザインや表示位置をカスタマイズしたい場合も、ウィジェットの編集画面からCSSを編集又はテンプレートのCSSから編集する等でカスタマイズが可能です。

フローティングソーシャルボタンのアドバイス

ページのスクロールに合わせて動くボタンは、タグコードの記述場所に関わらず同じ動きをします。

分かりやすく言うと、ウィジェットの設置場所を「ヘッダー部分」にしても「フッター部分」にしても同じ表示になります。

WEBブラウザは、HTMLコードを上から順に読み込んで表示させるので、ソーシャルボタン用のウィジェットの設置位置は下の方がおすすめです。

そうすると、記事本文やカテゴリー等の重要な要素が読み込まれた後にソーシャルボタン表示用のスクリプトが実行されるので、コンテンツ部分の表示速度を邪魔しません。

紹介サイト：Floating Social Media Buttons for Blogger