[MyScripts]ブログにツイートを埋め込む Tweet oEmbed Helper

以下の内容はTwitter API 1.1へ移行後は利用できなくなりますのでご注意ください。

ブログにツイートを簡単に埋め込むためのMyScripts用スクリプトを作りました。Twitterクライアントから埋め込みたいツイートのURLをコピーして実行するだけでブログに必要なHTMLコードを取得します。あとはTextforce、DraftPad、するぷろ、MyEditorなどのエディタアプリにペーストするだけです。

MyScripts LE 2.4（無料）
カテゴリ: 仕事効率化, ユーティリティ
App Storeで詳細を見る

有料版を購入済みの方は無料版をインストールしないでください。

Tweet oEmbed Helperの登録

MyScriptsをインストールしたiPhoneから次のURLをタップします。MyScriptsが起動しますので、そのまま右上の「保存」ボタンで登録します。準備は以上で終了です。

Tweet oEmbed Helperの登録はコチラ：http://tinyurl.com/atu6sw6

Tweet oEmbed Helperの使い方

まず、TwitterクライアントからツイートURLをコピーします。Tweetbotならツイートのメーニューから「ツイートへのリンクをコピー」を選択します。

先ほど登録したTweet oEmbed Helperを実行すると、ブログ埋め込み用のHTMLコードを取得できます。あとはOpen In連携、またはクリップボード経由でエディタアプリにペーストするだけです。

ブログに貼り付けるとこのようになります。WordPressのスマホ用サイトにするプラグイン『WPtouch』で表示しても横幅が途切れないようにしています。

@mk_mizuho @hondamarlboro 今うちのブログがレスぽんなんとかになってる

— moyashiさん (@hitoriblog) 11月 15, 2012

埋め込むツイートをカスタマイズする

Twitter APIの範囲で表示をカスタマイズすることができます。Tweet oEmbed Helperは主要なカスタマイズ項目を取り込んでいます。ピンク下線部分で調整することができます。

omit_script

true
false

外部ファイル（widgets.js）に関する設定。trueにするとHTMLコードから除外します。よくわからない方はそのままにしてください。

hide_media

true
false

Twitter公式の画像アップロードや地図表示機能を使用している場合にメディアを展開して表示します。展開する場合はfalseに修正します。

hide_media=”false”にした例です。大きい画像は思わずスペースを占有してしまうのでデフォルトでは展開しないようにしています。

Twitter API(GET statuses/oembed)を使ってツイートをブログに埋め込むパーツを作るスクリプトを #MyScripts に実装してみた。結構、パラメーターがあるのにビックリ。 twitter.com/hondamarlboro/…

— hondamarlboroさん (@hondamarlboro) 11月 16, 2012

hide_thread

true
false

埋め込みたいツイートに返信元がある場合に、falseにすると会話形式で表示することができます。

hide_thread=”false”にした例です。

@mk_mizuho @hondamarlboro 今うちのブログがレスぽんなんとかになってる

— moyashiさん (@hitoriblog) 11月 15, 2012

aling

none
left
center
right

埋め込みたいツイートの表示位置を指定します。WPtouchとPCサイトの両方で最適化したい場合はnoneがオススメです。

lang

ja
en
fr
de
など

言語設定できます。右上の「フォローする」や「返信」「リツイート」「お気に入りに登録する」、月表示部分が設定した言語で表示されます。2桁の言語コードを使用します。
“en”を指定するとうまく反映されないようなのでhtmlコードに直接書いてやる必要がありそうです。

言語をfr（仏語）に設定してみた例です。

@mk_mizuho @hondamarlboro 今うちのブログがレスぽんなんとかになってる

— moyashi (@hitoriblog) Novembre 15, 2012

公式サイト（英語）で詳細を確認できます。

GET statuses/oembed | Twitter Developers

https://dev.twitter.com/docs/api/1/get/statuses/oembed

Tweet oEmbed Helperの仕組み

ソースは以下のとおりシンプルです。クリップボードにコピーされたツイートURLからidを抽出してTwitter APIをたたき、JSON形式で返ってくるhtmlを取得します。width=”350″が指定されている場合は取り除きます。なお、あまりやり過ぎると”Rate limit exceeded”のエラーが出ますので注意。

Tweet oEmbed Helper by @hondamarlboro

My Recommendation (WPtouch compatible)

Please refer to the following document in detail: https://dev.twitter.com/docs/api/1/get/statuses/oembed

var omit_script = "false";

var hide_media = "true";

var hide_thread = "true";

var aling ="none";

var lang ="ja";

/* Don't touch below */

var tid = TEXT.substring(TEXT.search("/status/")+8,TEXT.length);

var url = "https://api.twitter.com/1/statuses/oembed.json?id="+tid+"&omit_script="+omit_script+"&lang="+lang+"&align="+aling+"&hide_media="+hide_media+"&hide_thread="+hide_thread;

var xhr = new XMLHttpRequest();

xhr.open("GET",url, false);

xhr.send(null);

var res = xhr.responseText;

var data = eval("("+res+")");

if(!data['error']){

var twt = data['html'];

twt.replace(" width=\"350\"","");

} else {

data['error'];

}

Rate Limitエラー以外にも、クリップボードにツイートURL以外をコピーして実行した場合やインターネット接続されていない場合などもエラーになります。

[2012年11月22追記]スレッド表示を都度選択できるTweet oEmbed Helper 2

実行する都度「スレッド表示しますか？」と確認するようにしました。OKを選ぶと返信元を引用してスレッド表示に設定します。キャンセルまたは返信元がない場合は通常形式になります。

Tweet oEmbed Helper 2の登録はコチラ：http://tinyurl.com/atu6sw6

Twitter Developerツール利用上の注意事項

Twitter APIを利用する場合は表示上の制限を受けます。CSSをカスタマイズしてデザインを変更するような行為は表示ガイドラインに抵触します。もっともCSSではwidget.jsで!important指定されているため上書きできないようですが。

Developer Display Requirements | Twitter Developers

https://dev.twitter.com/terms/display-requirements

WPtouch利用時のツイート埋め込み時の注意点

ツイートを埋め込んだ際に、WordPressのWPtouchプラグインを使用しているとスマートフォンで表示させた時に横幅が途切れる場合があります。別エントリにまとめましたのでご参考まで。

WPtouchスマホ用サイトで埋め込んだツイートが途切れる問題への対応

https://daisukeblog.com/?p=1963

有料版 MyScripts

有料版はMyScripts LE（無料版）の「スクリプト登録が10個」の制限がありません。

MyScripts 2.4（￥350）
カテゴリ: 仕事効率化, ユーティリティ
App Storeで詳細を見る