Twitterの埋め込み方法

THE THOR(ザ・トール)でTwitterのツイートやタイムラインを埋め込む方法

Twitterの埋め込み方法

今回はTHE THOR(ザ・トール)でTwitterのツイートやタイムラインを埋め込む方法を解説していきます。

Twitterのツイートやタイムラインを埋め込む方法は、THE THOR(ザ・トール)に限らず他のテーマでも同じなので是非覚えておきましょう!

ブログにツイートを埋め込む方法

ブログにTwitterのツイートを埋め込む方法は2通りあります。

どちらの方法でも表示されるのは同じなので、お好きな方を選んでくださいね。

Twitterにアクセスする

まずはブログにツイートを埋め込むためにTwitterにアクセスしてください。

今回は私が適当に作ったアカウントを例に取って説明していきます。

Twitterホーム画面

埋め込みたいツイートを選んでツイートの右上にある3点マークをクリックしてください。

3点マークをクリック

メニューが展開されますので、その中の【</>ツイートを埋め込む】をクリックしてください。

ツイートを埋め込むを選択

クリックすると別タブでTwitterPublishというサイトが開いて、埋め込み用のURLとコードが表示されます。

これはどちらを使用しても大丈夫です。

TwitterPublish画面

次は【埋め込み用URL】の貼り方と【埋め込み用コード】の貼り方を解説します。

ツイートの【埋め込み用URL】を張り付ける

埋め込み用のURLはTwitterPublishの上部に表示されていますので、これをコピーしましょう。

TwitterPublish埋め込み用URL

https://twitter.com/takeshi_sudooo/status/12345678987654321

埋め込み用URLをコピーしたら、記事の本文などの埋め込みたい箇所にそのまま張り付けるだけで完了です。

URLを張り付けるとURLの文字列が自動的にツイートに変換されて表示されます。

ツイートの【埋め込み用コード】を張り付ける

次は埋め込み用コードで張り付ける方法を解説します。

コードの場合はURLと少々やり方が違うので注意してくださいね。

埋め込み用コードはTwitterPublishの下部に表示されていますので、【Copy Code】をクリックしてコピーします。

TwitterPublish埋め込み用コード

次は投稿編集画面でテキストエディタを開いて埋め込みたい箇所に張り付けてください。

埋め込み用コードの場合は、埋め込み用URLと違ってビジュアルエディタでは張り付けてもツイートは表示されないので注意してください。

プレビュー画面でツイートが正常に表示されているのが確認できたら完了です。

<blockquote class=”twitter-tweet”><p lang=”ja” dir=”ltr”>ブログ記事用のツイートです!</p>&mdash; 須藤毅 (@takeshi_sudooo) <a href=”https://twitter.com/takeshi_sudooo/status/12345678987654321?ref_src=twsrc%5Etfw”>January 16, 2021</a></blockquote> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

タイムラインを埋め込む方法

次はTwitterのタイムラインを埋め込む方法を解説します。

タイムラインの場合は、自分のアカウントしか表示することが出来ないので注意してください。

まずはご自身のアカウントでTwitterにログインします。

左側にあるメニューの中からプロフィールをクリックしてください。

プロフィールをクリック

プロフィール画面のURLをコピーしてください。

プロフィール画面のURLをコピー

次にTwitterPublishにアクセスします。
⇒TwitterPublish

赤枠内に先ほどコピーしたURLを張り付けて矢印ボタンかエンターキーを押してください。

URLを張り付けてエンター

URLを張り付けたら矢印をクリック

少し下の方にオプションを選択する箇所があるので、左側の【Embedded Timeline】をクリックしてください。

オプションを選択

オプションをクリックすると、その下に【set customization options.】と書かれたリンクをクリックしてください。

 set customization options.をクリック

ブログに表示させるタイムラインのサイズ・背景の明暗・言語を指定します。

タイムラインの設定

下にプレビューが表示されているので、これを参考にしてみてくださいね。

タイムラインプレビュー

問題なければ【Update】をクリックしましょう。

埋め込み用コードが表示されるので、【Copy Code】をクリックしてコピーしてください。

コードをコピーします

あとは任意の箇所にコードを張り付けて完了です。

このコードもビジュアルエディタではなく、テキストエディタに張り付けてくださいね!

ブロックエディタ(グーテンベルク)を利用した場合

これまではClassicエディタを利用していた場合の解説でしたが、ブロックエディタを利用した場合はSNS埋め込み用のブロックが用意されています。

ブロックエディタの埋め込みブロック

この埋め込み用ブロックを使用は、ツイートやタイムラインのURLを入力するだけで表示されるので簡単といえば簡単ですが、高さや幅などの指定が出来ない(CSSで指定したら出来ると思いますが)のが難点ですね。

なので、TwitterPublishを利用した埋め込みコードを活かしたい場合は、【カスタムHTML】ブロックを使ってみてください。

カスタムHTML

サイドバーやフッターエリアで表示する方法

次はサイドバーやフッターエリアなどにTwitterのツイートやタイムラインを埋め込む方法を解説します。

サイドバーやフッターエリアに埋め込む場合は、URLではなく【埋め込みコード】を利用しますので、まずは前述で解説したツイートやタイムラインの埋め込みコードを取得してください。

TwitterPublish埋め込み用コード

コードをコピーします

次はWordPressのメニュー【外観】⇒【ウィジェット】をクリックしてウィジェットメニューを出します。

左側にある【テキスト】ウィジェットをサイドバーやフッターエリアなどの任意のエリアに追加しましょう。

今回はサイトバーエリアに追加します。

テキストウィジェットを任意の箇所に追加

  1. テキストタブをクリックします。
  2. コピーした埋め込み用コードを張り付けます。
  3. 保存ボタンをクリックします。

コードを張り付け

THE THOR(ザ・トール)でTwitterのツイートやタイムラインを埋め込む方法のまとめ

まとめ

今回はTHE THOR(ザ・トール)…というかWordPressにTwitterのツイートやタイムラインを埋め込む方法を解説しました。

基本的には他のテーマでもやる事はあまり変わらないので、覚えておけばお役に立てると思います。

レビュー&特典

メルマガ登録バナー1

Twitterの埋め込み方法
最新情報をチェックしよう!