スポンサーサイト はてなブックマークに追加 |

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

--年--月--日 | スポンサー広告 | トラックバック:- | コメント:- | 拍手コメントを見る

ブログに「Twitterつぶやきボタン」と「Tweetカウント」を設置する方法 はてなブックマークに追加 |

ブログに「Twitterつぶやきボタン」と「Tweetカウント」を設置する方法

最近、色々なサイトを見ていると、
「この記事をTwitterでつぶやく」機能を設置しているサイトが増えてきています。

どうやってこういう「つぶやくボタン」を付けるんだろうと調べたついでに、
私のサイトにも付けてみましたので、その方法をご紹介します。

<紹介する3つの方法>
[1] 「Twitter URL」と「TweetBuzz」を組み合わせる方法
[2] Twitter公式の「ツイートボタン」を使う
[3] 「topsy」のツイートボタン


◆ [1] 「Twitter URL」と「TweetBuzz」を組み合わせる方法 ◆

こんな感じ ⇒

【一般的なHTMLタグ】
『Twitter URLによるTweetボタン』
<a href="http://twitter.com/home?status=[記事タイトル]%20[記事URL]" target="_blank"><img title="この記事についてTwitterでつぶやく" src="[アイコン画像のURL]"></a>

『TweetBuzzによるTweetカウント』
<a href="http://tweetbuzz.jp/redirect?url=[記事URL]"><img src="http://tools.tweetbuzz.jp/imgcount?url=[記事URL]"/></a>

上記をブログやサイトに貼ればOKです。

[記事タイトル] : 日本語の場合はエンコードしておく必要があります。
[記事URL] : つぶやいたときのリンク先となるURLです。
[アイコン画像のURL] : Tweetボタンの画像です、お好きなアイコンを使いましょう。

【FC2ブログ向けHTMLタグ】
『Twitter URLによるTweetボタン』
<a href="http://twitter.com/home?status=<%topentry_enc_utftitle>%20<%topentry_link>" target="_blank"><img title="この記事についてTwitterでつぶやく" src="[アイコン画像のURL]"></a>

『TweetBuzzによるTweetカウント』
<a href="http://tweetbuzz.jp/redirect?url=<%topentry_link>"><img src="http://tools.tweetbuzz.jp/imgcount?url=<%topentry_link>"/></a>

FC2ブログの場合、上記のように書けば、記事タイトルと記事URLを
表示している記事に合わせて表示してくれます。

[記事タイトル] : <%topentry_enc_utftitle> (ちゃんとエンコードされてます。)
[記事URL] : <%topentry_link>

FC2ブログ以外のブログでも、記事タイトルや記事URLの記述方法があると思うので、
ブログに応じてその部分を置きかえれば、設置できると思います。

<参考サイト>
FC2ブログに「twitterでつぶやく」ボタンを設置する方法
TweetBuzz - Tweetカウンター


◆ [2] Twitter公式の「ツイートボタン」を使う ◆

こんな感じ ⇒

【使用方法】
(1) Twitterにログインした状態で、下記のサイトに行く。
  ⇒ http://twitter.com/goodies/tweetbutton

(2) 自分の好みに応じて、設定をする。

(3) HTMLコードをコピーして、自分のサイトに貼り付ける。

自分の好みの画像をボタンにすることもできるようです。

FC2の場合、上記のTwitter公式の設定ページでURLとタイトルに、
<%topentry_link>と<%topentry_title>を入力すればOK。

言語選択を"日本語"としておけば、<%topentry_enc_utftitle>にせずに、
<%topentry_title>で大丈夫。

【FC2ブログ向けHTMLタグ】
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title>" data-count="horizontal" data-via="あなたのTwitterID" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<参考サイト>
Twitter公式のツイートボタンがついに登場、誰でも簡単に設置可能


◆ [3] 「topsy」のツイートボタン ◆

↓こんな感じ

topsyのツイートボタンを使います。

【FC2ブログ向けHTMLタグ】
<ページの頭のどこかに貼っておくHTML>
<script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>

<ボタンを配置する場所に貼るHTML>
<div class="topsy_widget_data"><!--
{
"url": "<%topentry_link>",
"title": "<%topentry_enc_utftitle>",
"theme": "light-blue",
"nick": "YourTwitterName"
}
--></div>

英語ページですが、Topsy Retweet Button for Web Sitesの説明を読めば、
色々とカスタマイズすることができます。

<参考サイト>
Topsy Twitterブログパーツ。ツイート数を表示するパーツを設置。
[を] Topsy はじめました


◆ 以上です。 ◆

私は、現在は、2番目に紹介したTwitter公式の方法で設置してみました。
みなさんも設置してみてはいかがでしょう?


<すくみう関連記事>
あまり知られていないFC2ブログの設定いろいろ。
あなたのブログ、一度バックアップを取っておきましょう。
FC2ブログの全記事表示プラグインが約500件しか表示されない


今日のニュース

▼ 【 スク水 】

コミケお疲れ様でした!その2
 (情報元:LEVEL-Re;

コミケお疲れ様でした!その2
つららスク水!!(*´∀`*)

コミケ78お疲れ様でした!
 (情報元:Iceman!!/天草帳のブログ

コミケ78お疲れ様でした!
みっちゃんスク水!!(*´∀`*)

今日の落書き
 (情報元:ツキヒト日記

今日の落書き
美琴スク水!!(*´∀`*)

夏 「今日暑いだろ?ちなみにこの暑さ、あと2週間続けるからよろしくな!」
 (情報元:カナ速

こちらこそ、よろしくだぜ!

▼ 【 ストライクウィッチーズ 】

ニトロプラス所属のシナリオライター"虚淵玄氏"が『ストライクウィッチーズ』を観て自問自答
 (情報元:今日もやられやく

虚淵玄さんがストライクウィッチーズを!!おぉ!!

▼ 【 アニメ・コミック・声優 】

笑っていいとものテレフォンショッキングにハローキティー(CV:林原めぐみ)が登場!タモリが容赦ないツッコミを入れる
 (情報元:かくれオタのブログ
ハローキティ、アルタに登場?
 (情報元:K’s Station HATENA ver.

いいともにキティちゃん登場!

“声優・平野綾が軸”は不変、ロングインタビュー映像を公開
 (情報元:おた☆スケ

声優にリテイクを頼む時の魔法の一言
 (情報元:everything is gone

ほぅ。

コミックマーケット78 3日目反省会レポート
 (情報元:橋本充電中

反省会レポート。

ALTER ~ サーニャ・V・リトヴャク ~
 (情報元:figuephoto

サーニャ、月をバックに。
すごい綺麗です。

▼ 【 イラスト・画像・動画 】

平沢さんの妹さん
 (情報元:チセノマチスリー

憂の裸エプロンは、こう・・・グッときますね。

▼ 【 ライフハック・ライフスタイル 】

上手く行かない「原因」を正しく見ることができているか?
 (情報元:烏は歌う

発声方法についての陥りやすい落とし穴について。

目黒のさんま祭り2010(第十五回)が開催。並ぶなら早朝から
 (情報元:ライフハック | Tokyoハッカー

さんま食べたいー。

▼ 【 2ch・ネタ・雑学 】

ヒトカラ楽しすぎワロタwwwwwwwwwwwww
 (情報元:カナ速

結局、まだヒトカラに行ったことがないです。

セミの鳴き声
 (情報元:セミの鳴き声

色々なセミの鳴き声を聞くことができます。

▼ 【 ストライクウィッチーズ (pixivイラスト) 】

たかさん倉庫 たかさん



● 黒アリさん




● yukiさん



Milk Cocoa れみゅ!さん



● pokkeさん






2010年08月19日 | PC・ツール・WEB関連 | トラックバック:0 | コメント:0 | 拍手コメントを見る

<< pixivイラスト:「ストライクウィッチーズ」の頭身がすごいと話題に | すくぅうみうぎTOP | 裸かと思ったよ!白スクのすくっとみうみうさん! >>












管理者にだけ公開する

| このページの上へ |

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