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ヘッダー」に追記してみました。

このページの上部へ

サイト内検索

最近のピクチャ

  • 元朝詣り・浄土庭園ライトアップ
  • mt-20171112190238.jpg
  • mt-20171006083002.jpg
  • 報恩寺(盛岡市那須川町)の五百羅漢
  • DSC03578
  • 明治記念館「旧岩谷堂共立病院」
  • 「由利高原鉄道鳥海山ろく線」(曲沢駅付近)
  • 五百羅漢(遠野市綾織町新里)

Powered by Movable Type 6.2.4