はてなブックマークとtwitterボタン（被リンク数も表示） - 流水成道blog

| Main |

 

はてなブックマークとtwitterボタン（被リンク数も表示）

松浦彰夫 (2010年1月25日 01:20) | コメント(0) | トラックバック(2)

 はてなブックマークとtwitterに追加する機能を付けました。

tsuika_botton.png

というようになっている右側のb_entry.gif1userとかbtnTwitter.gif1tweetsとなっているもののことです。

テンプレートの編集する方は、必ず前もってバックアップを取ってください。変更して壊れてしまったり、被害が出ても、一切の責任は負えません。

うちのブログはMovableType OpenSource 4を使ってます。以下をテンプレートに追加しました。

<a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink$>"><img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a>

<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>" alt="はてなブックマーク - <$MTEntryTitle$>" title="はてなブックマーク - <$MTEntryTitle$>"></a>

&nbsp;

<a href="http://twitter.com/home?status=RT@◆自分のTwitter名◆ <$MTEntryTitle$> <$MTEntryPermalink$>"><img src="http://jyoudou.net/blog/images/btnTwitter.gif" width="16" height="16" alt="Twitterに呟く" title="Twitterに呟く" /></a>

<a href="http://twib.jp/url/<$MTEntryPermalink$>"><img src="http://image.twib.jp/counter/<$MTEntryPermalink$>" alt="retweets - <$MTEntryTitle$>" title="retweets - <$MTEntryTitle$>" /></a>

これをコピーして使う場合、◆自分のTwitter名◆とした箇所は、自分のに変えてください。Twitterアイコンの http://jyoudou.net/blog/images/btnTwitter.gif も私のファイルが無くなった場合に困るので、自分の所にコピーして使うのが良いでしょう。

 解説すると、ソースの１行目が、b_entry.gifの部分で、クリックすると、はてなブックマークへの追加画面になります。はてなブックマークに３０以上ブックマークが付くと新着一覧に表示されて、アクセスが伸びます。うちのブログはそんなに付かないので、アクセスは伸びてないですね（汗）。良かったら、はてなのアカウントを取って、どんどん追加してください。基本機能のアカウントは無料です。

２行目は、はてなブックマークのブックマークされている数を表示します。クリックするとブックマークしている人の一覧が出ます。

３行目は、空白を入れて少し間を開ける指定です。

４行目は、btnTwitter.gifの部分で、TwitterにReTweetする指定です。ReTweetというのは、「他の人のつぶやきに話を合わせる」というような機能です。「記事読んだよ」くらいの意味です。クリックすると、Twitterの入力画面に、RT@Twitter名 記事名 記事URL と入っていますので、投稿すればReTweetします。

５行目は、ReTweetした人の数が表示されます。標準機能には無いので、twibという外部サービスを使っています。 ブログ記事のTwitterでの「つぶやかれ数」を表示するブログパーツ（追記あり） :Heartlogic を参考にさせてもらいました。収集漏れもあるみたいですが、これだとJavaScriptを使わずに表示されます。英語の所とか、JavaScriptを使う所ばっかりでした。

 

  

なぜJavaScriptを使わないことにこだわったかというと、AtomやRSSにも表示できるからなんですね。<![CDATA[ と ]]> で囲むとタグを使えますので、RSSリーダーで表示できるわけです。なお<iframe>もよくありますが、RSSリーダーと相性が悪いです。

atom.xmlのテンプレートは以下。<content type="html" xml:lang="<$MTBlogLanguage ietf="1"$>" xml:base="<$MTBlogURL encode_xml="1"$>">と</content>で囲んだ部分が本文ですので、本文の後ろに１行下げて表示するようにしました。ちなみに、人気ブログランキングのリンクも付いてます。

<$MTHTTPContentType type="application/atom+xml"$><?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title><$MTBlogName remove_html="1" encode_xml="1"$></title>
    <link rel="alternate" type="text/html" href="<$MTBlogURL encode_xml="1"$>" />
    <link rel="self" type="application/atom+xml" href="<$MTLink template="atom"$>" />
    <id>tag:<$MTBlogHost exclude_port="1" encode_xml="1"$>,<$MTTemplateCreatedOn format="%Y-%m-%d"$>:<$MTBlogRelativeURL encode_xml="1"$>/<$MTBlogID$></id>
    <updated><MTEntries lastn="1"><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></MTEntries></updated>
    <MTIfNonEmpty tag="MTBlogDescription"><subtitle><$MTBlogDescription remove_html="1" encode_xml="1"$></subtitle></MTIfNonEmpty>
    <generator uri="http://www.sixapart.com/movabletype/"><$MTProductName version="1"$></generator>
<MTEntries lastn="15">
<entry>
    <title><$MTEntryTitle remove_html="1" encode_xml="1"$></title>
    <link rel="alternate" type="text/html" href="<$MTEntryPermalink encode_xml="1"$>" />
    <id><$MTEntryAtomID$></id>

    <published><$MTEntryDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></published>
    <updated><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></updated>

    <summary><$MTEntryExcerpt remove_html="1" encode_xml="1"$></summary>
    <author>
        <name><$MTEntryAuthorDisplayName encode_xml="1"$></name>
        <MTIfNonEmpty tag="MTEntryAuthorURL"><uri><$MTEntryAuthorURL encode_xml="1"$></uri></MTIfNonEmpty>
    </author>
    <MTEntryCategories>
        <category term="<$MTCategoryLabel encode_xml="1"$>" scheme="http://www.sixapart.com/ns/types#category" />
    </MTEntryCategories>
    <MTEntryIfTagged><MTEntryTags><category term="<$MTTagName normalize="1" encode_xml="1"$>" label="<$MTTagName encode_xml="1"$>" scheme="http://www.sixapart.com/ns/types#tag" />
    </MTEntryTags></MTEntryIfTagged>
    <content type="html" xml:lang="<$MTBlogLanguage ietf="1"$>" xml:base="<$MTBlogURL encode_xml="1"$>">
<$MTEntryBody encode_xml="1"$>
<mt:If tag="EntryMore" convert_breaks="0">
<![CDATA[続きを読む: <a href="<$mt:EntryPermalink$>#more" rel="bookmark"><$mt:EntryTitle$></a>]]>
</mt:If>
<![CDATA[<p><a target="_blank" href="http://blog.with2.net/link.php?◆自分の人気ブログランキングID◆"><img alt="人気ブログランキングへ" src="http://image.with2.net/img/banner/banner_13.gif" border="0" height="15" width="80"></a>&nbsp;<a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink$>"><img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a><a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>" alt="はてなブックマーク - <$MTEntryTitle$>" title="はてなブックマーク - <$MTEntryTitle$>"></a>&nbsp;<a href="http://twitter.com/home?status=RT@◆自分のTwitter名◆ <$MTEntryTitle$> <$MTEntryPermalink$>"><img src="http://jyoudou.net/blog/images/btnTwitter.gif" width="16" height="16" alt="Twitterに呟く" title="Twitterに呟く" /></a><a href="http://twib.jp/url/<$MTEntryPermalink$>"><img src="http://image.twib.jp/counter/<$MTEntryPermalink$>" alt="retweets - <$MTEntryTitle$>" title="retweets - <$MTEntryTitle$>" /></a></p>]]>
    </content>
</entry>
</MTEntries>
</feed>

rss.xmlのテンプレートは以下。「このブログを購読」リンクにはatomを指定してますが、rssもあります。<description>と</description>で囲んだ間が本文です。

<$MTHTTPContentType type="application/rss+xml"$><?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<rss version="2.0">
    <channel>
        <title><$MTBlogName remove_html="1" encode_xml="1"$></title>
        <link><$MTBlogURL$></link>
        <description><$MTBlogDescription remove_html="1" encode_xml="1"$></description>
        <language><$MTBlogLanguage ietf="1"$></language>
        <copyright>Copyright <$MTDate format="%Y"$></copyright>
        <lastBuildDate><MTEntries lastn="1"><$MTEntryDate format_name="rfc822"$></MTEntries></lastBuildDate>
        <generator>http://www.sixapart.com/movabletype/</generator>
        <docs>http://www.rssboard.org/rss-specification</docs>
        <MTEntries lastn="15">
        <item>
            <title><$MTEntryTitle remove_html="1" encode_xml="1"$></title>
            <description>
<$MTEntryBody encode_xml="1"$>
<mt:If tag="EntryMore" convert_breaks="0">
<![CDATA[続きを読む: <a href="<$mt:EntryPermalink$>#more" rel="bookmark"><$mt:EntryTitle$></a>]]>
</mt:If>
<![CDATA[<p><a target="_blank" href="http://blog.with2.net/link.php?◆自分の人気ブログランキングID◆"><img alt="人気ブログランキングへ" src="http://image.with2.net/img/banner/banner_13.gif" border="0" height="15" width="80"></a>&nbsp;<a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink$>"><img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a><a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>" alt="はてなブックマーク - <$MTEntryTitle$>" title="はてなブックマーク - <$MTEntryTitle$>"></a>&nbsp;<a href="http://twitter.com/home?status=RT@◆自分のTwitter名◆ <$MTEntryTitle$> <$MTEntryPermalink$>"><img src="http://jyoudou.net/blog/images/btnTwitter.gif" width="16" height="16" alt="Twitterに呟く" title="Twitterに呟く" /></a><a href="http://twib.jp/url/<$MTEntryPermalink$>"><img src="http://image.twib.jp/counter/<$MTEntryPermalink$>" alt="retweets - <$MTEntryTitle$>" title="retweets - <$MTEntryTitle$>" /></a></p>]]>
           </description>
            <link><$MTEntryPermalink encode_xml="1"$></link>
            <guid><$MTEntryPermalink encode_xml="1"$></guid>
            <MTEntryCategories>
                <category domain="http://www.sixapart.com/ns/types#category"><$MTCategoryLabel remove_html="1" encode_xml="1"$></category>
            </MTEntryCategories>
            <MTEntryIfTagged><MTEntryTags>
                <category domain="http://www.sixapart.com/ns/types#tag"><$MTTagName remove_html="1" encode_xml="1"$></category>
            </MTEntryTags></MTEntryIfTagged>
            <pubDate><$MTEntryDate format_name="rfc822"$></pubDate>
        </item>
        </MTEntries>
    </channel>
</rss>

普通に見るページは以下のようになっています。

トップページの表示のため、「ブログ記事の概要」のテンプレートを以下のように編集しました。

<$mt:EntryTrackbackData$>
<div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry">
    <div class="asset-header">
        <h2 class="asset-name entry-title"><a href="<$mt:EntryPermalink$>" rel="bookmark"><$mt:EntryTitle$></a></h2>
        <div class="asset-meta">
            <span class="byline">
    <mt:If tag="EntryAuthorDisplayName">
                <span class="vcard author"><$mt:EntryAuthorLink show_hcard="1"$></span> (<abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>)
    <mt:Else>
                <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>
    </mt:If>
            </span>
<mt:Unless name="hide_counts" eq="1">
            <mt:IfCommentsActive><span class="separator">|</span> <a href="<$mt:EntryPermalink$>#comments"><$mt:EntryCommentCount singular="コメント(1)" plural="コメント(#)" none="コメント(0)"$></a></mt:IfCommentsActive>
            <mt:IfPingsActive><span class="separator">|</span> <a href="<$mt:EntryPermalink$>#trackbacks"><$mt:EntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)" none="トラックバック(0)"$></a></mt:IfPingsActive>
</mt:Unless>
&nbsp;
<a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink$>"><img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>" alt="はてなブックマーク - <$MTEntryTitle$>" title="はてなブックマーク - <$MTEntryTitle$>"></a>
&nbsp;
<a href="http://twitter.com/home?status=RT@◆自分のTwitter名◆ <$MTEntryTitle$> <$MTEntryPermalink$>"><img src="http://jyoudou.net/blog/images/btnTwitter.gif" width="16" height="16" alt="Twitterに呟く" title="Twitterに呟く" /></a>
<a href="http://twib.jp/url/<$MTEntryPermalink$>"><img src="http://image.twib.jp/counter/<$MTEntryPermalink$>" alt="retweets - <$MTEntryTitle$>" title="retweets - <$MTEntryTitle$>" /></a>
        </div>
    </div>
    <div class="asset-content entry-content">
<mt:If tag="EntryBody">
        <div class="asset-body">
            <$mt:EntryBody$>
        </div>
</mt:If>
<mt:If name="entry_archive">
    <mt:EntryIfTagged>
        <div class="entry-tags">
            <h4>タグ<span class="delimiter">:</span></h4>
            <ul>
                <li><mt:EntryTags glue='<span class="delimiter">,</span></li> <li>'><a href="javascript:void(0)" onclick="location.href='<$mt:TagSearchLink encode_js="1"$>';return false;" rel="tag"><$mt:TagName$></a></mt:EntryTags></li>
            </ul>
        </div>
    </mt:EntryIfTagged>
</mt:If>
<mt:If tag="EntryMore" convert_breaks="0">
        <div class="asset-more-link">
            続きを読む: <a href="<$mt:EntryPermalink$>#more" rel="bookmark"><$mt:EntryTitle$></a>
        </div>
</mt:If>
    </div>
    <div class="asset-footer"></div>
</div>

個別ページに表示するために「ブログ記事のメタデータ」というテンプレートを以下のように編集。

<div class="asset-meta">
    <span class="byline vcard">
<MTIfNonEmpty tag="EntryAuthorDisplayName">
        <address class="vcard author"><$MTEntryAuthorLink show_hcard="1"$></address> (<abbr class="published" title="<$MTEntryDate format_name="iso8601"$>"><$MTEntryDate format="%x %X"$>)
<MTElse>
        <abbr class="published" title="<$MTEntryDate format_name="iso8601"$>"><$MTEntryDate format="%x %X"$></abbr>
</MTIfNonEmpty>
    </span>
    <span class="separator">|</span> <a class="permalink" rel="bookmark" href="<$MTEntryPermalink$>">個別ページ</a>
    <MTUnless name="hide_counts" eq="1">
        <MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント(<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
        <MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック(<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
    </MTUnless>
&nbsp;
<a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink$>"><img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>" alt="はてなブックマーク - <$MTEntryTitle$>" title="はてなブックマーク - <$MTEntryTitle$>"></a>
&nbsp;
<a href="http://twitter.com/home?status=RT@◆自分のTwitter名◆ <$MTEntryTitle$> <$MTEntryPermalink$>"><img src="http://jyoudou.net/blog/images/btnTwitter.gif" width="16" height="16" alt="Twitterに呟く" title="Twitterに呟く" /></a>
<a href="http://twib.jp/url/<$MTEntryPermalink$>"><img src="http://image.twib.jp/counter/<$MTEntryPermalink$>" alt="retweets - <$MTEntryTitle$>" title="retweets - <$MTEntryTitle$>" /></a>
</div> 

こういうように、コメントとトラックバックの数の表示の右に、はてなブックマークとTwitterの表示がされるようになります。１００人とかにブックマークされたいですね。

 

松浦彰夫　拝

カテゴリ:

タグ:

  • クリックして、友達に紹介しましょう→
  • このエントリーをはてなブックマークに追加

トラックバック(2)

トラックバックURL: http://jyoudou.net/mt5/mt-tb.cgi/2976

インデックス数　被リンク数　ページランク - はてなブックマークとtwitterボタン（被リンク数も表示） - 流水成道 (2010年1月26日 10:59)

TITLE: はてなブックマークとtwitterボタン（被リンク数も表示） - 流水成道 URL: http://article.team-technica.com IP: 202.172.28.6 BLOG NAME: インデックス数　被リンク数　ページランク DATE: 01/26/2010 10:59:55 AM 続きを読む

コメントする

| Main |

このブログ記事について

このページは、松浦彰夫が2010年1月25日 01:20に書いたブログ記事です。

ひとつ前のブログ記事は「水素文明まとめWiki」です。

次のブログ記事は「第一章　中国」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Podcast購読

iTunesのPodcastメニューの画面にこのアイコンをドラッグ＆ドロップすることで、番組を登録できます。



メルマガ購読

秋月便り
メルマガ登録・解除
 

最近のブログ記事

タグクラウド

2011年12月

日 月 火 水 木 金 土
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

カテゴリ

月別 アーカイブ

執筆者

☆倉橋正幸

☆rebecca


☆skinukawa

☆hajime

☆kacamata


☆中野まどか

☆松浦彰夫

Powered by Movable Type 5.02