Twitterのつぶやきをホームページに埋め込む

スポンサーリンク
Pocket

Twitterでつぶいやいた内容を、ホームページや ブログの記事内に表示できる機能です。この機能を利用すると、 Twitter内で発信された情報をふまえた コンテンツを作成しやすくなります。

埋め込むことができるツイート内容は、以下の3つです。

・ツイートのテキストのみ
・ テキストとツイート内に含まれる画像も表示する(画像が含まれる場合のみ)
・ テキストとツイート内に含まれる動画も表示する(動画が含まれる場合のみ)

※動画を表示する際は、ホームページ上には動画の サムネイルが表示されており、再生ボタンをクリックすることでホームページ上で再生させることが可能です。

ツイートを埋め込む方法

ツイートをホームページ上に埋め込む方法は、大きく2つがあります。どちらも一度覚えてしまえば難しい操作ではありませんので、自身の運営するホームページの仕様に適した方法を選択してください。

・ツイートの URLをペーストする
・ツイートの埋め込みコードを取得してペーストする

ツイートの埋め込みコードを取得してペーストする場合のみ、さまざまなカスタマイズを行えます。カスタマイズを行う際は、取得したコードに以下でご紹介するコードを追加してペーストしてください。

各コードは「“ja”」の後に半角スペースを入れた後ろに入力してください。

参考:<blockquote class=”twitter-tweet” data-lang=“ja” align=“left”><p lang=”ja” dir=”ltr”>

左、中央、右よせ

特にカスタマイズをせずにコードをそのままペーストした場合、以下のようにテキストは左寄せで表示されます。

ホームページの仕様上、左寄せではなく中央または右寄せにしたい場合は、blockquote タグ内に以下のコードを使用してください。

・左寄せ:align=“left”
・中央寄せ:align=“center”
・右寄せ:align=“right”

色を変更する

ホームページのイメージカラーに合わせたツイートの埋め込みをしたい場合に使用できる方法です。
リンクの色、背景色を変更することが可能です。

・ リンクの色:data-link-color=“#000000”
カラーコードについては、紹介されているホームページが多数ありますので使用したい色のコードを「””」内に入力してください。

・背景色:data-theme=“dark”
背景色は「dark」または「light」のいずれかを選択することができます。
特に設定しない場合は、lightの状態で表示されます。

幅・高さを調節する

あまりに大きなサイズを指定しても反映されませんが、多少であれば幅・高さを指定することがで可能です。

・幅:width=”300″
・高さ:height=”500″

手順

step1.

Twitterにログインしておきます。
ホームページ上に埋め込みたいツイートを開くと表示されている、「…」マークをクリックしてください。

step2.

4つのメニューが表示されます

・ツイートの URLをペーストする場合は
「ツイートへのリンクをコピー」を選択してください。

・ツイートの埋め込みコードを取得してペーストする場合は
「ツイートをサイトに埋め込む」を選択してください。

step3.

・ツイートの URLをペーストする場合
ツイートへの リンク URLが表示されますので、コピー&ペーストを行ってください。

・ツイートの埋め込みコードを取得してペーストする場合
埋め込みコードが表示されます。

これで埋め込みは完了です。

自社の アカウントやホーム ページ運営者本人の アカウントでつぶやかれた内容を埋め込む際はあまり問題になりませんが、商品やサービスを利用している ユーザーなどのツイートを埋め込む際、著作権の問題が発生する場合があります。

Twitterの利用規約では、ツイートは世界中の誰しもが閲覧できるものであり、 Twitterが提供している方法を使用したツイートの再使用は許可するもの、とされています。
参考:Twitterサービス利用規約|Twitter

このように、 Twitterが許可している方法以外での転載を行わない限り、ツイートの転載を行うことは可能です。
サービスや商品を利用している ユーザーからお問い合わせ等があった場合は、 Twitterが許可している方法で転載したかどうかを確認の上回答するようにしましょう。

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください