フォームに入力して「ツイート」ボタンをクリック


別ウィンドウでTwitterの投稿画面になります


キャンペーンサイトなどを作るときによく求められる 「フォームに任意の言葉を入れてボタンを押すと、Twitterの投稿ページへ送信される」 フォームのサンプルです。 jQueryの使用を前提としています。

ここで紹介しているのは最もシンプルな例で、筆者はハッシュタグとURLを除いた文字数を計測して、超過している場合は送信できないようにしたりしています。

Twitterへ投稿させるURL

投稿URLの規則は、2012年8月時点では以下の通りです。

https://twitter.com/intent/tweet?text=★ツイートの内容★&url=★付与したいURL★&original_referer=★付与したいURL★&hashtags=★付与したいハッシュタグ★&related=★送信後にフォローを勧めたいユーザーID★

★で囲まれた送信値は、全てURLエンコードする必要があります。 URLをツイートの本文に含めず別の値にしておくと、長いURLの場合は自動縮小されます。

サンプルコード

URLに「http://code1616.net/」、ハッシュタグに「#いろいろコードスニペット」、お勧めユーザーに「code1616」を付与します。

フォーム部分のHTML

<form name="postTweet" id="postTweet">
<input type="text" size="30" name="tweet" id="tweet" value="テキストを入力">
<input type="button" id="submitBtn" value="ツイートする">
</form>

JavaScript

(function($){ // start jquery
$(function(){

$('#postTweet input#submitBtn').live('click', function(){
var Tweet = $(this).parent().find('#tweet').val();
var Tweet = encodeURIComponent(Tweet);
var Turl = encodeURIComponent('http://code1616.net/');
window.open('https://twitter.com/intent/tweet?text=' + Tweet + '&url=' + Turl + '&original_referer=' + Turl + '&hashtags=' + encodeURIComponent('いろいろコードスニペット') + '&related=code1616', null);
return false;
});


}); //document.ready
})(jQuery); // end jquery

補足

指定したURLを別ウィンドウで表示するスクリプトは、検索すると以下のようなコードが紹介されていることが多いですが、最近のブラウザでは動作しないようです。

window.opener.location.href = 'http://example.com/';

ポップアップなどに利用されるopenメソッドを利用し、第二引数にnullを指定するとtarget="_blank"と同じ効果となります。

window.open('http://example.com/', null);