« バレーボール ウェアを売ってるAmazon。ソフトバレーボールもあるよ | トップページ | STRATREDと消費税3%時代 »

2011年6月10日 (金曜日)

ココログ無料版に「はてブ」やtwitter、Yahoo!ブックマークのアイコンをつける

 ブログのタイトルまわりに各種ブックマークとはtwitterのアイコンをつける機能が各種ブログサービスにありますが、ココログの無料版(ココログ ベーシック、ココログ フリー)では、それがなくテンプレートの編集もできない、ということで、以前、こういうのを書きました。
ココログ無料版に「はてブ」アイコンや登録数、twitterアイコンをつけるはてなブックマーク - ココログ無料版に「はてブ」アイコンや登録数、twitterアイコンをつける

 で、その後、はてブだけじゃなくてYahoo!ブックマークとかもつけたらいいかも、とか思いまして。また、以前の記事のコメントに「ココログの画像ポップアップが作動しなくなってしまいました」とあり、「jQuery.noConflict();の記述を加えることで、何とか両方が動作しました。」ともあったので、それも参考にしつつ、試していました。

 ということで、今回も以下のコードをココログの管理画面で「マイリスト」の項目に追加してみてください。

 設定タブで「メモをテキストとして表示」すること、管理タブで「タイトル」「アドレス」ではなく「メモ」欄にコードを入れるのがポイント。これで、項目がJavaScriptとして動作するはず。

(追記 2012年04月)
 上の段、間違い。古いです。現在は、マイリストの新規作成時に、「リストのタイプ」に「メモ」を選択(名前は適当)。ラベル欄はなし(空欄)のまま、備考欄にここで紹介しているコードを入れてください。
 アイコンファイルは各自どっかにアップロードして、そのURL(http://からはじまるやつ)を指定することを忘れずに。
<script type="text/javascript">
(function(){
 var d = document;
 var s = d.createElement('script');
 s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js';
 d.body.appendChild(s);
 setTimeout(function() {
  if(!window.jQuery) {setTimeout(arguments.callee, 100);
  } else {
    jQuery.noConflict();
    jQuery("a.permalink").each(function(){
      var u = jQuery(this).attr('href');
      var sep = ' <span class="separator">|</span>';
      var gp = jQuery(this).parent().parent().find("h3"); //●

      //はてな
      var a = '  <a href="http://b.hatena.ne.jp/add?mode=confirm&url=' + encodeURI(u) + '" target="_blank"><img src="◆アイコンファイルのURL◆" style="margin:0;padding:0;border:none;" width="16" height="12" alt="このエントリーをはてなブックマークに追加" /></a>';
      a += ' <a href="http://b.hatena.ne.jp/entry/' + encodeURI(u) + '" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/' + encodeURI(u) +'" style="margin:0;padding:0;border:none;" /></a>';

      //Twitter
       var twTitle  = encodeURI(gp.text());
       var twUrl    = u;
       var twLink = 'http://twitter.com/home?status='+twTitle + ' ' + twUrl;
       var t = '<a href="'+twLink+'" target="_blank"><img src="http://template.cocolog-nifty.com/images/twitter.gif"  style="margin:0;padding:0;border:none;" alt="Twitterでつぶやく" /></a>';       a +=t; //Twitter Icon

      //Yahoo!ブックマーク
       var y = '<img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" title="Yahoo!ブックマークに登録" alt="Yahoo!ブックマークに登録" style="border:none;" onClick="yb(&quot;' +u+ '&quot;,&quot;' + twTitle +'&quot;)">';
       a +=y; //Yahoo! bookmark button

      //jQuery(gp).after(a); //記事タイトルの次の行に表示したい場合▲
      jQuery(gp).append(a); //記事タイトルの行内に表示したい場合▲
      jQuery(this).after(sep + a); //記事の下に入れる場合▲
    });
  }
 }, 100);

})();

function yb(u,title){
 void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+title+'&amp;u='+u+'&amp;ei=UTF-8','_blank','width=550,height=480,left=100,top=50,scrollbars=1,resizable=1',0);
}
</script>
 それぞれのアイコンについてコメントがあるので、不要ならそのへんをばっさりカットしてください。アイコンファイルの指定は◆で囲んだ部分です。

 配置したい場所の指定は▲があるところを参照。行頭の「//」を外すととそこに表示、加えると非表示。3種類あるのでご自由に。

 今回もココログベーシックでテスト。テンプレートによってはうまくいかないかも。ココログ フリーのあるテンプレートでは、「●」のある行を

 var gp = $(this).parent().parent().parent().find("h3");//●

 とすることでうまくいったので、テンプレートによってはいろいろいじる必要があると思います。

 あまり需要はないとは思いますが、一応。なんか不具合あればコメントください。

(追記2012年4月)
 Yahoo!ブックマークが動いてなかった(ポップアップウィンドウが表示されない)ので一部修正。気になる方はいろいろご自身で試してみてください。

|

« バレーボール ウェアを売ってるAmazon。ソフトバレーボールもあるよ | トップページ | STRATREDと消費税3%時代 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/51905843

この記事へのトラックバック一覧です: ココログ無料版に「はてブ」やtwitter、Yahoo!ブックマークのアイコンをつける:

« バレーボール ウェアを売ってるAmazon。ソフトバレーボールもあるよ | トップページ | STRATREDと消費税3%時代 »