サイトのトップへ戻る

Twitter 開発者 ドキュメント日本語訳

サイト内検索

ウェブインテント

Twitter JavaScriptを使用すると、あなたは Developer Rules of the Roadへ同意したことになります。

あなたのウェブ上で表示されるツイートに対話型処理を簡単に実装できます。

ウェブインテントでは、ツイートとTwitter ユーザーを処理するための、ポップアップに最適化されたフローを使用できます。:ツイート、リプライ、リツイート、お気に入り登録、フォローが行えます。 これらを使用することで、操作のためだけにページを離れたり新しいアプリを承認することなく、ユーザーはあなたのサイト上でTwitterコンテンツを操作できるようになります。 ウェブインテントはモバイルフレンドリーで、実装がとても簡単です。



ウェブインテントを扱う

ウェブインテントは、あなたのウェブサイト上に表示するツイートを操作できるようにするための最も簡単な方法です。

ウェブインテントは、エンドユーザーがtwitter.comにログインしているかどうかを自動的に検知し、必要に応じてログインするよう要請します。 ユーザーがTwitterアカウントを持っていない場合は、ユーザーが意図したツイート操作を行う前にアカウントを作成するタイミングが入ります。 アプリケーションやAPIキーを登録する必要はありません。

ウェブインテントで Javascriptは必須ではありませんが、Javascriptを使えばウェブインテントのポップアップをより簡単に素晴らしくできます。 我々は、550ピクセル x 420ピクセルでウェブインテントを描写することを推奨します。If you use the provided pop-up Javascript, the heights will be adjusted for you. ポップアップはユーザーが意図した処理を完了すると自動的に閉じられ、その処理を実行する前にはユーザー対して確認が行われます。

また、ウェブインテントはモバイルでの閲覧にも適しており、 iOSと Androidと最近のほとんどのモバイル端末での使用に対応しています。 Web Intents are just URLs that are meant to be loaded in a browser window, whether the current window or one popped up via HTML or Javascript. インテントへのリンクをIFRAME やウィジット内に埋め込むことはできますが、リンク先のページ自体をIFRAME内に読み込むことはできません。

ツイッターバードTwitter bird logo blue 16x16 や お気に入りの星マークTweet favorite や リプライのアイコンTweet reply icon や リツイートの画像Retweet icon は、全て画像リソースで使用できます。 ツイートやその他Twitter リソースを描写するヒントについては、表示要件を参照してください。

あなたのサイトの訪問者が英語以外の言語を使用している場合は、ローカライズしたインテントを使用することを推奨します。 正しい翻訳を取得するには国際化用語集のページを参照してください。



Get Started

ウェブインテントはJavaScript とHTML を簡単に組み合わせて柔軟に呼び出すことができ、新しいウィンドウで開かれます。

インテントを使う最も簡単な方法は、インテントを呼び出したいウェブページにこのSCRIPT タグをインクルードすることです。 既にツイートボタンを設定しているのであれば、ウェブインテントの準備はもう完了しています。

When combined with standard anchor tags and familiar iconography like the examples below, このJavaScriptはクリックされた時に適切なサイズのウィンドウを自動的に開きます。必要なのは platform.twitter.com/widgets.js を一回読み込むことだけです。

<script type="text/javascript" async src="//platform.twitter.com/widgets.js"></script>
<a href="https://twitter.com/intent/tweet?in_reply_to=463440424141459456">Reply</a>
<a href="https://twitter.com/intent/retweet?tweet_id=463440424141459456">Retweet</a>
<a href="https://twitter.com/intent/favorite?tweet_id=463440424141459456">Favorite</a>


Meet the Web Intents



ツイートインテント



ユーザーインテント



ツイートへツイートやリプライする

https://twitter.com/intent/tweet

ツイートインテントに関する詳細情報は ツイート用のウェブインテントのドキュメントを参照してください。



ツイートのリツイートする

https://twitter.com/intent/retweet

リツイートは、あなたのユーザーがあなたのコンテンツをを自分のフォロワーに拡散するための、強力な方法です。

リツイートの公式アイコンは です。 その他の画像リソース »

Web Intent retweet

サポートしているパラメータ

  • tweet_id

    全てのツイートはIDによって識別されます。 APIもしくは、ツイートのパーマリンクページを見ることで(通常はツイートの“公開された”日時をクリックすることでアクセスできる)、この値を見ることができます。

    使用例

    36287294927413248

  • related

    このツイートに関連するお勧めTwitterユーザーをコンマ区切りでまとめた値。 リツイートの投稿が完了した後、Twitter はこれらのアカウントのフォローを勧めます。

    ユーザー名の後ろにURLエンコードしたコンマとテキスト文を付けて、このアカウントがこのツイートとどのように関連するのかを簡単に説明できます。

    使用例

    twitterapi,twittermedia,twitter

    twitterapi%3AFor%20platform%20info,twittermedia%3AFor%20great%20tips



ツイートをお気に入り登録する

https://twitter.com/intent/favorite

ユーザーは様々な理由でお気に入り登録を行います。:ツイートが好きな時、後々のためにそれを保存しておきたい時、感謝の意を表すため。 The favorite intent allows you to provide this Tweet Action and follow up with relevant suggested accounts for the user to follow.

お気に入り登録の公式アイコンは Tweet favoriteです。 その他の画像リソース »

Web Intent favorite

サポートしているパラメータ

  • tweet_id

    全てのツイートはIDによって識別されます。 APIもしくは、ツイートのパーマリンクページを見ることで(通常はツイートの“公開された”日時をクリックすることでアクセスできる)、この値を見ることができます。

    使用例

    35782000644194304

  • related

    このツイートに関連するお勧めTwitterユーザーをコンマ区切りでまとめた値。 ユーザーがツイートを投稿した後、Twitter はこれらのアカウントのフォローを勧めます。

    ユーザー名の後ろにURLエンコードしたコンマとテキスト文を付けて、このアカウントがこのツイートとどのように関連するのかを簡単に説明できます。

    使用例

    twitterapi,twittermedia,twitter

    twitterapi%3AFor%20platform%20info,twittermedia%3AFor%20great%20tips



ミニ-プロフィール

https://twitter.com/intent/user

This Intent provides an unobtrusive way to link names of people, companies, and services to their Twitter accounts. The resultant popup prominently features the account’s profile picture, bio, summary statistics, noteworthy followers, recent tweets and an easy-to-use Follow button.

このインテントを表すには、ツイッターバードのアイコンを使うのが最も簡単です。ツイッターバーとその他画像リソースについてさらに »

Twitter user Web Intent

サポートしているパラメータ

  • screen_name

    全ての Twitter ユーザーはスクリーンネームを持っていますが、それらは変更される場合があります。我々は可能な限り user_id を使用することを推奨します。

    Usage Examples

    biz

  • user_id

    Twitter ユーザーIDはAPIで使用可能で、ユーザーを一意に識別します。

    Usage Examples

    3308337



フォローする

https://twitter.com/intent/follow

フォロー用のウェブインテントはログアウトしているユーザーのために内部にログインフォームを表示し、ログインに成功すると対象のTwitterアカウント をフォローします。



ローカライゼーション

ウェブインテントを特定の言語で表示するようにしたい場合は、インテントURLに langパラメータを渡すことができます。

サポートしている言語



最適化

コンテンツを再精査する

あなたのページのコンテンツを動的に変更した後にa.twitter-share-buttona.twitter-follow-buttonに合致しているa(アンカー)タグを再度精査したい場合は、以下のJavascriptコードを実行することができます。:

 twttr.widgets.load();

外部依存を制限する

Some sites may prefer to embed the unobtrusive Web Intents pop-up Javascript inline or without a dependency to platform.twitter.com. 以下のコードを使用することで、外部への参照を行わずに同等の機能が得られます。

(function() {
  if (window.__twitterIntentHandler) return;
  var intentRegex = /twitter\.com(\:\d{2,4})?\/intent\/(\w+)/,
      windowOptions = 'scrollbars=yes,resizable=yes,toolbar=no,location=yes',
      width = 550,
      height = 420,
      winHeight = screen.height,
      winWidth = screen.width;

  function handleIntent(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        m, left, top;

    while (target && target.nodeName.toLowerCase() !== 'a') {
      target = target.parentNode;
    }

    if (target && target.nodeName.toLowerCase() === 'a' && target.href) {
      m = target.href.match(intentRegex);
      if (m) {
        left = Math.round((winWidth / 2) - (width / 2));
        top = 0;

        if (winHeight > height) {
          top = Math.round((winHeight / 2) - (height / 2));
        }

        window.open(target.href, 'intent', windowOptions + ',width=' + width +
                                           ',height=' + height + ',left=' + left + ',top=' + top);
        e.returnValue = false;
        e.preventDefault && e.preventDefault();
      }
    }
  }

  if (document.addEventListener) {
    document.addEventListener('click', handleIntent, false);
  } else if (document.attachEvent) {
    document.attachEvent('onclick', handleIntent);
  }
  window.__twitterIntentHandler = true;
}());


ツイートを描写する方法

詳細情報については表示ガイドライン »を参照してください。



便利なリソース