« Firefoxでページ内画像を一気にぶっこ抜けると聞いたので、リンク先の画像も取得できるようにしてみた | トップページ | 調子の悪い遠方のPCをネットワーク越しに直すためにしたこと メッセンジャー リモートアシスタンス システムの復元。 »

2010年9月 7日 (火曜日)

ココログ無料版に「はてブ」アイコンや登録数、twitterアイコンをつける

(追記)改良版作りました。ココログ無料版に「はてブ」やtwitter、Yahoo!ブックマークのアイコンをつける(追記おわり)


 ココログ ベーシック、ココログ フリーはテンプレートの編集ができない。完全無料のフリーはともかく、@niftyの会費を払っているベーシックなら多少はできてもよさそうなものだけど、できないのだ。

 やりたいことは、

 記事タイトル周りに、「はてなブックマーク」の登録アイコンと、はてブ登録ユーザー数を表示したい
 
 そして、

 ついでに「twitterでつぶやく」アイコンをつけたい

 てな感じ。twitterアイコンはココログの機能でもできるのだけど、記事の下にしかつかないし、位置もいまいち。というわけで、なんとかしたいのである。

 思いついたのはJavaScriptでなんとかする方法。DOMでごにょごにょすればいいのは思いつくのだけど、jQueryを使い始めた今となっては、いちいちDOMDOMしたコーディングは面倒に感じたのも確か。そんなときに見つけたのが、遅延ロードでJavaScriptのお勉強 - Born Neetという記事。これ使えば、簡単にできそう。

 ということで、作ってみた。以下のコードを、ココログの管理画面で「マイリスト」の項目に追加すればいい。
 設定タブで「メモをテキストとして表示」すること、管理タブで「タイトル」「アドレス」ではなく「メモ」欄にコードを入れるのがポイント。これで、項目がJavaScriptとして動作する。
 アイコンファイルは各自どっかにアップロードして、そのURL(http://からはじまるやつ)を指定することを忘れずに。
 

<script type="text/javascript">
 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 {
    $("a.permalink").each(function(){
      var u = $(this).attr('href');
      var sep = ' <span class="separator">|</span>';
      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;" 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;" /></a>';
      var gp = $(this).parent().parent().find("h3");//●
       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;"alt="Twitterでつぶやく" /></a>';
       a +=t; //Twitter Icon
      //$(gp).after(a); //記事タイトルの次の行にしたい場合▲
      $(gp).append(a); //記事タイトルの行内に表示したい場合▲
      $(this).after(sep + a); //記事の下に入れる場合▲
    });
  }
 }, 100);
</script>

 以上。結局、けっこう長くなってしまった。

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

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

 とすることで、うまくいった。HTMLの構造を見ていろいろ試すことになるかも。

 また、表示方法のカスタマイズは▲のある行あたりを参照。行頭の「//」(コメント)をはずしたり、加えたりしてみてください。


|

« Firefoxでページ内画像を一気にぶっこ抜けると聞いたので、リンク先の画像も取得できるようにしてみた | トップページ | 調子の悪い遠方のPCをネットワーク越しに直すためにしたこと メッセンジャー リモートアシスタンス システムの復元。 »

コメント

 はじめまして。
 ココログにはてなブックマークのアイコンを設置したくて、検索で辿り着きました。書かれているJavascriptを使うことで、希望通りのことが実現できました。ありがとうございました。

 ただjavascriptを使うことで、ライトボックスを利用したココログの画像ポップアップが作動しなくなってしまいました。Javascriptの知識が全くない中、色々と検索してみたところ、ココログの画像ポップアップで使用しているmootoolsとバッティングしていたようです。共存方法が書かれたページを参考にして、jQuery.noConflict();の記述を加えることで、何とか両方が動作しました。もしかしたら変な記述をしているのかもしれませんが、とりあえず自分のブログで動作しているので良しとしています。

 役に立つJavascriptをありがとうございました。

投稿: EF Mania | 2010年11月19日 (金曜日) 午後 05時47分

こんにちは。
お役に立ててなによりです。

ほかのスクリプトとのバッティングとかはまったく考えてませんでしたが、なんとかなったようで、これまたなによりです。

また、ご報告ありがとうございます。こちらもアップしてよかったと思えてうれしかったです。

投稿: ここの人 | 2010年11月21日 (日曜日) 午後 11時18分

こんにちは

大変役に立つ記事を書かれていますね
帰ってからこちらの記事を参考に管理画面と格闘してみます

投稿: ユウぱぱ | 2012年4月14日 (土曜日) 午後 01時30分

ユウぱぱさんのブログ、拝見しました。で、おせっかいながらページをダウンロードの上、テストしてみました。

当ページで紹介しているコードの改良版(冒頭にリンクあり)を、ダウンロードしたユウぱぱさんのページに貼り付けたところ、問題なく動作しました。

テンプレートのタグのうち、パーマリンクおよびタイトルまわりが、当方のブログとユウぱぱさんのブログで、ほぼ同じような構成だったのでOKだったのではと思います。

すでに入れてあるマイリストのうち、アクセス解析があるところとかに入れるといいのではないかと思います。一度お試しを。

投稿: ここの人 | 2012年4月19日 (木曜日) 午前 09時53分

こんばんわ

検証していただき
ありがとうございます

こちらのページを
ブックマークするのを忘れていて
随分と経ってしました
申し訳ないです(__)

時間ある時にやってみたいと思います

投稿: ユウぱぱ | 2012年9月17日 (月曜日) 午前 12時05分

こんにちは。

試してみてなにか問題などありましたら、コメントください。できる限りお答えしたいと思います。

投稿: ここの人 | 2012年9月21日 (金曜日) 午後 12時23分

コメントを書く



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




トラックバック

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

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

» ココログ無料版に「はてブ」やtwitter、Yahoo!ブックマークのアイコンをつける [point of view point]
 ブログのタイトルまわりに各種ブックマークとはtwitterのアイコンをつける機能が各種ブログサービスにありますが、ココログの無料版(ココログ ベーシック、ココログ フリー)では、それがなくテンプレートの編集もできない、ということで、以前、こういうのを書きました。 ココログ無料版に「はてブ」アイコンや登録数、twitterアイコンをつける: point of view point  で、その後、はてブだけじゃなくてYahoo!ブックマークとかもつけたらいいかも、とか思いまして。また、以前の記事のコメ... [続きを読む]

受信: 2011年6月10日 (金曜日) 午後 04時13分

« Firefoxでページ内画像を一気にぶっこ抜けると聞いたので、リンク先の画像も取得できるようにしてみた | トップページ | 調子の悪い遠方のPCをネットワーク越しに直すためにしたこと メッセンジャー リモートアシスタンス システムの復元。 »