インターネット

ブログやサイトにツイートを埋め込む方法!表示されない時の対処方法は?

将軍
将軍
こんにちは!将軍と言います!

ブログやサイトにツイートを埋め込む事によって、記事の内容が分かりやすいように、また商品やサービスの口コミなども表示させることができるのでとても便利です。

↓表示させてみるとこのような感じになります。


この記事では、Twitterでつぶやかれた内容(ツイート)をブログやサイトに埋め込む方法を解説します。著作権やそのツイートのカスタマイズ方法も少々触れていきますので、参考にしてみてください。

埋め込みツイートとは

埋め込みツイートとはツイートした、された内容をブログやサイトに表示させることができる機能です。設定によっては、そのツイートに含まれている・表示されている写真やGIF画像、動画などを非表示にすることができます。

埋め込みツイートを表示させる方法に主に2種類あり、特徴はこのようになっています。

  • そのツイートのURLをペースト
  • そのツイートの埋め込みコードをペースト(コード内でカスタマイズが可能)

twitterの無断転載は禁止!

twitterだけでなく、他人が作ったコンテンツや画像などを許可なく、ブログやサイト、各SNSで利用することは禁止されています。

twitterで言う、いわゆる『パクツイ』などですね。他人のプロフィール画像を勝手に使ったり、同じツイート内容や写真をダウンロードなどをして自分のアカウントで投稿をしたりすることです。

投稿をしてしまうと、著作権法違反になる可能性もありますので注意が必要です。

ワン太郎
ワン太郎
それじゃあ、埋め込みツイートは良いの?

このツイートの埋め込み機能は、twitterが提供しているものなので、問題はないです。

ユーザーは、本サービス上にまたは本サービスを介してコンテンツを送信、投稿または表示することによって、当社があらゆる媒体または配信方法(既知のまたは今後開発される方法)を使ってかかるコンテンツを使用、コピー、複製、処理、改変、修正、公表、送信、表示および配信するための、世界的かつ非独占的ライセンス(サブライセンスを許諾する権利と共に)を当社に対し無償で許諾することになります。このライセンスによって、ユーザーは、当社や他の利用者に対し、ご自身のツイートを世界中で閲覧可能とすることを承認することになります。

Twitter サービス利用規約より引用

ただし、その方のプロフィール欄に『転載禁止』などの文言が記載されている場合は、控えた方が良いです。ブログやサイトに埋め込む際は、プロフィール欄や注意事項を良く確認するようにしましょう。

ツイートの埋め込み方法

将軍
将軍
ここからツイートの埋め込み方法を紹介していきますね。

まずは、ブログやサイトに埋め込みたいツイート内に表示されているアイコンをクリックします。

クリックした後は『ツイートへのリンクをコピー』か『ツイートをサイトへ埋め込む』を選択します。


上の方でも説明をしました『ツイートへのリンクをコピー』はリンク内でカスタマイズができませんが、『ツイートをサイトへ埋め込む』は多少はコード内でカスタマイズすることができます。

  • そのツイートのURLをペースト
  • そのツイートの埋め込みコードをペースト(コード内でカスタマイズが可能)

『ツイートへのリンクをコピー』を選択するとそのままコピーされますが、『ツイートをサイトへ埋め込む』を選択するとこのような画面になります。このリンクをブログやサイトの投稿画面のテキストモードに貼り付けると、ツイートを埋め込むことができます。


埋め込むツイートが別のツイートへの返信である場合は、元のツイートを含めるのチェックを外すと元のツイートを非表示にすることができます。

また、そのツイートに動画や写真、GIF画像が含まれている場合は、メディアを含めるのチェックを外すと非表示にすることができます。

ツイートの埋め込みをちょっとカスタマイズ!

左寄せ/中央寄せ/右寄せ

リンクやコードをそのままペーストすると、デフォルトだと『左寄せ』になってしまうのですが、中央寄せや、あまりいないと思いますが右寄せにもすることができます。

その場合は、コード内の『ja』の後ろに半角スペースを入れてこちらのコードを追加することで左寄せ/中央寄せ/右寄せにすることができます。

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

高さや幅を調節

次は高さや幅を調節します、デフォルトだと(上に埋め込んであるツイートはデフォルトです。)結構大きいので調節をしたいと言う方も多いと思います。

その場合もコード内の『ja』の後ろに半角スペースを入れてこちらのコードを追加することで多少は調節をすることができます。

  • 幅:width=”200″
  • 高さ:height=”400″

埋め込みコードだとうまく表示されない!

埋め込みコードだとうまく表示されない!という方がいると思います。原因は分かりませんがこのようになると思います。お使いのパソコンの環境で変わるのだと思いますが、(プラグインやJavascriptなど)これだとただの引用になっていますよね。

そんな時は、『ツイートをサイトへ埋め込む』のではなくツイートへのリンクをコピーして貼り付けてみてください。

コード内でカスタマイズをすることは出来ませんが、コードの外でカスタマイズをしてみましょう(CSSなど)

まとめ

将軍
将軍
ここまでの流れをまとめていきますね。
ツイートを埋め込む手順
  1. ログやサイトに埋め込みたいツイート内に表示されているアイコンをクリック
  2. 『ツイートへのリンクをコピー』か『ツイートをサイトへ埋め込む』を選択
  3. 『元のツイートを含める』か『メディアを含める』かを選択
  4. リンクまたはコードを貼り付ける

埋め込みコードだと表示されないという方は、ツイートへのリンクをコピーを試してみてください。原因はプラグインやJavascript、お使いのブラウザで変わるのだと思います。

何か分かり次第追記していきたいと思います。また情報を提供してくださる方がいましたら、教えてくださると嬉しいです。