blogに各種ソーシャルブックマーク、各種RSSのフィードリーダ登録ボタン設置2

記事一覧

blogに各種ソーシャルブックマーク、各種RSSのフィードリーダ登録ボタン設置2

また再度この話題が蒸し返す訳

　以前、各種ソーシャルブックマークの登録ボタンを設置とかやった訳なのですが
　 http://neco.st/blog/archives/6.html

　なんかもっとこの発想から凶悪に発展した例を見つけちゃいまして。
　http://www.vippers.net/blog/2006/12/post_8.html

　こいつぁ凄い！　と言うことで早速パクることにしました。
　が、ただ単にパクるのもあれなので、以前から導入しようと思っていた二つばかり新要素を付け加えてみることに。

　まず１つめの要素が、各種RSSリーダの登録ボタンの設置。
　次に、はてなダイアリーにある http://d.hatena.ne.jp/hatenadiary/20060919/1158656911の機能を追加することでした。

　まず始めに承前として http://neco.st/blog/archives/6.htmlを読んで置いてください。（でないとこの記事だけでは改造方法が解らないかも知れません）
　このblogシステムWeb Diary Professionalでの改造方法の基礎と手順が書いてあります。また、応用例として他のblogシステムでも使えるようにするためのこのシステムでの変数の説明とかも載っていますので、応用が利くかと思います。

手初めにRSSリーダのボタンを設置

skin/navigation.htmlの中で、表示して欲しい辺りで適当に

<div class="block">
<h2>フィード</h2>
<dl>
<dt>各種RSSリーダー登録</dt>
<dd><a target="_blank" href="http://www.bloglines.com/sub/${INFO_PATH}?plugin=Rss2" title="Bloglinesで閲読登録"><img src="${INFO_URL}skin/img/sub_modern11.gif" alt="Bloglinesで閲読登録" /></a></dd>
<dd><a target="_blank" href="http://fusion.google.com/add?feedurl=${INFO_PATH}?plugin=Rss2"  title="Add to Google"><img src="${INFO_URL}skin/img/add.gif" width="104" height="17" alt="Add to Google" /></a></dd>
<dd><a target="_blank" href="http://add.my.yahoo.co.jp/rss?url=${INFO_PATH}?plugin=Rss2" title="My Yahoo!に追加" ><img src="${INFO_URL}skin/img/addtomy1.gif" width="91" height="17" alt="My Yahoo!に追加" /></a></dd>
<dd><a target="_blank" href="http://r.hatena.ne.jp/append/${INFO_PATH}?plugin=Rss2" title="ADD TO Hatena::RSS"><img src="${INFO_URL}skin/img/addto_w.gif" width="89" height="22" alt="ADD TO Hatena::RSS" /></a></dd>
<dd><a href="http://reader.livedoor.com/subscribe/${INFO_PATH}?plugin=Rss2" target="_blank" title="Subscribe with livedoor Reader"><img src="${INFO_URL}skin/img/91_17_1.gif" width="91" height="17" alt="Subscribe with livedoor Reader" /></a></dd>
<dd><a target="_blank" href="http://www.rojo.com/add-subscription?resource=${INFO_PATH}?plugin=Rss2" title="Subscribe in Rojo"><img src="${INFO_URL}skin/img/add-to-rojo.gif" alt="Subscribe in Rojo" /></a></dd>
<dd><a target="_blank"  href="http://a.hatena.ne.jp/append?${INFO_URL}" title="このblogをはてなアンテナに追加" ><img src="${INFO_URL}skin/img/a_append.gif" width="16" height="12" alt="このblogをはてなアンテナに追加" /></a></dd>
</dl>
</div>

　とか入れる、これで終わり。ボタンの画像とか、事前に記述した場所に突っ込んでおくのも忘れないようにしましょう。と言うかその辺の手順は前回書いたとおりです。ちなみに、今回からtitle=の値はimg要素中ではなくa要素に入れることにしました。
　あと。RSSリーダの並び順に深い意味はないので、お好みで順序は変えると良いと思います。

次に、はてなブックマークのコメントを見るボタンを

　今回一番苦戦したのはこれでした、最初意味がわからず、Arvined氏（http://arvined.ath.cx/blog/?itemid=47）から「jsファイルが必要」と言われたので、それを導入したらすんなりいきました、というわけでBookmarkCommentViewer.jsと言うファイルをダウンロードしてきてください。
　はてなの公式サイトか、面倒なら私が会社blog用に置いた http://www.dears.co.jp/news/BookmarkCommentViewer.jsのファイルを保存して適当なところにアップしてください。（私はcgiと同じ階層に置きましたが/skin/や新たに/js/フォルダを掘っておくのが賢明でしょう）
　そして、skin/header.html中のどこでも良いのですが、はてな公式の記述に従うのであればhead要素内に

<script type="text/javascript" src="${INFO_URL}BookmarkCommentViewer.js" charset="utf-8"></script>

　の一文を追加します。
　そしてskin/diary.html中のソーシャルブックマークボタンの中で、はてな系のボタンの後辺りに

<li><img style="width: 13px; height: 13px;" src="http://r.hatena.ne.jp/images/popup.gif" onclick="javascript:BookmarkCommentViewer.iconImageClickHandler(this, '${ARTICLE_URL}', event);" title="このエントリーのブックマークコメント" alt="このエントリーのブックマークコメント" /></li>

　と記述すればhtml的には完了なのですが、この状態でボタンを押していただければ解るのですが、出力結果が美しくありません。
　そのため、skin/common.cssをいじる必要があります。
　common.cssの適当なところに、以下の記述を私は入れました、細かい部分の設定は、各自でblogのデザインなどに合わせて変更すると良いでしょう。

/* Hatena
------------------------------------------------------------------*/

.hatena-bcomment-view {
  background-color:#fff;
  border-top:1px solid #CCC;
  border-left:1px solid #CCC;
  border-right: solid 1px #999;
  border-bottom: solid 1px #999;
  position: absolute !important;
  display: none;
  word-break  : break-all ;
  word-wrap   : break-word ;
  width: 400px;
  text-align:left;
  margin:0 !important;
  padding:0 !important;
  font-weight:normal !important;
  font-size:90%;
  z-index:100;
  color:#000 !important;
}

.hatena-bcomment-title {
  margin:0 !important;
  padding:3px 5px  !important;
  text-indent:0 !important;
}

.hatena-bcomment-title img {
  vertical-align: middle !important;
  margin: 2px 2px 2px 4px !important;
}


.hatena-bcomment-view ul {
  width: auto;
  overflow: auto;
  overflow-y:auto;
  border-top: 1px solid #5279E7;
  background-color: #edf1fd;
  list-style-type: none;
  padding: 5px 8px !important;
  margin: 0px !important;
  line-height: 150%;
}
.hatena-bcomment-view ul li{
  text-indent:0 !important;
  margin:0 !important;
  padding:0 0 2px 0 !important;
  font-size:90%;
  background:trasparent !important;
}
.hatena-bcomment-view ul li span.hatena-bcomment-tag a{
  color:#6365CE; 
  font-family:"Arial",sans-serif;
  margin:0 3px;
}

　これで、はてなダイアリーのような感じではてなブックマークのコメント一覧を表示できるようになります。これが今回一番のキモかも知れません。そして、前述のサイトで見たようにさらに大量のソーシャルブックマーク系のボタンを足して…結果

<ul class="info">
<li><a href="javascript:(function(){var a=window,b=document,c=encodeURIComponent,d=a.open('http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk='+c(b.location)+'&amp;title='+c(b.title),'bkmk_popup','left='+((a.screenX||a.screenLeft)+10)+',top='+((a.screenY||a.screenTop)+10)+',height=420px,width=550px,resizable=1,alwaysRaised=1');a.setTimeout(function(){d.focus()},300)})();" title="Add 'Google bookmark on Social Bookmarks Plugin' to Google"><img src="${INFO_URL}skin/img/googlebookmarklet.gif" title="${ARTICLE_SUBJ}のエントリーをGoogleBookmark に追加" alt="${ARTICLE_SUBJ}のエントリーをGoogleBookmark に追加" /></a></li>
<li><a target="_blank" href="http://del.icio.us/post?url=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}" title="${ARTICLE_SUBJ}のエントリーをdel.icio.usに追加する"><img src="${INFO_URL}skin/img/delicious.gif" width="12" height="12" alt="${ARTICLE_SUBJ}のエントリーをdel.icio.usに追加する" /></a></li>
<li><a target="_blank" href="http://b.hatena.ne.jp/append?${ARTICLE_URL}" title="${ARTICLE_SUBJ}のエントリーをはてなブックマークする"><img src="${INFO_URL}skin/img/append.gif" alt="${ARTICLE_SUBJ}のエントリーをはてなブックマークする" width="16" height="12" /></a></li>
<li><a target="_blank" href="http://b.hatena.ne.jp/entry/${ARTICLE_URL}" title="${ARTICLE_SUBJ}のエントリーを含むはてなブックマーク"><img src="${INFO_URL}skin/img/b_entry.gif" alt="${ARTICLE_SUBJ}のエントリーを含むはてなブックマーク" height="12" width="16" /></a></li>
<li><img style="width: 13px; height: 13px;" src="http://r.hatena.ne.jp/images/popup.gif" onclick="javascript:BookmarkCommentViewer.iconImageClickHandler(this, '${ARTICLE_URL}', event);" title="${ARTICLE_SUBJ}のエントリーのブックマークコメント" alt="${ARTICLE_SUBJ}のエントリーのブックマークコメント" /></li>
<li><a target="_blank" href="http://b.hatena.ne.jp/entry/${ARTICLE_URL}"><img src="http://b.hatena.ne.jp/entry/image/large/${ARTICLE_URL}" alt="&amp;nbsp;" /></a></li><br />
<li><a target="_blank" href="http://clip.nifty.com/create?url=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}" title="${ARTICLE_SUBJ}のエントリをニフティクリップに追加"><img src="${INFO_URL}skin/img/nifty_add.gif" width="14" height="14" alt="${ARTICLE_SUBJ}のエントリをニフティクリップに追加" /></a></li>
<li><a target="_blank" href="http://clip.livedoor.com/clip/add?link=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}" title="${ARTICLE_SUBJ}のエントリをLivedoor クリップに追加"><img src="${INFO_URL}skin/img/ld_add.gif" width="16" height="16" alt="${ARTICLE_SUBJ}のエントリをLivedoor クリップに追加" /></a></li>
<li><a target="_blank" href="http://bookmark.fc2.com/user/post?url=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}" title="${ARTICLE_SUBJ}のエントリをFC2ブックマークに追加"><img src="${INFO_URL}skin/img/fc2_add.gif" width="16" height="16" alt="${ARTICLE_SUBJ}のエントリをFC2ブックマークに追加" /></a></li>
<li><a href="http://news.ecnavi.jp/config/add/confirm?url=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}" target="_blank" title="${ARTICLE_SUBJ}のエントリーをECナビ人気ニュースに追加"><img src="${INFO_URL}skin/img/icon_pencil.gif" alt="${ARTICLE_SUBJ}のエントリーをECナビ人気ニュースに追加" height="12" width="12" /></a></li>
<li><a href="http://pingking.jp/bookmark/?url=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}" target="_blank" title="${ARTICLE_SUBJ}のエントリーをPingKingポッケに追加"><img src="${INFO_URL}skin/img/pingking.gif" alt="${ARTICLE_SUBJ}のエントリーをPingKingポッケに追加" height="12" width="12" /></a></li>
<li><a href="http://pookmark.jp/post?url=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}" rel="nofollow" title="${ARTICLE_SUBJ}をPOOKMARK Airlinesへ追加" target="_blank"><img src="${INFO_URL}skin/img/pookmark.gif" width="18" height="16" alt="${ARTICLE_SUBJ}をPOOKMARK Airlinesへ追加" /></a></li>
<li><a href="http://bm.saaf.jp/bm/add?url=${ARTICLE_URL}" title="${ARTICLE_SUBJ}をSaafブックマークへ追加" target="_blank"><img src="${INFO_URL}skin/img/saaf.gif" width="16" height="16" alt="${ARTICLE_SUBJ}をSaafブックマークへ追加" /></a></li>
<li><a href="http://www.choix.jp/bloglink/${ARTICLE_URL}" title="${ARTICLE_SUBJ}をChoixへ追加" target="_blank"><img src="${INFO_URL}skin/img/choix.gif" width="16" height="16" alt="${ARTICLE_SUBJ}をChoixへ追加" /></a></li>
<li><a href="http://technorati.com/faves?add=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}" title="${ARTICLE_SUBJ}のエントリーをTechnorati に追加" target="_blank"><img src="${INFO_URL}skin/img/technoratibookmarklet.gif" alt="${ARTICLE_SUBJ}のエントリーをTechnorati に追加" height="16" width="16" /></a></li>
<li><a href="http://www.furl.net/storeIt.jsp?t=${ARTICLE_SUBJ}-${INFO_TITLE}&amp;u=${ARTICLE_URL}" title="${ARTICLE_SUBJ}をFurlへ追加" target="_blank"><img src="${INFO_URL}skin/img/furl.gif" width="16" height="16" alt="${ARTICLE_SUBJ}をFurlへ追加" /></a></li>
<li><a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=${ARTICLE_URL}&amp;Title=${ARTICLE_SUBJ}-${INFO_TITLE}" title="${ARTICLE_SUBJ}をBlinklistへ追加" target="_blank"><img src="${INFO_URL}skin/img/blinklist.gif" width="16" height="16" alt="${ARTICLE_SUBJ}をBlinklistへ追加" /></a></li>
<li><a href="http://reddit.com/submit?url=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}" title="${ARTICLE_SUBJ}をRedditへ追加" target="_blank"><img src="${INFO_URL}skin/img/reddit.gif" width="16" height="16" alt="${ARTICLE_SUBJ}をRedditへ追加" /></a></li>
<li><iframe src="http://newsing.jp/newsingit?url=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" height="18" width="122" style="margin:0;padding:0;"></iframe></li>
</ul>

　こんな感じのソースが出来上がってきました、挿入する場所とかは前回通りです。あとは、レイアウトやらボタンの順序やら、細かい作業を各自行ってください。
　また、前回の内容に、他のblogシステムで使う時のためにヒントとなる変数の説明などもしてありますので、ご参考にしてください、というか、今回の内容は前回の内容を読んでいないとわかりにくい部分があったりしますので。

以下忘れた頃にこっそり更新するお仲間リンク2

　ちなみに、現在実例は私の所属している会社の速報、http://www.dears.co.jp/news/にてやっております。自分の所は今FTPがIPで弾かれててアップデートできない状況なので。このblogはしばらく直りませんが…

2007/1/8 23:50　お世話になっている会社の人から、altキーにアーティクル名の変数を入れたらどうか？　とご提案をいただいたので、直してみた。あと記述にミスのあった部分を改修。

blogに各種ソーシャルブックマーク、各種RSSのフィードリーダ登録ボタン設置2のエントリーをGoogleBookmark に追加

トラックバック

この記事のトラックバックURL: http://neco.st/blog/diary-tb.cgi/10

トラックバック一覧

blogに各種ソーシャルブックマーク追加登録ボタンを一括表示する from 青龍会血風録: del.icio.us,はてなブックマークとアンテナ,ニフティクリップ,livedoor クリップ,FC2ブックマーク、追加ボタン全部のせタグ実装例　自分のblogにdel.icio.us、はてなブックマーク、はてなアンテナ...; 2007年01月08日(月)03時08分受信

青龍会血風録

目次

記事一覧