最近、CSSとかHTMLをいろいろ読み書きできるようになったので、ブログをカスタマイズしてみることにしました。手始めにはてなブックマークボタンとツイートボタンをブログにつけてみます。
はてなもTwitterもよくできた公式ボタンを最近リリースしています。もちろんこういった機能を実現するプログラムは以前にもたくさんあったのですが、やっぱり公式ボタンが信頼できますね。まずはツイートボタンから。このサイトでコードを自動生成できるのですが、ちょっとコツがあります。
Twitter公式ツイートボタン
１の「ツイート内テキスト」で<$ArticleTitle ESCAPE$>、「URL」に<$ArticlePermalink$>を入れましょう。2で自分のアカウントをいれておくと、ツイートするときに"via @kazu_fujisawa"みたいに出してくれます。
次のようなコードが自動生成されるはずです。
ライブドアブログでは<$ArticleTitle ESCAPE$>がエントリーのタイトルを自動的に返すタグです。また<$ArticlePermalink$>がそのURLを返します。これらのタグはそれぞれのブログベンダーで違いますから、自分で調べてみてください。data-urlでエントリーのURLを指定します。data-textでどういうテキストを最初に表示させるか指定します。この場合はエントリーのタイトルになっていますね。ブログ名も入れたかったら<$BlogTitle ESCAPE$>も加えるといいでしょう。data-text="<$BlogTitle ESCAPE$> : <$ArticleTitle ESCAPE$>"のように書きます。
次ははてなブックマークボタンのコードを生成しましょう。次のサイトで同じように生成できます。
１のところにライブドアブログのタグを入れても、「<」と「>」がHTMLの実体参照に置き換わってしまいうまくいきませんでした。直接テキスト・エディタで編集した方がいいようです。
<$ArticlePermalink$>と<$ArticleTitle ESCAPE$>と<$BlogTitle ESCAPE$>のところが自分で書かないといけないところです。
以上ではてなブックマークボタンとツイートボタンの準備は完了です。あとはこれを好きなところに貼るだけです。
僕は次のところに貼りつけました。ライブドアブログの「デザインのカスタマイズ」で「トップページ」、「個別記事ページ」、「カテゴリアーカイブ」、「月別アーカイブ」で次の場所にコピペします。
これでめでたくはてなブックマークボタンとツイートボタンがついたはずです。たしかめてみましょう。
はてなもTwitterもよくできた公式ボタンを最近リリースしています。もちろんこういった機能を実現するプログラムは以前にもたくさんあったのですが、やっぱり公式ボタンが信頼できますね。まずはツイートボタンから。このサイトでコードを自動生成できるのですが、ちょっとコツがあります。
Twitter公式ツイートボタン
１の「ツイート内テキスト」で<$ArticleTitle ESCAPE$>、「URL」に<$ArticlePermalink$>を入れましょう。2で自分のアカウントをいれておくと、ツイートするときに"via @kazu_fujisawa"みたいに出してくれます。
次のようなコードが自動生成されるはずです。
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<$ArticlePermalink$>" data-text="<$ArticleTitle ESCAPE$>" data-count="horizontal" data-via="kazu_fujisawa" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
ライブドアブログでは<$ArticleTitle ESCAPE$>がエントリーのタイトルを自動的に返すタグです。また<$ArticlePermalink$>がそのURLを返します。これらのタグはそれぞれのブログベンダーで違いますから、自分で調べてみてください。data-urlでエントリーのURLを指定します。data-textでどういうテキストを最初に表示させるか指定します。この場合はエントリーのタイトルになっていますね。ブログ名も入れたかったら<$BlogTitle ESCAPE$>も加えるといいでしょう。data-text="<$BlogTitle ESCAPE$> : <$ArticleTitle ESCAPE$>"のように書きます。
次ははてなブックマークボタンのコードを生成しましょう。次のサイトで同じように生成できます。
１のところにライブドアブログのタグを入れても、「<」と「>」がHTMLの実体参照に置き換わってしまいうまくいきませんでした。直接テキスト・エディタで編集した方がいいようです。
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-title="<$ArticleTitle ESCAPE$> - <$BlogTitle ESCAPE$>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<$ArticlePermalink$>と<$ArticleTitle ESCAPE$>と<$BlogTitle ESCAPE$>のところが自分で書かないといけないところです。
以上ではてなブックマークボタンとツイートボタンの準備は完了です。あとはこれを好きなところに貼るだけです。
僕は次のところに貼りつけました。ライブドアブログの「デザインのカスタマイズ」で「トップページ」、「個別記事ページ」、「カテゴリアーカイブ」、「月別アーカイブ」で次の場所にコピペします。
・・・icleCategory1$></a> </IfArticleCategory1><IfArticleCategory2>| <a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2></div>
<Div Align="right"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<$ArticlePermalink$>" data-text="金融日記テクニカル <$ArticleTitle ESCAPE$>" data-count="horizontal" data-via="kazu_fujisawa" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-title="<$ArticleTitle ESCAPE$> - <$BlogTitle ESCAPE$>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></Div>
<IfFirstArticle><$Advertise$></IfFirstArticle>
</div>
<div class="blogbodybottom・・・
これでめでたくはてなブックマークボタンとツイートボタンがついたはずです。たしかめてみましょう。
が業界標準のパッケージですが、僕はサンプル・コードをテキスト・エディタでちょこちょこ直すだけで今のところ十分なので、そういう用途で役に立った本です。
