埋め込みツイート

TwitterTwitter Developer

埋め込みツイートとは?

 状態:  閲覧数:2,039  投稿日:2016-07-20  更新日:2019-03-07
Twitterが公式提供している機能


埋め込みツイートを使用すると?


ウェブサイトのコンテンツにツイートを埋め込むことが可能
ツイートは写真、ビデオ、記事の概要などの追加メディアと一緒に埋め込まれ、リツイートやお気に入り登録の件数などもリアルタイムで表示されます。埋め込みツイートはインタラクティブに操作でき、埋め込みツイートを読んだユーザーは、ツイートしたユーザーのフォロー、返信、リツイート、お気に入り登録を、ページ上で直接行うことができます。


2種類


1.自分のウェブサイトで埋め込みツイートを使う方法
2.開発者がTwitterのAPIを使って埋め込みツイートを自分のアプリケーションに組み込む方法

1.ウェブサイトにツイートを埋め込むためには?
・「ツイートの下部」-「その他」クリック-「ツイートをサイトに埋め込む」を選択
・HTMLコードが記載されたダイアログが表示される
・このコードをコピーペーストすると、ツイートが表示される


ウェブサイトやブログにツイートを埋め込む方法

1.埋め込みツイート

 閲覧数:337 投稿日:2016-11-27 更新日:2016-12-07 

ツイート表示の制御


初期設定
・twitter.comの固定リンクページの表示と同様、ツイート全体が表示される
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">投稿本文</p>&mdash; PHPデモ (@phpdemo2016) <a href="https://twitter.com/phpdemo2016/status/805212441260892160">2016年12月4日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>



「元のツイートを含める」チェックボックスをオフ
・「このツイートをサイトに埋め込む」ダイアログの「元のツイートを含める」チェックボックスをオフにする
・ツイートのスレッドを表示しない
・data-conversation属性をnone
<blockquote class="twitter-tweet"
 data-conversation="none">
...
</blockquote>
・今(2016/12/6)確認してみたら、「元のツイートを含める」チェックボックなど存在しない
英語公式ページにも掲載されていない
・どうやら日本語公式情報は最新仕様にアップデートされていない模様

カード非表示
・埋め込みツイート内のカードは、data-cards属性を使って隠すことができる
※同じコンテンツにリンクしているツイートが多い場合、カード を表示すると見にくくなることがあるため
<blockquote class="twitter-tweet"
data-cards="hidden">
...
</blockquote>


Twitter APIのWeb活用

 閲覧数:342 投稿日:2016-12-01 更新日:2016-12-01 
ウェブサイトにTwitterのコンテンツを埋め込む方法

Twitter Publish
・コレクション、ツイート、タイムライン、プロフィールなどを埋め込むコードが提供されている
・Web ページに Twitter 関係の フォローボタン・ツイートボタン・ウィジェットを載せたいのであれば 上記リンク先 から ブログパーツ (スクリプト) を入手するだけで目的が達成できる

ウェブサイトに直接埋め込むボタン
・フォロー
・ツイートの共有
・ダイレクトメッセージ用

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">⚡️ &quot;モーメントのタイトル&quot;<a href="https://t.co/hm3svzA9mC">https://t.co/hm3svzA9mC</a></p>&mdash; PHPデモ (@phpdemo2016) <a href="https://twitter.com/phpdemo2016/status/801375098275926016">November 23, 2016</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>



Twitter 回答を得られたQ

「Twitter API」を利用するためには? / Twitter API v1.1 / OAuth 1.0A / OAuth 2.0



週間人気ページランキング / 12-1 → 12-7
順位 ページタイトル抜粋 アクセス数
1 マッチングサービス | Webサービスビジネス 15
2 Webサービス | ブックマーク 13
3 動画対応 | プログラミング 11
4 Twitter アカウント管理 | Twitter Developer(Twitter) 6
4 本 | ブックマーク 6
5 開発 0 5
6 GitHubリモートリポジトリ名には日本語を使用できない。使用すると、ハイフンへ自動置換されてしまう | GitHub(Git) 4
6 Git Bash で異なるディレクトリの指定ディレクトリへ移動する。「$ cd /L/3_開発/git/大阪府」 | Git BASH(Git) 4
6 fatal: remote error: is not a valid repository name | Git BASH(Git) 4
7 「Twitter Developers」でApp作成 | Twitter Developer(Twitter) 3
7 Twitterにおける「name」「screen_name」「user_id」の意味は明確に異なる | Twitter Developer(Twitter) 3
7 「ERROR: Repository not found. fatal: Could not read from remote repository.」と表示された場合は、 | Git BASH(Git) 3
8 「Git Bash」→「GitHub」気づき 2022 | GitHub(Git) 2
8 個人事業主が導入可能な「チャージ、支払、送金、出金」機能を有する決済系サービス簡易比較表 2
8 Webサービス開発 カテゴリー 2
8 電話番号認証を新規で行う(SMSメールを受信する)度に、(以前の該当アカウントでは)下記メールを受け取る 2
8 Amazonアソシエイト・プログラム 2
8 Twitter実装記録 / A.Twitter指定キーワード検索 2
8 個人事業主が導入可能な「支払」機能を有する決済系サービス1次選考通過一覧 / 2次選考第1段階 2
8 個人事業主が導入可能な「支払、送金」機能を有する決済系サービス簡易比較表 2
2023/12/8 1:01 更新