ブログ

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

【WordPress】 記事中やサイドバーにTwitterを 埋め込む方法を紹介!

今回は記事中やサイドバーにTwitterを埋め込む方法を紹介します!

 

現在Twitterブログの連携はブログを書いているほとんどの人が行っています。

 

その理由は、アップデートなどで順位が変わりその都度流入量が変わる検索からの流入と違いTwitterなどのSNSからの流入は安定するからです。

 

そのためにツイートするときにTwitterカードを使用してアピールしたり、ブログ内にTwitterを張り付けてフォロワーを増やしたりなどの方法がとられています。

 

Twitterカードの使用方法はこちらの記事で紹介しているので、今回は記事中やサイドバーにTwitterを埋め込む方法を紹介して行きます。

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

記事内にツイートを埋め込む方法は以下の2通りあります。

  • URLを使用
  • コードを使用

 

簡単にツイートを埋め込みたい人はURL、色や言語を変えたりリプを消したい人はコードの使用をおすすめします!

 

URLを使用してツイートを埋め込む方法

こちらはツイートのURLをコピー&ペーストするだけで埋め込むことができますが、リプライが表示されてしまいます

 

それでも気にならないという方はこちらで埋め込んでいきましょう!

 

埋め込みたいツイートを選択する

まずタイムラインから埋め込みたいツイートを選択します。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

 

ツイートのURLをコピーする

ツイート画面になったら上のほうにあるURLをコピーします。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

 

記事内に貼り付けつる

ツイートを埋め込みたいところに先ほどコピーしたURLを張り付ければ埋め込みは完成です。

 

 

このようにURLを使用した埋め込みは簡単に行うことができます。

 

コードを使用してツイートを埋め込む方法

こちらは一手間増えますが、背景色を白から黒に変えることができたり、言語が選択できたり、リプライを表示させないなどをできます。

 

埋め込みたいツイートを選択する

まずタイムラインから埋め込みたいツイートを選択します。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

 

ツイートのコードを取得する

ツイートの右上にあるをクリックして、ツイートを埋め込むを選択します。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

 

するとTwitter Publishというページへ移動します。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

特に変更しなくていい人は、Copy Codeをクリックします。

 

色、文字、リプライの表示をカスタマイズ

これをやらない方は正直、URLをコピー&ペーストの方が楽なのでこの方法でやっている方は基本的にここをいじると思います。

 

set customization optionsカスタマイズオプションを設定するというボタンがあるためクリックします。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

 

上から順に

  • 背景色:Light(白)orDark(黒)
  • 言語の選択
  • リプライを表示させるか否か

の選択をすることができます。

 

変更したらUpdateをクリックして、Copy Codeをクリックしてコードの取得は完了です。

 

記事内に貼り付けつる

先ほどコピーしたコードを張り付けるのですが、張り付ける際はテキストを選択してから張り付けてください。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

 

これでツイートを記事内に張り付ける紹介は終わります。

 

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

ここまでは特定のツイートを記事内に埋め込む方法を紹介してきましたが、ここからはトップページや記事中に右側に表示されているサイドバータイムラインを埋め込む方法を紹介します。

 

Twitter Publishにアクセスする

まずはTwitter Publishにアクセスします。

 

What would you like to embed?と聞かれますので下に自分のTwitterサイトのURLを張り付けます。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

自分のTwitterサイトのURLはTwitterのプロフィール画面のURLです!

 

Embedded Timelineを選択する

日本語表記だと埋め込みタイムラインになっていると思いますが、僕のPCではなぜかこのように表示されていました。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

どちらの表記でも左側のEmbedded Timelineを選択します。

 

カスタマイズ

set customization optionsカスタマイズオプションを設定するというボタンがあるためクリックします。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

 

ここでは3つの設定ができます。

  • タイムラインの表示サイズ
  • 背景色
  • 言語

 

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

この中で重要になってくるのがタイムラインの表示サイズです。

 

ここを変更せずにコードを取得してしまうととても長いタイムラインがサイドバーに出現してしまします。

 

僕はHeight(高さ)360px×Width(幅)360pxに設定しています。

 

サイドバーであれば縦横ともに300~400pxぐらいがいいかなと思ます。

 

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

 

設定が終わったらUpdateをクリックして、Copy Codeをクリックして終わりです。

 

ウィジェットにコードを張り付ける

外観ウィジェットをクリックします。

 

カスタムHTMLサイドバートップウィジットを追加の順にクリックしていきます。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

 

タイトルにはTwitterなどを入力して、内容には先ほどコピーしたコードを張り付けます。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

最後に確認してイメージ通りに埋め込まれていたら完了です!

 

サイズをちょっと変えたい

ここからはおまけですが、確認した後にサイズなど少し変えたい場合は外観カスタマイズから変更することをおすすめします。

 

今回の場合はウィジットサイドバートップ一番下のカスタムHTMLを選択します。

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介!

するとコードが表示されます。ここで data-width="360" data-height="360"の数字を変えると幅や高さがリアルタイムで変化するので好きなサイズを見つけやすいです!

 

変更が終わったら最後に公開を押し忘れないようにだけ注意してください!

【WordPress】 記事中やサイドバーにTwitterを 埋め込む方法を紹介!

【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介まとめ

今回は記事中やサイドバーにTwitterを埋め込む方法を紹介しました。

 

記事内は2通り、サイドバーは1通りのやり方を説明しましたがどちらも5分もあればできると思ます。

 

ブログとSNSは切っても切り離せない関係になっているとは思うので是非設定してみてください!

 

わからないことがありましたらTwitter、問い合わせをいただければいくらでもお答えしますのでご連絡よろしくお願いします!

 

では、また次の記事で会いましょう!!!

-ブログ

Copyright© kane blog , 2020 All Rights Reserved.