Blog Top

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログのトップページにソーシャルブックマークボタンの設置

以前の記事で記事ページへの設置方法をエントリーしたので、今回はトップページへの設置方法をエントリー。

トップページへの設置も基本は記事ページの設定タグと変わらない。ただ、何故かYahoo!ブックマークとGoogleブックマークの設定タグに<%enc_blogname>を使うとタイトルが文字化けしまうので、個別にエンコードする必要がある。

トップページにYahoo!ブックマークとGoogleブックマークのボタンを設置する場合は、以下のフォームで変換してから設定タグに挿入する。

使い方は、「エンコード前」にブログ名を入れ、「ブログ名を変換」をクリック。エンコードされた値が「エンコード後」に表示されるので、それをコピーし設定タグの指定の位置に挿入する。

ブログ名エンコードフォーム

エンコード前:

エンコード後:

各ソーシャルブックマークボタン設定タグは以下の通り

はてなブックマーク設定タグ


<a href="http://b.hatena.ne.jp/entry/<%url>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%blog_name>" data-hatena-bookmark-layout="simple" 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>

このエントリーをはてなブックマークに追加

Yahoo!ブックマーク設定タグ(【ブログ名】にエンコードしたブログ名を挿入)


<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=【ブログ名】&amp;u=<%enc_url>&amp;ei=UTF-8" target="_blank"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" /></a>

Yahoo!ブックマークに登録

Googleブックマーク設定タグ(【ブログ名】にエンコードしたブログ名を挿入)


<a href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=<%enc_url>&amp;title=【ブログ名】" target="_blank">Googleブックマークに追加</a>

Googleブックマークに追加(アイコンは用意されていないので、自分で用意する)

livedoorクリップ設定タグ


<a href="http://clip.livedoor.com/redirect?link=<%url>&amp;title=<%blog_name>&amp;ie=utf8" title="この記事をクリップ!" target="_blank"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" width="16" height="16" alt="この記事をクリップ!" /></a>

この記事をクリップ!

Buzzurl設定タグ


<a href="http://buzzurl.jp/entry/<%url>" title="Buzzurlにブックマーク" target="_blank"><img src="http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_05.gif" alt="Buzzurlにブックマーク" /></a>

Buzzurlにブックマーク

イザ!ブックマーク設定タグ


<a href="http://www.iza.ne.jp/bookmark/add/regist/back/<%url>" target="_blank"><img src="http://www.iza.ne.jp/images/common/bookmark_icon22.gif" alt="イザ!ブックマーク" /></a>

イザ!ブックマーク

設定タグをエリア変数で囲んでテンプレートに貼り付ける。


<!--index_area-->
<p>
<a href="http://b.hatena.ne.jp/entry/<%url>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%blog_name>" data-hatena-bookmark-layout="simple" 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>
<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=【ブログ名】&amp;u=<%enc_url>&amp;ei=UTF-8" target="_blank"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" /></a>
<a href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=<%enc_url>&amp;title=【ブログ名】" target="_blank">Googleブックマークに追加</a>
<a href="http://clip.livedoor.com/redirect?link=<%url>&amp;title=<%blog_name>&amp;ie=utf8" title="この記事をクリップ!" target="_blank"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" width="16" height="16" alt="この記事をクリップ!" /></a>
<a href="http://buzzurl.jp/entry/<%url>" title="Buzzurlにブックマーク" target="_blank"><img src="http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_05.gif" alt="Buzzurlにブックマーク" /></a>
<a href="http://www.iza.ne.jp/bookmark/add/regist/back/<%url>" target="_blank"><img src="http://www.iza.ne.jp/images/common/bookmark_icon22.gif" alt="イザ!ブックマーク" /></a>
</p>
<!--/index_area-->

FC2ブログにソーシャルブックマークボタンの設置

FC2ブログにソーシャルブックマークボタンを設置する方法をメモ。

トップページと記事ページ方法では設定タグが若干異なるので、今回は記事ページに設置する方法をエントリー。トップページへの設置方法はまた別の機会にエントリーしようかと。

設置するソーシャルブックマークは以下の六つ

  • はてなブックマーク
  • Yahoo!ブックマーク
  • Googleブックマーク
  • livedoorクリップ
  • Buzzurl
  • イザ!ブックマーク

はてなブックマーク設定タグ


<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="simple" 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>

このエントリーをはてなブックマークに追加

Yahoo!ブックマーク設定タグ


<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=<%topentry_enc_utftitle>&amp;u=<%topentry_enc_link>&amp;ei=UTF-8" target="_blank"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" /></a>

Yahoo!ブックマークに登録

Googleブックマーク設定タグ


<a href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=<%topentry_enc_link>&amp;title=<%topentry_enc_utftitle>" target="_blank">Googleブックマークに追加</a>

Googleブックマークに追加(アイコンは用意されていないので、自分で用意する)

livedoorクリップ設定タグ


<a href="http://clip.livedoor.com/redirect?link=<%topentry_link>&amp;title=<%topentry_title>&amp;ie=utf8" title="この記事をクリップ!" target="_blank"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" width="16" height="16" alt="この記事をクリップ!" /></a>

この記事をクリップ!

Buzzurl設定タグ


<a href="http://buzzurl.jp/entry/<%topentry_link>" title="Buzzurlにブックマーク" target="_blank"><img src="http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_05.gif" alt="Buzzurlにブックマーク" /></a>

Buzzurlにブックマーク

イザ!ブックマーク設定タグ


<a href="http://www.iza.ne.jp/bookmark/add/regist/back/<%topentry_link>" target="_blank"><img src="http://www.iza.ne.jp/images/common/bookmark_icon22.gif" alt="イザ!ブックマーク" /></a>

イザ!ブックマーク

設定タグをエリア変数で囲んでテンプレートに貼り付ける


<!--permanent_area-->
<p>
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="simple" 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>
<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=<%topentry_enc_utftitle>&amp;u=<%topentry_enc_link>&amp;ei=UTF-8" target="_blank"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" /></a>
<a href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=<%topentry_enc_link>&amp;title=<%topentry_enc_utftitle>" target="_blank">Googleブックマークに追加</a>
<a href="http://clip.livedoor.com/redirect?link=<%topentry_link>&amp;title=<%topentry_title>&amp;ie=utf8" title="この記事をクリップ!" target="_blank"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" width="16" height="16" alt="この記事をクリップ!" /></a>
<a href="http://buzzurl.jp/entry/<%topentry_link>" title="Buzzurlにブックマーク" target="_blank"><img src="http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_05.gif" alt="Buzzurlにブックマーク" /></a>
<a href="http://www.iza.ne.jp/bookmark/add/regist/back/<%topentry_link>" target="_blank"><img src="http://www.iza.ne.jp/images/common/bookmark_icon22.gif" alt="イザ!ブックマーク" /></a>
</p>
<!--/permanent_area-->

記事近くに設置する場合は、<%topentry_body>付近に貼り付ける

mixiチェックボタンの設置

mixiチェックボタンの設置が意外と面倒くさかったので、忘れないよう手順をメモる。

1:デベロッパー登録
mixiチェックを設置する為には、まずデベロッパー登録する。

mixiデベロッパー登録画面から通常のmixiアカウントでログインし、名前やら住所やら電話番号やらを入力。画面を進んで行き、携帯アドレスを登録する。

登録した携帯アドレスにデベロッパー登録URLが記載されたメールが送られてくる(注1)ので、アクセスしログイン。これでデベロッパー登録完了。
(注1:ドメイン指定受信している場合は、【mixi.jp】を許可する。)
2:サービスの登録
mixi Developer Dashboard にログイン後、mixi Pluginをクリック。左ナビにある【新規サービス追加】をクリックし、mixiチェックボタンを設置するホームページ情報を登録。

■サービス名::ホームページ名など
■サービスのURL::ホームページのURL(http://ホームページのドメイン/)
■許可ドメインリスト::mixiチェックボタンを設置するホームページのドメイン
サービスのアイコン・定型文はそのまま。

利用規約に同意すると、mixi Pluginの登録サービス一覧に表示される。
3:コードの貼り付け
以下のコードを貼り付けるとmixiチェックボタンが表示される

<a href="http://mixi.jp/share.pl" data-key="識別キー(注2)" class="mixi-check-button">mixiチェック</a><script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

(注2:識別キーはmixi Pluginの登録サービス一覧に登録されている、サービス名をクリックして確認。)

検索フォーム


RSSリンクの表示

QRコード

QR

問い合わせ

当ブログ管理人への問い合わせはこちらのフォームからお願いします。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。