weblogeyecatch1.jpg

タグ「アイコン」の一覧

ブログにZenback (ゼンバック) を設置しました。ソーシャルボタンや関連する記事の表示、記事に対するTwitterの反応、Fcebookのコメントなど表示できるブログパーツです。
Zenback (ゼンバック)

続きを読む


世界で最も人気あるSNS「Facebook(フェイスブック)」の話題が絶えなかった2010年も過ぎ、重い腰を上げて(ちょっと大げさですが・・・)Facebookの「いいね!ボタン」を設置することにしました。もう遅いか...。

ボタンが多すぎるのも何かと、Facebookの「いいね!ボタン」は設置することを躊躇していました。

Facebookの「いいね!ボタン」はTwitterボタンやmixiチェックなどと同じように良かったサイトなどをSNS内の友達と共有することが出来るボタンです。


Facebookの開発者ページ内Social plugins>Like Buttonから設置するボタンのコードを簡単に発行できます。私のブログでは下記にてコードを発行しました。

・URL to Like:空欄で大丈夫です。

・Layout Style:「button_count」を選択しました。

・Show Faces:チェックを外しました。

・Width:「100」にしました。

最後に「Get Code」ボタンを押すとコードが発行されます。iframe内のコードをメモ帳に貼り付けます。

<iframe src="http://www.facebook.com/plugins/like.php?href=
http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike
&amp;layout=button_count&amp;show_faces=false&amp;width=100
&amp;action=like&amp;colorscheme=light&amp;height=21"scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>


MovableTypeの場合は赤字の部分を
<$MTEntryPermalink encode_url="1"$>
に入れ替えます。

ついでに青字を20にして、Twitterボタンと高さをあわせてみました。

<iframe src="http://www.facebook.com/plugins/like.php?href=
<$MTEntryPermalink encode_url="1"$>
&amp;layout=button_count&amp;show_faces=false&amp;width=100
&amp;action=like&amp;colorscheme=light&amp;height=20"scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe>


赤字の部分を入れ替えたコードを設置したい場所に埋め込み、再構築をして出来上がりです。



Facebookの創始者マーク・ザッカーバーグ氏はTimeの「今年(2010年)の人」に選ばれたそうです。


世界で最も人気あるSNS「Facebook(フェイスブック)」の話題が絶えなかった2010年も過ぎ、重い腰を上げて(ちょっと大げさですが・・・)Facebookの「いいね!ボタン」を設置することにしました。もう遅いか...。

ボタンが多すぎるのも何かと、Facebookの「いいね!ボタン」は設置することを躊躇していました。

Facebookの「いいね!ボタン」はTwitterボタンやmixiチェックなどと同じように良かったサイトなどをSNS内の友達と共有することが出来るボタンです。


Facebookの開発者ページ内Social plugins>Like Buttonから設置するボタンのコードを簡単に発行できます。私のブログでは下記にてコードを発行しました。

・URL to Like:空欄で大丈夫です。

・Layout Style:「button_count」を選択しました。

・Show Faces:チェックを外しました。

・Width:「100」にしました。

最後に「Get Code」ボタンを押すとコードが発行されます。iframe内のコードをメモ帳に貼り付けます。

<iframe src="http://www.facebook.com/plugins/like.php?href=
http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike
&amp;layout=button_count&amp;show_faces=false&amp;width=100
&amp;action=like&amp;colorscheme=light&amp;height=21"scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>


MovableTypeの場合は赤字の部分を
<$MTEntryPermalink encode_url="1"$>
に入れ替えます。

ついでに青字を20にして、Twitterボタンと高さをあわせてみました。

<iframe src="http://www.facebook.com/plugins/like.php?href=
<$MTEntryPermalink encode_url="1"$>
&amp;layout=button_count&amp;show_faces=false&amp;width=100
&amp;action=like&amp;colorscheme=light&amp;height=20"scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe>


赤字の部分を入れ替えたコードを設置したい場所に埋め込み、再構築をして出来上がりです。



Facebookの創始者マーク・ザッカーバーグ氏はTimeの「今年(2010年)の人」に選ばれたそうです。


Tweet Buttonとmixiチェックボタンの横にソーシャルブックマークのアイコンを追加しました。今回設置したのは、"はてなブックマーク" 、"livedoor clip"、"Googleブックマーク" 、"Yahoo!ブックマーク" 、"Buzzurl" のボタンです。
gon101123

テンプレートの貼りたい場所に以下を追加します。

≪はてなブックマーク≫
<a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink encode_url="1"$>" rel="nofollow" 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>

≪livedoorクリップ≫
<a href="http://clip.livedoor.com/clip/add?link=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>&jump=ref" title="livedoorクリップに追加"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" alt="livedoorクリップに追加" width="16" height="16" /></a>

≪Google Bookmarks≫
<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>:%20<$MTBlogName encode_url="1"$>"><img src="http://www.google.co.jp/favicon.ico" width="16" height="16" alt="Google Bookmarks" title="Google Bookmarks に追加" /></a>

≪Yahoo!ブックマーク≫
<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=<$MTEntryTitle encode_url="1"$>:%20<$MTBlogName encode_url="1"$>&u=<$MTEntryPermalink encode_url="1"$>" rel="nofollow"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマーク" title="Yahoo!ブックマークに登録" /></a>

≪Buzzurl≫
<a href="http://buzzurl.jp/entry/<$MTEntryPermalink$>" title="Buzzurlにブックマーク" target="_blank"><img src="http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_05.gif" alt="Buzzurlにブックマーク" style="border:0"></a><a href="http://buzzurl.jp/entry/<$MTEntryPermalink$>" title="Buzzurlにブックマーク" target="_blank"><img src="http://api.buzzurl.jp/api/counter/<$MTEntryPermalink$>" alt="Buzzurlにブックマーク" style="border:0"></a>


便利なサービス:addclips

アイコンの設置が面倒な場合はAddClipsという無料サービスがあります。AddClipsボタンを貼るだけで20のソーシャルブックマークと12のRSSリーダーに対応可能で便利な無料サービスです。


Tweet Buttonとmixiチェックボタンの横にソーシャルブックマークのアイコンを追加しました。今回設置したのは、"はてなブックマーク" 、"livedoor clip"、"Googleブックマーク" 、"Yahoo!ブックマーク" 、"Buzzurl" のボタンです。
gon101123

テンプレートの貼りたい場所に以下を追加します。

≪はてなブックマーク≫
<a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink encode_url="1"$>" rel="nofollow" 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>

≪livedoorクリップ≫
<a href="http://clip.livedoor.com/clip/add?link=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>&jump=ref" title="livedoorクリップに追加"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" alt="livedoorクリップに追加" width="16" height="16" /></a>

≪Google Bookmarks≫
<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>:%20<$MTBlogName encode_url="1"$>"><img src="http://www.google.co.jp/favicon.ico" width="16" height="16" alt="Google Bookmarks" title="Google Bookmarks に追加" /></a>

≪Yahoo!ブックマーク≫
<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=<$MTEntryTitle encode_url="1"$>:%20<$MTBlogName encode_url="1"$>&u=<$MTEntryPermalink encode_url="1"$>" rel="nofollow"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマーク" title="Yahoo!ブックマークに登録" /></a>

≪Buzzurl≫
<a href="http://buzzurl.jp/entry/<$MTEntryPermalink$>" title="Buzzurlにブックマーク" target="_blank"><img src="http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_05.gif" alt="Buzzurlにブックマーク" style="border:0"></a><a href="http://buzzurl.jp/entry/<$MTEntryPermalink$>" title="Buzzurlにブックマーク" target="_blank"><img src="http://api.buzzurl.jp/api/counter/<$MTEntryPermalink$>" alt="Buzzurlにブックマーク" style="border:0"></a>


便利なサービス:addclips

アイコンの設置が面倒な場合はAddClipsという無料サービスがあります。AddClipsボタンを貼るだけで20のソーシャルブックマークと12のRSSリーダーに対応可能で便利な無料サービスです。

MTTweetButton(作者 : macminiosxさん)というプラグインを使って、Twitterの公式Tweet Buttonをブログに設置してみました。Tweet Buttonを押すと、ブログの記事やタイトル、URLなどをTwitterに投稿できるようになります。

1.MTQ | Movable Type 5 ユーザーコミュニティの「プラグイン/テーマ」からTwitterを検索すると、数種類のTwitter関係のプラグインが出てきます。

2.その中から「MTTweetButton」を選択して、ダウンロードページ(BSDあれこれ)に行きます。設置方法、利用に関する注意事項をを確認します。

3.ページ下部のダウンロードファイルをダウンロード後に解凍して自分のサーバーにアップロードします。
(1)「MTTweetButton_0.10」の「plugins」の中にある『MTTweetButton』を、Movable type直下の「plugins」にアップロードします。
(2)「MTTweetButton_0.10」の「mt-static」>「plugins」の中ある『MTTweetButton』を、今度はMovable typeの「mt-static」>「plugins」内にアップロードします。
(3)Movable typeのダッシュボードから、ブログのメニュー内にあるツールのプラグインに「MTTweetButton 0.10」と表示されます。

4.Movable typeのダッシュボードから、ブログのメニュー内にあるツールのプラグイン「MTTweetButton 0.10」を開き、設定をクリックします。(※ダッシュボードは設置するブログ(システムメニューではない)のツールのプラグイン「MTTweetButton 0.10」の「設定」)
101007-00.jpg

設定画面が開きます。
101007-01.jpg

MT-Tweet-Button Setting
『Choose your button』:設置するボタンの種類を選択
『Language』:設置するボタンに表示したいの言語を選択
『Add Tweet title』:自分のブログ名など必要であれば設定
『Add Hashtag』:ハッシュタグを同時に投稿したい場合は設定


101007-02.jpg

Recommend people to follow
Twitter accounts
『Your own』:自分のTwitterアカウント
『Related accoun』:必要であれば、他のTwitterアカウント
『Related account description』:必要であれば、Related accountの説明


5.テンプレートを書き換えます。

101007-03.jpg

Tweet Button template tag(テンプレートを書き換えるタグ)
(1)「Tweet Button」を表示したいテンプレートの箇所に<mt:TweetButton />を埋め込みます。
私のテンプレートの場合、デザイン「テンプレート」のテンプレートモジュール『ブログ記事の概要』に埋め込みました。場所は投稿日やコメント数、トラックバック数が表示される下部です。
『ブログ記事の概要』はエントリーアーカイブには反映されない様なので、エントリーアーカイブのテンプレートの同じ場所にも埋め込みました。
101007-04.jpg
<!-- Tweetボタン mixiチェック -->
<div style="text-align:right;margin-bottom:1em;"> 強制的に右寄せにしました。
<mt:TweetButton /><$MTMixiCheck$>   mixiチェックも並べています。
 </div>
<!-- Tweetボタン mixiチェック -->

(2)テンプレート「フッター」等にJava scriptを設置<mt:TweetButtonJS />を追記。
設置方法には「フッター」に設置となっていましたが、mixiチェックの場合はテンプレートモジュールの「HTMLヘッダー」に追記するようなので、同じく「HTMLヘッダー」に追記してみました。

このページの上部へ

Googleサイト内検索

最近のピクチャ

  • 仙台東照宮
  • 遠野町家のひなまつり
  • 大崎八幡宮 拝殿
  • 榴岡天満宮
  • 仙台総鎮守愛宕神社 御社殿
  • 宮城縣護國神社
  • 富岡八幡宮
  • 萬年橋

月別アーカイブ

  1. 2019年3月 [2]
  2. 2019年2月 [11]
  3. 2018年12月 [3]
  4. 2018年11月 [4]
  5. 2018年10月 [2]
  6. 2018年9月 [7]
  7. 2018年8月 [2]
  8. 2018年5月 [2]
  9. 2018年4月 [2]
  10. 2018年2月 [3]
  11. 2018年1月 [5]
  12. 2017年12月 [2]
  13. 2017年11月 [1]
  14. 2017年10月 [1]
  15. 2017年9月 [2]
  16. 2017年7月 [1]
  17. 2017年5月 [2]
  18. 2017年4月 [2]
  19. 2017年1月 [1]
  20. 2016年12月 [1]
  21. 2016年10月 [4]
  22. 2016年9月 [4]
  23. 2016年8月 [1]
  24. 2016年7月 [2]
  25. 2016年6月 [1]
  26. 2016年5月 [3]
  27. 2016年4月 [2]
  28. 2016年3月 [5]
  29. 2016年1月 [3]
  30. 2015年12月 [4]
  31. 2015年11月 [2]
  32. 2015年10月 [4]
  33. 2015年9月 [3]
  34. 2015年8月 [4]
  35. 2015年7月 [2]
  36. 2015年5月 [4]
  37. 2015年4月 [2]
  38. 2015年3月 [2]
  39. 2015年2月 [1]
  40. 2015年1月 [4]
  41. 2014年12月 [1]
  42. 2014年11月 [3]
  43. 2014年9月 [1]
  44. 2014年8月 [5]
  45. 2014年6月 [2]
  46. 2014年5月 [1]
  47. 2014年4月 [2]
  48. 2014年3月 [7]
  49. 2014年2月 [1]
  50. 2014年1月 [6]
  51. 2013年12月 [10]
  52. 2013年11月 [7]
  53. 2013年10月 [6]
  54. 2013年9月 [10]
  55. 2013年8月 [3]
  56. 2013年7月 [7]
  57. 2013年6月 [3]
  58. 2013年5月 [8]
  59. 2013年4月 [10]
  60. 2013年3月 [4]
  61. 2013年2月 [13]
  62. 2013年1月 [5]
  63. 2012年12月 [9]
  64. 2012年11月 [1]
  65. 2012年10月 [1]
  66. 2012年9月 [1]
  67. 2012年8月 [1]
  68. 2012年7月 [4]
  69. 2012年6月 [6]
  70. 2012年5月 [4]
  71. 2012年4月 [1]
  72. 2012年3月 [8]
  73. 2012年2月 [8]
  74. 2012年1月 [4]
  75. 2011年12月 [10]
  76. 2011年11月 [9]
  77. 2011年10月 [10]
  78. 2011年9月 [8]
  79. 2011年8月 [9]
  80. 2011年7月 [8]
  81. 2011年6月 [19]
  82. 2011年5月 [16]
  83. 2011年4月 [1]
  84. 2011年3月 [6]
  85. 2011年2月 [18]
  86. 2011年1月 [20]
  87. 2010年12月 [15]
  88. 2010年11月 [20]
  89. 2010年10月 [34]
  90. 2010年9月 [11]

Powered by Movable Type 6.2.4