記事内にTwitterのツイートを埋め込む方法

Twitterでは自分のツイートや他人のツイートを記事内に埋め込んで紹介する事ができます。この機能を上手く使う事で商品紹介の信憑性も上げる事ができますよね。他の人も絶賛してますよっていう紹介の仕方もある訳です。

記事内にTwitterのツイートを埋め込むのは非常に簡単ですが、アメブロの場合はやり方が少し違うのでそれも解説しておきます。

スポンサーリンク
アフィリエイトBパートナー募集

ツイートを記事内に表示する手順

アメブロ以外のブログの場合は自分のTwitterにログインして記事内に埋め込みしたいツイートを探します。

探したらツイートの右下に「その他」という項目があるのでこれをクリックし、「ツイートをサイトに埋め込む」をクリック。

Twitter埋め込み-1

するとコードが表示されるのでこれをコピーして記事内に貼り付けするだけです。

Twitter埋め込み-2

コードを貼り付けた部分にツイートが表示されます。

Twitter埋め込み-3

ツイートのコードを貼り付けできない場合はHTMLが編集できるエディタ(タグ編集エディタ)になっているか確認をしておきましょう。

アメブロにツイートを埋め込む場合

アメブロでは色々と禁止タグがあるのでこのままコードを追加しても上手くツイートを埋め込む事ができません。分りやすく説明するとTwitterの埋め込みコードはこのようになっています。

Twitter埋め込み-7

最後の行に「script」「/script」で囲まれたコードがありますよね。この「script」要素が禁止タグになります。

そのため、禁止タグの部分だけを先に記事内ではなく「フリープラグイン」に追加しておき、記事で埋め込む時にコードから「script」「/script」で囲まれたコードを削除すればツイートを埋め込む事が可能です。順番に説明していきます。

最初にアメブロの設定で「新エディタ」もしくは「タグ編集エディタ」になっているか確認しておきます。マイページからメニューマーク⇒「基本設定」をクリック。

Twitter埋め込み-5

それで記事投稿画面(エディタの設定)で「新エディタ」もしくは「タグ編集エディタ」を選択。初心者は「新エディタ」がおすすめです。選択したら「保存」。

アメブロエディタ-1

次にもう一度アメブロのマイページの右上のメニューマークをクリックしてプラグインの追加をクリック。

ツイッターサイド-9

次に「フリープラグイン」をクリックします。

Twitter埋め込み-4

「フリープラグイン」に次のコードを追加して保存します。

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

「新たにプラグインの追加をした方→サイドバーに配置してください。設定はこちら」という表示がでるので「こちら」という部分のリンクをクリックします。

ツイッターサイド-11

それでサイドバーのどこでもいいのでフリープラグインを追加しておきます。既に追加されている場合はそのままでOK。

ツイッターサイド-12

これで準備は完了。次に記事に貼り付けたいツイートを選択してコードを取得します。

Twitter埋め込み-1

最後に取得したコードを貼り付けてコードの一番最後に書かれている「script」「/script」で囲まれたコードを削除します。(この部分が禁止タグ。これはフリープラグインで追加したため削除)。

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

↑この部分を削除ですね。

削除したら取得したコードを貼り付けるのですが、「新エディタ」の場合は「HTML表示」に切り替えてから貼り付け。

アメブロエディタ-3

これでツイートを埋め込む事ができますが、ブログ編集中に「表示を確認する」をクリックしても反映されていないので、記事を作成して「全員に公開」をクリックしてから表示を確かめてみて下さい。

後は同じ要領でツイートを埋め込む事ができます。つまり「script」要素の部分を削除して貼り付け。

以上がツイートを埋め込む方法です。次回はブログのサイドバーに自分のTwitterのタイムラインを表示する方法を紹介していきます。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。