【最新版】ブログにX（旧Twitter）を埋め込む方法！タイムライン表示や注意点も解説

ユーザー

ブログの記事の中に、X（旧Twitter）のポスト（ツイート）やタイムラインを表示させたいんだけど、どうやるの？プログラミングの知識がなくてもできるかな？

このような疑問を解決します。

こんにちは、セイタです。

いろんな人のブログを見ていると、記事の中にX（旧Twitter）のポストが貼ってあったり、サイドバーにタイムラインが表示されていたりしますよね。

「自分のブログにも同じようにX（旧Twitter）を埋め込みたい」という方向けに、今回はブログにポストを埋め込む方法や、サイドバーにタイムラインを埋め込む手順を画像付きで分かりやすく解説します。

本記事を読むことによって、初心者でもコピペだけで簡単にX（旧Twitter）の埋め込みができるようになるので、ぜひ最後までご覧ください。3分ほどでサクッとマスターしてしまいましょう！

\ 当サイトも使ってるWPテーマ『AFFINGER7』/

当サイト限定特典付き

ブログにX（旧Twitter）を埋め込む2つの方法

ブログにX（旧Twitter）を埋め込む方法はとても簡単です。プログラミングの知識は一切不要で、指定のコードをコピペするだけで完了します。

主に埋め込むパターンは以下の2つあるので、それぞれ順を追って解説していきます。

記事にポスト（ツイート）を単体で埋め込む方法

記事の中に特定のポストを埋め込む手順は以下の通りです。

①：埋め込みたいポストの右上メニューをクリック

②：ポストを埋め込む（Embed post）をクリック

③：Copy Codeをクリックしてコードを取得

④：WordPressのテキストエディターを開く

ブロックエディター（Gutenberg）を使用している場合は、「カスタムHTML」ブロックを呼び出します。

⑤：コピーしたコードを貼り付ける

完成形：ポストを記事内に埋め込んだ状態

ブログ初心者は最初何をするべき？/

個人の経験から言うと、上手くなくてもブログを書くべきですね🤔✨

というのも、収益化どうのより、まずは『書き慣れる』ことにフォーカスした方がいいからです😉

収益化はブログのスタート地点からすると『飛び級』する状態なので、だいぶ過酷なんですよね😇

— セイタ@ブログ廃人 (@seita_blog) June 8, 2020

ここまでの手順で、上記のように記事の中へ綺麗にポストを埋め込むことができます。

サイドバーにタイムラインを埋め込む方法

次に、サイドバーに自分のX（旧Twitter）のタイムラインを埋め込む手順です。

※1：タイムラインの表示サイズは好みに合わせて任意で変更可能です。
※2：「カスタムHTML」などのウィジェット名称は、使用しているWordPressテーマによって多少異なります。

①：publish.twitter.comへアクセス

タイムラインジェネレーターを開く

②：プロフィールのURLをコピーしてペースト

自分のX（旧Twitter）のプロフィールURLを貼り付けたらEnterを押しましょう。

③：Embedded Timelineを選択

④：set customization optionsでサイズを調整する

ここでそのままCopy Codeをクリックしてしまうと、縦に長すぎるタイムラインがサイドバーに埋め込まれてしまうため、必ず「set customization options」からサイズ調整を行ってください。

⑤：heightとwidthを「600×400」などに設定

タイムラインのサイズは、ご自身のブログのサイドバー幅に合わせて設定してOKです。バランスが良いおすすめのサイズが「高さ600px × 幅400px」前後になります。

【その他のカスタマイズ項目】

サイトの背景色に合わせてテーマを選択すると、よりデザインの中に自然に溶け込みます。設定が完了したら『Update』ボタンをクリックします。

⑥：Copy Codeをクリックしてコードを取得

⑦〜⑨：WordPressのウィジェットにコードを追加する

WordPressの管理画面から「外観」＞「ウィジェット」へ進み、コピーしたコードをサイドバーエリアに追加します。

当ブログではAFFINGER7を使用しているため『カスタムHTML』ウィジェットを使いますが、テーマによっては『テキスト』ウィジェットのテキストモードでHTMLコードを貼り付けてもOKです。最後に『保存』をクリックして完了です。

完成形：サイドバーにタイムラインを追加した状態

以上の手順で、サイドバーへ綺麗なタイムラインを表示させることができます。

ブログにX（旧Twitter）を埋め込む時の注意点とSEOへの影響

ブログにX（旧Twitter）を埋め込むと見た目も華やかになりますが、運営上いくつか気をつけなければいけない注意点が存在します。

タイムライン表示はページの「表示速度」を低下させる

もっとも注意すべきなのが、Xのタイムラインや多数のポストを埋め込むと、外部スクリプトの読み込みによりページの表示速度が大きく低下してしまう点です。

もしタイムラインや埋め込みがどうしても必要な場合は、画像の圧縮やキャッシュ系のプラグインを活用して、他の部分でサイトスピードを補う工夫を必ず行いましょう。

返信ポストは「元のポスト（親）」も一緒に表示されてしまう

2つ目の注意点は、リプライ（返信）のポストを記事に埋め込もうとすると、初期設定では「返信元のポスト」もセットで引用されてしまう点です。

例えば、商品のレビューツイートだけをスッキリ見せたいのに、関係ない元ツイートまで表示されてしまい、無駄に縦長のレイアウトになってしまいます。

これを防ぐためには、次の項目で解説する「返信元を隠すカスタマイズ」を行う必要があります。

返信元のポスト（ツイート）を表示させないカスタマイズ方法

返信元のポストを非表示にし、目的のポストだけをスッキリと埋め込む手順は以下の通りです。

基本的な埋め込み手順は同じですが、コードをコピーする前に『Hide Conversation（会話を非表示にする）』にチェックを入れるのがポイントです。

このようにチェックを入れて『Update』ボタンをクリックすると、単体のポストだけが表示される埋め込みコードが生成されます。

あとは通常通り、コピーしたコードをWordPressのテキストエディターやカスタムHTMLに貼り付ければ完了です。

まとめ：X（旧Twitter）を埋め込んでコンテンツを充実させよう！

今回は、ブログにX（旧Twitter）のポストやタイムラインを埋め込む方法と、表示速度などの注意点について解説しました。

ブログにX（旧Twitter）を適切に埋め込むと、文字ばかりの単調な記事に視覚的なアクセントが加わり、第三者のリアルな口コミとしての説得力も高まります。また、ブログからXアカウントへのフォロワー流入にも繋がります。

メリットと「表示速度の低下」というデメリットのバランスを見極めながら、必要に応じて効果的に活用して、より魅力的なコンテンツを作っていきましょう！