2010年7月22日木曜日

Bloggerにソーシャルブックマークボタンを追加した。

スポンサーリンク

Bloggerにソーシャルブックマークボタンを追加してみました。
今まで手をちょびちょび手を加えて来た過程で、はてブ(はてなブックマーク)とBloggerのソーシャルブックマークガジェットを導入はしていました。
しかし、日本のヤフーブックマークが無かったりと少々求める機能にかけていたので、この点を補う為に追加を考えました。

ソーシャルブックマークボタンの追加の為に、参考情報を探して作業を完了するまでかなり時間がかかりました。
勉強になった反面、思わぬところでミスをして時間をロスしたりと反省点も多々あります。
が、実装が完了したのでとりあえず良しとしています。



今ままでに導入しているソーシャルブックマークボタン


前書きで少し触れていますが、今回の追加前の段階でソーシャルブックマークのボタンを導入はしていました。

1つは「はてブ」。
タイトルの下にあるボタンですね。
いまいち表示が直らない部分もあるのですが、求める用途は満たせている状態です。
はてブは現在日本で主流のソーシャルブックマークですので、やはり付けておきたいと思い一番最初に付けました。

次に導入したのは、もともとbloggerのガジェットに含まれていたソーシャルブックマークのボタンです。
ただ、以前のテンプレのやり直し前にはいくらがんばっても表示できませんでした。
テンプレをやり直した後にようやく表示ができ、利用できるようになった次第です。
ブックマークの内容は、

  • メールで送信
  • Blog this!
  • teitterで共有
  • facebookで共有
  • Google バズで共有

です。
通常であれば導入は簡単なので、bloggerを使っていてソーシャルブックマークを手軽に付けたい方にはおすすめです。
導入が簡単で利便性の高い機能を使う事は、いろいろな面で有意義ですから追加をためらう必要も無いかと思います。

Sexy Bookmarksの導入


今回新たに導入するソーシャルブックマークボタンは、その名も「Sexy Bookmarks」!
調べる気力が無いので調べていませんが、なかなか意味ありげな名前です。
もっとも、理由はおそらくマウスオーバー時の動きにあるかとは思いますが。

どんなソシャルブックマークボタンかと言えば、

という感じのボタンです。
おそらく一度は目にしているボタンではないでしょうか?
少し大きめな所が良かったのと、デザイン的に合わない事は無いだろうと導入を決めた次第です。

さて、今回参考にさせて頂いたサイト様はここです。


bloggerに限りませんが、非常に役立つ記事をエントリーしている方のサイトです。
といっても、私は今回の調べ物で初めてこちらを知ったのではありますが...。

リンク先の記事にはソーシャルブックマークの導入について書かれています。
その記事の下の方にSexy Bookmarksの事が書かれています。
内容的には少しカスタマイズしました。という感じでしょうか。

私自身欲しいボタンは限られていたので、こちらの記事を参照しつつ画像を作り変えたりリンクを張り替えたりして導入にこぎつけました。

記入したコード


bloggerの</head>の直前にある ]]></b:skin> の直前に下記のコードを入れ込みます。
なお、前もって「ウィジェットのテンプレートを展開」にチェックを入れておきます。
div.sexy-bookmarks {position:relative; width:468px; height:54px; margin:20px 0 0 0; }
div.sexy-bookmarks span.sexy-rightside {position:absolute; right:-17px; width:17px; height:54px; }
div.sexy-bookmarks ul.socials {position:absolute; bottom:0; left:10px; margin:0; padding:0;}
div.sexy-bookmarks ul.socials li {display:inline-block; list-style-type:none; float:left; margin:0; padding:0;}
.sexy-button {display:block; width:70px; height:50px; float:left; background:url('http://lh4.ggpht.com/_qhAFU-XO7nQ/TEY0RVqk6PI/AAAAAAAAANg/rEFHXTjAUtQ/s800/sexyspritenew_03.png') no-repeat left top !important; text-indent:-9999px; overflow:hidden;}
a:hover.sexy-button {text-decoration:none;}
.sexy-twitter {background-position:0 -41px !important;}
a:hover.sexy-twitter {background-position:0 0 !important;}
.sexy-facebook {background-position:-70px -41px !important;}
a:hover.sexy-facebook {background-position:-70px 0 !important;}
.sexy-googlebuzz {background-position:-140px -41px!important;}
a:hover.sexy-googlebuzz {background-position:-140px 0 !important;}
.sexy-hatena {background-position:-210px -41px !important;}
a:hover.sexy-hatena {background-position:-210px 0 !important;}
.sexy-yahoo{background-position:-280px -41px !important;}
a:hover.sexy-yahoo{background-position:-280px 0 !important;}
.sexy-livedoor {background-position:-350px -41px !important;}
a:hover.sexy-livedoor {background-position:-350px 0 !important;}

画像のURLはpicasaにUPした画像へのパスに変更しました。
また、英文字の背景画像も取り去りプレーンな背景にしています。

次に私の場合はここに入れようという場所がありましたので <div class='post-footer'> の直前に下記のコードを埋め込みました。
他の場所に表示させる際は場所に目的の場所に応じて、挿入箇所を帰る必要があります。
<b:if cond='data:blog.pageType == "item"'>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li><a class='sexy-button sexy-twitter' expr:href='" http://twitter.com/home?status=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Twitterでつぶやく'>Twitterでつぶやく</a></li>
<li><a class='sexy-button sexy-facebook' expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Facebookで共有する'>Facebookで共有する</a></li>
<li><a class='sexy-button sexy-googlebuzz' expr:href='"http://www.google.com/buzz/post?" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='googlebuzzで共有する'>googlebuzzで共有する</a></li>
<li><a class='sexy-button sexy-hatena' expr:href='"http://b.hatena.ne.jp/append?" + data:post.url' rel='nofollow' target='_blank' title='はてなブックマークに登録する'>はてなブックマークに登録する</a></li>
<li><a class='sexy-button sexy-yahoo' expr:href='"http://bookmarks.yahoo.co.jp/action/bookmark?t=" + data:post.title + "&u=" + data:post.url' rel='nofollow' target='_blank' title='Yahoo! ブックマークに登録する'>Yahoo! ブックマークに登録する</a></li>
<li><a class='sexy-button sexy-livedoor' expr:href='"http://clip.livedoor.com/redirect?link=" + data:post.url + "&title=" + data:post.title +  "&jump=myclip"' rel='nofollow' target='_blank' title='livedoor クリップに登録する'>livedoor クリップに登録する</a></li>
</ul><span class='sexy-rightside'/>
</div>
</b:if>

以上です。
ちなみに、ソーシャルブックマークのボタンの内、ツイッターにつぶやく為のボタンにはまだ少し手を加える必要があるかなと思います。
とりあえずは使える状態かと思いますが...。
リンク先をどこにするのかと言うのを含めて、渡すパラメータを増やしたいところです。

結び


ソーシャルブックマーク機能を追加する際に、今回初めてコードをすこし弄りました。
デザイン以外の慣れない部分を触った所為か、コピペミスやそれに伴うタグの閉じ忘れ等が起こり時間が無駄にかかってしまいました。
最近ほとんど使っていなかったDreamweaverを起動させバリデートを行うとOKで、bloggerに貼付けるとOUTを何度繰り返したやら...。
作業自体は普通のコーディングと変わらないので、妙な緊張の所為かとは思います。
ただ、勉強になったのも確かので、とても小さく一歩を踏み出せたかなとも思います。
結局、突っ込んでみて、改造して、ちゃんと機能させる事を繰り返す方が物覚えも早いはずですし。

なんとか時間を見つけて、こういうのももっと出来ればともいます。

最後になりましたが、「Bloggerカスタマイズ情報ブログ」様の記事を大いに参考にさせて頂きました。
ありがとうございます。

ブログデザインの変更に伴い、現在は外しています。

スポンサーリンク

0 件のコメント :

コメントを投稿