意外に検索してもなかなか出てこない。

 オリジナル画像を使ったツイートボタンはこの方のブログがわかりやすいのでリンク
http://edge.sincar.jp/web/original-tweet-button/ 

 これを使ったんだけど、tweet内に表示するリンクurlに#(ハッシュ)がついているurlははじかれてしまうようだった。

http://twitter.com/share?text=サンプルだよー&url=http://sample.com#nyaonyao

っていうツイート文を作ると、、開いた時に

サンプルだよー http://sample.com

となってしまう。
#nyaonyaoの部分が勝手に削除されてしまうんだな。

ツイートボタンにはhashtagsというパラメータもつけられるようになっているけれどそれはツイッター上でのタグ付け機能のためのものであって、リンクにつけるハッシュじゃない。


じゃぁリンクにつけるハッシュはどうしたらいいのー!って調べて英語サイトのほうにいったら、

#ハッシュは%23という文字列でエンコードされる 

 という文章を発見。なるほ。

ということでいろいろやった結果以下のようになった。

コピペで使ってください。

//■ツイート
$('.tweetBtn').click(function(){
var file = 'http://twitter.com/share?text=【ツイート文】&url=http://sample.com%23nyaonyao';
window.open((file), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1');
return false;
});

 <a href="#" class="tweetBtn"><img src="オリジナル画像"></a>

をクリックするとpopアップでツイート画面が開くっていう寸法だね!

%23 → # におきかわって

ツイート画面では

【ツイート文】
http://sample.com#nyaonyao

となるよ!

※1つ注意点は元のサイトさんのほうで紹介されているスクリプトの
window.open(encodeURI(decodeURI(this.href))〜〜

の部分。
デコードしてエンコードしてっていうのをいれると今回の場合、%23がそのまま%23という文字列で表現されちゃうので、トリましたよ。


 サワディーカップ!