ホームページやブログを閲覧していると、Twitterを埋め込んでいるところを見かけると思います。
自分が持っているコンテンツでもTwitterを使いたいですが、「埋め込み方が難しそうでやったことがない」という人多いのではないでしょうか？
今回はTwitterにおけるツイートの埋め込み方から、トラブルが発生した場合の対処法が分かるように説明しています。Twitterの埋め込みについて知りたい方は、最後までご覧ください。
目次
Twitterの埋め込み方を3種類紹介
ここでは「ツイート単体」「ツイートボタン」「タイムライン」の3種類を紹介します。
Twitterで埋め込み可能なパーツとは？
Twitterでは、主に以下のパーツが埋め込み可能です。
- ツイート単体・・一つひとつの投稿
- ツイートボタン・・タップするとツイートやフォローができるボタン
- タイムライン全体・・一人のアカウントが投稿したツイート一覧
Twitterのツイート単体を埋め込む手順
- 【https://publish.twitter.com/】に移動する
- 上記のボックスに埋め込みたいツイートのURLを入力する
- Twitterを埋め込むWebサイトに合わせて、高さやテーマなどを指定する
- 出て来たコードをコピーして、WebサイトのHTMLに貼り付ける
【https://publish.twitter.com/】に移動すると、検索ボックスのようなボックスが確認できます。
埋め込みたいTwitterに移動してURLを取得します。
【https://publish.twitter.com/】に戻ってTwitterのURLを入力しましょう。必要に応じてサイズを調整します。
ツイートボタンを埋め込むには？
- 【https://publish.twitter.com/】に移動する
- 画面を下にスクロールするとツイートボタンのオプションがある
- ツイートボタンを選択する
- 5種類の中から希望のボタンを選択する
【https://publish.twitter.com/】に移動して、画面を下にスクロールしましょう。すると、ツイートボタンが選択できるようになっています。
右端の「Twitter Buttons」をクリックすると、5種の選択肢が出てきます。
- シェアボタン・・ボタンクリックでツイートがシェアできます
- フォローボタン・・指定したアカウントのフォロー画面が出せます
- メンションボタン・・ボタンクリックで指定したアカウントへのお知らせをツイート画面に自動追加します
- ハッシュタグボタン・・ボタンクリックで、指定のハッシュタグがツイート入力画面に自動挿入されます
- メッセージボタン・・ボタンクリックでダイレクトメッセージの画面が開きます
今回は試しに「シェアボタン」を選択してみました。すると、以下のようにコードが出てくるので、コピーして貼り付けるといいでしょう。
タイムラインを埋め込むには？
Twitterにおけるタイムラインとは、自分やほかの人のツイートが表示されている画面のことです。以下の手順で、タイムラインを埋め込めます。
- 【https://publish.twitter.com/】に移動する
- 1のボックスに埋め込みたいプロフィールやリストのリンクを入力する
- Webサイトに合わせてサイズなどをカスタマイズする(任意)
- 出て来たコードをコピーする
1のURLに移動して、出て来たボックスにプロフィールやリストのリンクを入力します。
次に、左の「Embedded Timeline」をクリックしてください。すると、以下のように埋め込みコードが表示されます。
カスタマイズ画面では、以下の設定ができます。
①タイムラインのサイズ
②明るさ調整
③言語を選択
Twitterツイートを埋め込むメリットとデメリット
ツイートの埋め込みにはメリットとデメリットがあるので、ホームページやブログの環境も合わせて考えるといいでしょう。
Twitterのツイートを埋め込むメリット
Twitterのツイートを埋め込むと、ホームページやブログにおける信頼性の向上に繋がります。
たとえば、アフィリエイトの記事で使用者の口コミを埋め込めば、第三者のリアルな声が届けられるのです。
そのため、「自分には人より優れた経験もないし、知識もないから信頼性や権威性を高められない。」と悩んでいる人に役立つでしょう。
Twitterのツイートを埋め込むデメリット
Twitterのツイートを埋め込むと、どうしてもWebサイトの表示スピードに影響を与えてしまいます。
ユーザーが「ページの読み込み速度が遅い」と感じるほどではありませんが、表示スピードが遅いとSEOの評価が下がる可能性があるのです。
そのためTwitterのツイートを埋め込むときは、必要な部分に適切な数だけ埋め込むようにするといいでしょう。
ホームページやブログの表示速度は、Googleが無料で提供しているツール「Google PageSpeed Insights」で確認できます。このページに移動して、速度を計測したいURLを入力するだけで計測が可能です。
Twitterの埋め込みを使うときに許可は必要なの？
Twitterはインターネット上に公開されている有益な一次情報です。そのため、自分のホームページやブログで掲載したいと思う人もいるでしょう。
しかし、「人の投稿を勝手に自分のホームページやブログに載せていいの？」と考える人も多いと思います。
Twitterの埋め込みを使ってツイートを引用することは、Twitter公式が認めています。以下の、公式から引用した文章を参考にしてください。
コンテンツを他の媒体やサービスで配給、放送、配信、リツイート、プロモーションまたは公表することを目的として、その他の企業、組織または個人に提供する権利が含まれていることに同意するものとします。
Twitterサービス利用規約
Twitterの埋め込みにおけるトラブルの対処法
Twitterの埋め込みは環境によってスムーズにいかない場合があります。そんなときはこちらを確認してください。
タイムラインのサイズが調整できないとき
「タイムラインを埋め込むには？」の項目にて、埋め込みの際にサイズを指定できることをお伝えしました。しかし環境によって、タイムラインのサイズを変更する機能が作動しないときがあります。
タイムラインのサイズが変更できない原因はいくつか考えられます。よくあるケースとして、WordPressのホームページやブログで「VK All in One Expansion Unit」のプラグインを入れている場合です。
VK All in One Expansion Unitは複数の機能が実装されているプラグインです。このプラグインを使用していると以下のCSSコードが生成されるのですが、これによってサイズが固定されているのが原因だと考えられます。
iframe.twitter-timeline {
margin-right: auto;
margin-left: auto;
width: 740px !important;
}
この場合は、Twitterのサイズを変更できるようになる以下のコードをCSSに追加するといいでしょう。
iframe.twitter-timeline {
width : auto !important;
}
埋め込みが表示されないとき
埋め込みが表示されないときは、以下が考えられます。
- WordPressのプラグインによる影響
- Twitterが鍵垢になっている
「タイムラインのサイズが調整できないとき」と同様に、WordPressのプラグインが影響を与えている可能性があります。
対処法は手間がかかりますが、プラグインを一旦停止してみてください。その後に一つずつ有効にして、埋め込みの表示に影響を与えているプラグインを探すといいでしょう。
Twitterには、フォロワー以外に自分のツイートを表示させないようにする機能があります。いわゆる「鍵垢」というもので、この機能が有効になっていると埋め込んだツイートが表示されません。
Twitterの埋め込みをホームページに活用しよう
Twitterの埋め込み方は一種類だけではないので、用途に応じて活用できます。自分のホームページに有益な情報を増やしたいときは、ツイートの埋め込みをするといいでしょう。
「BARIYOKA-ばりよか-」は福岡でホームページを制作しています。Twitterを埋め込んだデザインの制作も可能なので、お気軽にご相談ください。
092-725-5708