2012年03月30日 このエントリーをはてなブックマークに追加

シーサーブログの個別記事にツイッターとはてブのボタンを設置する


スポンサーリンク

ツイッター、はてなブックマークそれぞれから、共有された数が表示されるボタンが提供されています。このブログを含め、多くのブログではこのボタンを設置しても読者がいないことを露呈するだけの効果しかありませんが、それでも設置しておきたいもの。自分がこの作業を行った際ちょっとだけ手間取ったのでその手順を残しておきたいと思います。

  1. 当サイトと同じで良ければ
  2. それぞれの提供URL
  3. 設置上の注意
  4. はてブボタン設置はやめたほうがいいのか

 

当サイトと同じで良ければ

当サイトの記事タイトル上に表示されているタイプで良ければ、以下のコードをコピーして設置したい場所に貼ればそれで終わりです。後の記事を読んでもらえば分かるのですが、設定はシーサーブログであればコード自体はどのブログでも共通です。

ツイッターボタン

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<% article.page_url %>" data-text="<% article.subject %>:<% blog.title %>" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

はてなブックマークボタン

<a href="http://b.hatena.ne.jp/entry/<% article.page_url %> " class="hatena-bookmark-button" data-hatena-bookmark-title="<% article.subject %>:<% blog.title %>" 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>

 

それぞれの提供URL

ツイッター:Twitter / Twitterボタン

はてなブックマーク:はてなブックマークボタンの作成・設置について

 

設置上の注意

設置ではTwitterの公式ツイートボタンの設置方法: ブログ ・ヘルプを参考にしました。要するに

  • URLには<% article.page_url %>
  • タイトル、テキストには<% article.subject %>:<% blog.title %>

を入力してボタンのコードを入手すればいいわけです。ですが、このコード入手の際に<% article.subject %><% blog.title %>の黄色くマーカーした部分が文字化けしてしまうようです。実際にツイッターの方でコード入手すると< >が以下のように変わってしまっています。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="&lt;% article.page_url %&gt;" data-text="&lt;% article.subject %&gt;&lt;% blog.title %&gt;" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

申し訳ありませんが僕には原因はわかりませんし、もしかしたらこの様な症状にならない方のほうが多いのかもしれません。ですが、こうなってしまったら自分で< >に置き換えてあげなければいけません。

 

はてブボタン設置はやめたほういいのか

事の経緯がまとめてありました

はてなブックマークボタンのトラッキング問題で高木浩光先生が決別ツイートをするに至った経緯まとめ - NAVER まとめ

これについてのはてな側の対応

はてなブックマークボタンが取得した行動情報の第三者への送信を停止しました - はてなブックマーク日記 - 機能変更、お知らせなど

はてなブックマークボタンから収集した行動情報の第三者提供をやめます - はてなの日記 - 機能変更、お知らせなど

ユーザー側としては難しいところです。僕はなんでもない、どうでもいいようなものをはてブにブックマークしておいて後から確認するという使い方をしていました。また、ホットエントリーからは多くの情報をもらっています。現状として、はてブに代わるものがあるかというと僕が知らないだけかもしれませんが、思いつきません。もう少し情報収集してから外すかどうか決めたいと思います。




スポンサーリンク
posted by 無理しません at 03:56 | Comment(0) | TrackBack(0) | シーサーブログカスタマイズ | このブログの読者になる | 更新情報をチェックする edit  re
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。