SYNCER

SYNCER

Twitter for Websitesの使い方

公開日:

Twitterは、ユーザーが自分のウェブサイトやブログにコンテンツを設置できるように、Twitter for Websitesという名称で、様々なウィジェットやボタンを提供しています。基本的にはHTMLのコードをコピー&ペーストするだけで手軽に利用できます。知識のある人はJavaScriptを使って動的に表示することもできます。

Twitter for Websites
Twitter for Websites
Twitter Developersのウェブサイト(英語)。ウィジェットやボタンの説明があります。

ツイート

個別のツイートを埋め込み表示できます。あるツイートについて言及する時に最適です。

HTML (埋め込み用コード)

<blockquote class="twitter-tweet" data-align="center" data-lang="ja"><p lang="ja" dir="ltr">朝の羽田空港。偶然、日の出。 <a href="https://t.co/AJC8prsY6n">pic.twitter.com/AJC8prsY6n</a></p>&mdash; あらゆ (@arayutw) <a href="https://twitter.com/arayutw/status/819568298794754049">2017年1月12日</a></blockquote>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
Single Tweet - ツイートをウェブサイトに埋め込む
Single Tweet - ツイートをウェブサイトに埋め込む
Twitterのツイートをウェブサイトに埋め込む方法を説明しています。パラメータの説明、JavaScriptによる方法など。

動画

Youtubeと同じように、Twitterに投稿された動画を埋め込み表示できます。

HTML (埋め込み用コード)

<blockquote class="twitter-video" data-lang="ja"><p lang="ja" dir="ltr">ヤギの帰宅イベント(一瞬) <a href="https://t.co/JMbQQc097p">pic.twitter.com/JMbQQc097p</a></p>&mdash; あらゆ (@arayutw) <a href="https://twitter.com/arayutw/status/810834808892891136">2016年12月19日</a></blockquote>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
Single Tweet with Video - 動画をウェブサイトに埋め込む
Single Tweet with Video - 動画をウェブサイトに埋め込む
Twitterの動画をウェブサイトに埋め込む方法を説明しています。パラメータの説明、JavaScriptによる方法など。

ユーザータイムライン

特定のユーザーの最新ツイートを、最大で20件まで表示できます。ブログのプロフィール部分などに設置すると効果的ですね。

HTML (埋め込み用コード)

<a class="twitter-timeline" data-width="350" data-height="300" href="https://twitter.com/SyncerJP">Tweets by @SyncerJP</a>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
User Timeline - ユーザータイムラインをウェブサイトに埋め込む
User Timeline - ユーザータイムラインをウェブサイトに埋め込む
Twitterのユーザータイムラインをウェブサイトに埋め込む方法を説明しています。パラメータの説明、JavaScriptによる方法など。

モーメント

モーメントをサイトに埋め込み表示できます。画像ギャラリーを手軽に配置できます。

HTML (埋め込み用コード)

<a class="twitter-moment" data-limit="4" href="https://twitter.com/i/moments/781785957909475328">旅行の思い出</a>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
Moment - モーメントをウェブサイトに埋め込む
Moment - モーメントをウェブサイトに埋め込む
Twitterのモーメントをウェブサイトに埋め込む方法を説明しています。パラメータの説明、JavaScriptによる方法など。

リスト

任意の数だけユーザーを選んでそのユーザーたちだけのツイートで構成された、リストのタイムラインを表示できます。

HTML (埋め込み用コード)

<a class="twitter-timeline" data-width="350" data-height="300" href="https://twitter.com/arayutw/lists/list">Tweets from https://twitter.com/arayutw/lists/list</a>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
List Timeline - リストをウェブサイトに埋め込む
List Timeline - リストをウェブサイトに埋め込む
Twitterのリストをウェブサイトに埋め込む方法を説明しています。パラメータの説明、JavaScriptによる方法など。

検索結果

ツイートの検索結果のタイムラインを埋め込み表示できます。イベントを開催した時に、ウェブサイトでそのハッシュタグの検索結果を掲載しておくと良い宣伝になるでしょう。

HTML (埋め込み用コード)

<a class="twitter-timeline" data-width="350" data-height="300" href="https://twitter.com/search?q=url%3Asyncer.jp" data-widget-id="825207678788001792">url:syncer.jpに関するツイート</a>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
Search Timeline - 検索結果をウェブサイトに埋め込む
Search Timeline - 検索結果をウェブサイトに埋め込む
Twitterの検索結果をウェブサイトに埋め込む方法を説明しています。パラメータの説明、JavaScriptによる方法など。

コレクション

目的のツイートだけを集めたコレクションというタイムラインも、埋め込み表示することができます。コレクションの内容は、作者が編集しない限り変わることがありません。特定のやりとりについて言及する時などに適しています。

HTML (埋め込み用コード)

<a class="twitter-timeline" data-width="350" data-height="300" href="https://twitter.com/arayutw/timelines/825229200869122048">コレクション</a>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
Collection Timeline - コレクションをウェブサイトに埋め込む
Collection Timeline - コレクションをウェブサイトに埋め込む
Twitterのコレクションをウェブサイトに埋め込む方法を説明しています。パラメータの説明、JavaScriptによる方法など。