コンテンツへスキップ

ツイッター投稿記事やタイムラインをHPやブログに埋め込む方法

ツイッター埋め込み

ツイッターの投稿記事やタイムラインをHPやブログに埋め込むことが出来ます!いくつか種類と方法がありますので、目的に合わせて取り組んでいきましょう。

ツイッターで埋め込められるパーツ

ツイート自体とツイートボタン、タイムラインを公式の機能でコード取得することによりブログやHPに貼り付けて埋め込めることができます。また、タイムラインの種類としてはメインのタイムライン、”いいね”した記事集、リスト、モーメント、コレクションをそれぞれ埋め込むコードを発行することが可能です。

ツイートを埋め込む方法

① パソコンのwebブラウザでツイートを表示
② 埋め込みたいツイートの右上にあるプルダウンマークをクリックして、
③「ツイートを埋め込む」をクリックしコードを表示。
④ 自身のブログやHPに貼り付け埋め込み

ブラウザで埋め込みたいツイートを表示し「・・・」をクリック。「ツイートを埋め込む」をクリック

 埋め込み用公式ページが開くので「Copy Code」をクリックし、ブログやHPにコピペする

公式埋め込みページからコードを取得する

 Twitter Publish(埋め込み用公式ページ)に直接アクセスして埋め込み用コードを取得することが可能です。
ここではツイート、各種シェア、各種タイムラインのコードを取得できます。

「Embedded Tweet」ではツイート単体のURLを貼り、「Preview」クリックすることで、埋め込みコードを作成してくれます。

メインのタイムラインを埋め込むコード

タイムライン全体をブログやウェブサイトに埋め込むためのコードです。埋め込み専用ページTwitter Publishを開き、「Embeded Timeline」をクリックします。
タイムラインのURLを貼り「Preview」をクリックしコードを取得しましょう。

シェアツイートボタンを埋め込むコード

そのボタンを埋め込んだブログやwebページをシェアしてもらったり、フォロー登録をしてもらうための誘導ボタンです。埋め込み専用ページTwitter Publishを開き、「Twitter Buttons」をクリックします。シェアボタン、フォローボタン、メンションボタン、ハッシュタグボタン、メッセージボタンの5種から選びコードを取得します。「シェア」ボタンのみURLでPreviewする必要なくコード取得可能です(コードが埋め込まれたページがシェアされるため)

リストを埋め込むコード

メインのタイムライン同様に公開中のリストであれば埋め込むことが可能です。ツイッター左にあるメニューの「リスト」をクリックし、埋め込みたいリストを選びます。選択したリストのURLをコピーして埋め込み専用ページTwitter Publishコード取得に使用します。

モーメントを埋め込むコード

モーメントは、「いま」話題のツイートをまとめたものです。「モーメント」もURLを使用することで埋め込みコードを取得することが出来ます。モーメントのURLは”https://twitter.com/i/events/数字/”で表示されていますが、「events」の部分を「moments」に変えて埋め込み専用ページTwitter Publishでコードを取得します。

コレクションを埋め込むコード

Collectionとはお気に入りのツイートをまとめたコレクションです。collectionを作成するにはTwitterのサブドメインである「https://tweetdeck.twitter.com/」で作成します。collectionも埋め込みコードを取得することができます。

サイト内の左にあるメニューから作成することができ、ツイートをドロップしてまとめていきます。

まとめたcollectionはシェアで「Enbedded Collection」をクリックすると、埋め込み専用ページTwitter Publishに移りコードを取得できます。