2023年09月 / 08月≪ 123456789101112131415161718192021222324252627282930≫10月
 
FC2ブログに「twitterでつぶやく」ボタンを設置する方法  
2009.07.26 (Sun)
一応メモ。
FC2ブログで、右下のTwitterボタンアイコンこれ(twitterでつぶやくボタン)を表示する方法。

※[2011/07/24追記]今はFC2ブログの設定でTweetボタン設置できるようになったんで
 このブログでは↑は外しました。


まず、twitterのボタンアイコンは、
ブログにTwitterボタンを付ける方法(Blog on Publickey)から拝借(感謝!)
上記サイトのアイコン画像を右クリックで保存して、
「ファイルのアップロード」から自分のブログに上げておく。

上記リンク先記事にもあるとおり、twitterは

http://twitter.com/home?status=XXX

たったこれだけでXXXをつぶやいてくれるリンクが作れるので、
XXXにつぶやかせたい内容を入れればよい。

たとえば僕の場合は「記事タイトル」+「記事URL」って感じ。
まあだいたいこんな感じでしょう。

あとはFC2ブログテンプレート変数一覧を参考にいたしまして、
記事URLは<%topentry_link>
記事タイトルは、日本語の場合エンコードしないと文字化けしちゃうので、
エンコード化したタイトル<%topentry_enc_utftitle>を使う。

記事URLも、エンコード化したやつ(<%topentry_enc_link>)のほうがいいのかも。
けど、とりあえずちゃんと表示されます(笑)

それで、だいたいこんな感じになりますね。

<a href="http://twitter.com/home?status=<%topentry_enc_utftitle>%20<%topentry_link>" target="_blank"><img title="この記事についてTwitterでつぶやく" src="[アイコンをアップしたURL]"></a>

これを「テンプレートの設定」のHTML編集で
記事下部にあたる部分に挿入するってわけですよー。


ツッコミあればよろしくです。


※追記:↓これもいい感じですねぇ。参考まで。
ブログの横に「Follow me」バッジをつける方法・・・(IDEA*IDEA)


※追記2:コメント欄でいただいた質問について
ハッシュタグ("#hoge")をつぶやく文章に含めたいときは、
シャープ記号をエスケープしてやんないとうまくいかないみたいですね。

上に書いたコードの例文の中の%20っていうのは
スペースを意味してるんですけど、
同じように、"#"を書きたい場合は%23で表す!

なので、例えば↓こんな感じですね。
<a href="http://twitter.com/home?status=<%topentry_enc_utftitle>%20<%topentry_link>%20%23hoge" target="_blank"><img title="この記事についてTwitterでつぶやく" src="[アイコンをアップしたURL]"></a>


edit |  21:55 |  その他雑談  | トラックバック(5) | コメント(22) | Top↑ | あとで読む このエントリーを含むはてなブックマーク
コメント
■はじめまして
面白いアイデアですね。参考になりました。
カンクネン |  2009.09.06(日) 09:55 |  URL |  【コメント編集】
>カンクネン様

ありがとうございます!
お役に立てたなら幸いでございます。
oika |  2009.09.08(火) 21:52 |  URL |  【コメント編集】
■参考にさせていただきました!
「twitterでつぶやく」ボタン,設置できました!情報ありがとうございます.
ぼすとん |  2009.09.11(金) 19:18 |  URL |  【コメント編集】
>ぼすとん様

ご報告ありがとうございます!
それなりに需要があったようでよかったです。
oika |  2009.09.12(土) 07:38 |  URL |  【コメント編集】
■参考になりました
ありがとうございました。
参考になりました。
ymd |  2009.10.22(木) 16:41 |  URL |  【コメント編集】
>ymdさん

自作アイコン拝見しましたが、素敵ですね!
ご報告ありがとうございました!
oika |  2009.10.27(火) 07:57 |  URL |  【コメント編集】
■参考にさせていただきました
無事に設置できました。ありがとうございます。
笹音 |  2010.02.20(土) 10:14 |  URL |  【コメント編集】
>笹音さん

ご丁寧にご報告ありがとうございます。
お役に立てたならなによりです!
oika |  2010.02.24(水) 21:38 |  URL |  【コメント編集】
■おかげさまで
無事設置できました。ありがとうございました!
AQ |  2010.03.22(月) 14:04 |  URL |  【コメント編集】
>AQさん

ご報告ありがとうございます!
思いのほかたくさんの人に活用していただけているみたいで
書いたかいがありました!
oika |  2010.03.22(月) 15:23 |  URL |  【コメント編集】
■ありがとうございます
参考にさせていただきました。
mune |  2010.04.15(木) 14:57 |  URL |  【コメント編集】
■とても便利です!
こんばんは。

今日、ブログのお引越し作業を開始しました。
すると・・・ツイッターに自動で投稿設定が無い?事に気付き
色々ヘルプを探してて、こちらに辿り着きました。

とても助かりました!

無事に設定する事が出来ました、ありがとうございます!
MaRiko |  2010.04.21(水) 00:02 |  URL |  【コメント編集】
まさに、探していたことが書かれていて助かりました。
ありがとうございます。

1つ要望というか質問なんですが、FC2ブログのURLを短縮URLに変換することはできないでしょうか?
JavaScritptとか何かで自動変換できるとベストなんですが・・・
コサ |  2010.04.23(金) 10:08 |  URL |  【コメント編集】
思いのほか反響が多いようでよかったです。


>コサさん

すっかりお返事が遅くなってしまってすいません・・・。
なるほど、短縮URL、できたら便利かもしれないですねー。
時間があったらちょっと考えてみたいかも。
oika |  2010.05.17(月) 21:44 |  URL |  【コメント編集】
参考にさせていただきました!ありがとうございます。
tok |  2010.05.20(木) 01:52 |  URL |  【コメント編集】
■とても参考になりました
無事に設置できましたヽ(´ー`)ノ

ありがとうございます。
yucco |  2010.05.25(火) 02:14 |  URL |  【コメント編集】
ハッシュタグを含ませるとうまくいかないようですが、解決策はありますでしょうか・・・?
wire |  2010.05.27(木) 19:50 |  URL |  【コメント編集】
>tokさん yuccoさん

ご参考になったようで何よりです。
ご報告ありがとうございます!


>wireさん

本文中に追記しました。よろしければお試しください。
oika |  2010.05.30(日) 20:25 |  URL |  【コメント編集】
■Calciumの個人ブログ (釣り、パソコン、淡路島)
つぶやくボタンの設置方法参考にさせていただきました。
ありがとうございます!
アール@グレイ |  2010.08.01(日) 19:49 |  URL |  【コメント編集】
Livedoor Blogでも、上記のやり方を応用して「つぶやくボタン」を設置できました。
ありがとうございました。
Akira |  2011.01.24(月) 02:01 |  URL |  【コメント編集】
■ありがとうございました!
大変参考になりました。
このブログに助けられました。
ありがとうございました。
「中国留学情報」 |  2011.02.03(木) 19:06 |  URL |  【コメント編集】
■参考になりました!
ありがとーございます。
検索でこの記事の事知りました。
大変参考になりました。
ありがとー^^
色々試してみたいと思います。
ミル |  2011.10.20(木) 00:14 |  URL |  【コメント編集】
コメントを投稿する
URL
コメント
パス  編集・削除するのに必要
非公開:  管理者だけにコメントを表示
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック

【この記事をtwitterでつぶやく】 取り合えず「twitterでつぶやくボタン」を追加してみました。まぁ(仮)ということで。。 時間があるときに...
2009/10/21(水) 01:14:22 | Secret live.
今日はツイッター断ちをして、何をしていたかというと、このブログをちみちみカスタマイズしていました…はてなボタンとtwitterでつぶやくボタン、フォローミーバッジの付け方は、ググったらわかりやすいサイトがあったのでまとめて載せておきますはてなボタンの付け方htt...
2009/12/12(土) 22:41:00 | アムリタダイアリー|アートセラピストHANAの日記
ブログの細かい点を少しずつ改善してみようと思い、「はてなブックマークに追加」っていうオプションと、「twitterでつぶやく」オプションを追...
2010/02/14(日) 09:17:15 | the Days of Music and Medicine
便利なTwitter用ブログパーツを設置する方法が紹介されていました。 ●Twitterでつぶやくボタン FC2ブログに「twitterでつぶやく」ボタンを設置す...
2010/03/25(木) 12:04:42 | 浜村拓夫の世界
[Twitterアカウント] ブログ村キーワード Twitter関連のブログパーツを集めてみました。オールジャンルで集めたのでこれだけあればTwitterとブログの連携は完璧ですよ! &#160; 私も以前にTwitterは始めたのですが、開始3分で挫折しました_ノ乙(、ン、)_ 今度こそ再挑戦...
2010/04/11(日) 02:37:08 | 無料でアクセスアップ!初心者でも必ずできる最速SEO術