ウェブサイトにツイートやTwitter動画を追加すると、コンテンツにインタラクティブで魅力的な要素を加えることができます。このチュートリアルでは、ブログやウェブサイトにツイートやTwitter動画を埋め込む簡単な手順を解説します。これにより、コンテンツの魅力を高め、オーディエンスのエンゲージメントを高めることができます。
マイクロブログのスタートアップであるTwitterがモバイルアプリ内で直接動画を撮影できる機能を導入した直後から、Twitter動画を埋め込むニーズが高まりました。この記事では、ツイートをウェブサイトやブログに埋め込む方法、あるいはTwitterウィジェットを使ってTwitterでホストされた動画の埋め込みコードを取得し、ウェブサイトで利用する方法をご紹介します。
直接行う
WordPressなどのほとんどのCMSプラットフォームでは、ツイートのリンクをコピーしてブログ投稿エディタにURLを貼り付けるだけで済みます。ビジュアルエディタ、プレビュー、または公開後にツイートが自動的に展開されて表示されます。
それに加えて、ツイートの埋め込み HTML コードも取得できます。これを使用すると、いくつかのカスタマイズ オプションを利用できるという利点があります。
ウェブサイトに埋め込むツイートや動画のHTMLコードを取得します
1) Web ブラウザで Twitter を開き、テキスト、画像、GIF、またはビデオを含むツイートを探します。
2)該当のツイートの3つの点のメニューボタン(•••)をクリックし、 「ツイートを埋め込む」を選択します。新しいタブで自動的に開きます。
3) 「カスタマイズオプションを設定」をクリックします。ここから、このツイートをウェブサイトまたはブログ投稿にライトモードまたはダークモードで表示するかを選択できます。さらに、言語を選択したり、会話を非表示にしたり、 「Twitterのカスタマイズをオプトアウト」のチェックボックスをオンにしてTwitterによるデータ収集を無効にしたりできます。
4)ツイートのカスタマイズが完了したら、「更新」ボタンをクリックしてコードを更新します。
5)次に、「コードをコピー」をクリックして、そのツイートをコンピューターのクリップボードに埋め込むためのコードを取得します。
6)ブログ投稿エディタを開き、コピーしたコードをHTMLセクションに貼り付けます。
例えば、WordPressのクラシックエディターをお使いの場合は、「テキスト」をクリックしてコピーしたHTMLコードを貼り付けることができます。ブロックエディターをお使いの場合は、コピーしたコードをHTMLブロックに追加できます。Wix、Squarespace、その他の大規模/カスタムCMSをお使いの場合は、手順が異なる場合があります。
7)最後に投稿を保存し、プレビューまたは公開します。プレビュー版または公開版の投稿を表示すると、ツイートがブログ投稿に美しく埋め込まれていることがわかります。ツイートに動画が含まれている場合、ウェブサイト訪問者は再生ボタンを押せば、ブログ投稿を離れることなく動画を視聴できます。埋め込まれたTwitterウィジェットの他の部分をクリックすると、Twitterのウェブサイトでそのツイートが新しいタブで、またはユーザーのTwitterアプリで開きます。
私たちからの役立つTwitterのヒント:
- Twitterでフル解像度の画像をアップロード・ダウンロードする方法
- Twitterプロフィールから誕生日を非表示または削除する方法
- iPhoneでTwitterの動画をダウンロードする6つの方法
関連するTwitterリソース:
- TwitterのウィジェットJavaScriptの展開方法
- 埋め込みツイートCMSのベストプラクティス
