今回は記事中やサイドバーにTwitterを埋め込む方法を紹介します！
現在Twitterとブログの連携はブログを書いているほとんどの人が行っています。
その理由は、アップデートなどで順位が変わりその都度流入量が変わる検索からの流入と違いTwitterなどのSNSからの流入は安定するからです。
そのためにツイートするときにTwitterカードを使用してアピールしたり、ブログ内にTwitterを張り付けてフォロワーを増やしたりなどの方法がとられています。
Twitterカードの使用方法はこちらの記事で紹介しているので、今回は記事中やサイドバーにTwitterを埋め込む方法を紹介して行きます。
もくじ
記事内にツイートを埋め込む方法
記事内にツイートを埋め込む方法は以下の２通りあります。
- URLを使用
- コードを使用
簡単にツイートを埋め込みたい人はURL、色や言語を変えたりリプを消したい人はコードの使用をおすすめします！
URLを使用してツイートを埋め込む方法
こちらはツイートのURLをコピー＆ペーストするだけで埋め込むことができますが、リプライが表示されてしまいます。
それでも気にならないという方はこちらで埋め込んでいきましょう！
埋め込みたいツイートを選択する
まずタイムラインから埋め込みたいツイートを選択します。
ツイートのURLをコピーする
ツイート画面になったら上のほうにあるURLをコピーします。
記事内に貼り付けつる
ツイートを埋め込みたいところに先ほどコピーしたURLを張り付ければ埋め込みは完成です。
バイクに興味がある方もない方もモトブロガーを見たことがない方はまずこちらの方達から見ることをおすすめします！@NonAlcoholRider @wokarider @KatsuoRacing @pc40cbr600rr123 #バイク好きと繋がりたい#モトブロガー#ブログ書け#ブログ初心者#ブログ仲間募集中https://t.co/opnF5nkyRH
— ケイン🏥理学療法士・ブログ8ヶ月目 (@kane_blog) May 26, 2020
このようにURLを使用した埋め込みは簡単に行うことができます。
コードを使用してツイートを埋め込む方法
こちらは一手間増えますが、背景色を白から黒に変えることができたり、言語が選択できたり、リプライを表示させないなどをできます。
埋め込みたいツイートを選択する
まずタイムラインから埋め込みたいツイートを選択します。
ツイートのコードを取得する
ツイートの右上にあるｖをクリックして、ツイートを埋め込むを選択します。
するとTwitter Publishというページへ移動します。
特に変更しなくていい人は、Copy Codeをクリックします。
色、文字、リプライの表示をカスタマイズ
これをやらない方は正直、URLをコピー＆ペーストの方が楽なのでこの方法でやっている方は基本的にここをいじると思います。
set customization optionsかカスタマイズオプションを設定するというボタンがあるためクリックします。
上から順に
- 背景色：Light（白）orDark（黒）
- 言語の選択
- リプライを表示させるか否か
の選択をすることができます。
変更したらUpdateをクリックして、Copy Codeをクリックしてコードの取得は完了です。
記事内に貼り付けつる
先ほどコピーしたコードを張り付けるのですが、張り付ける際はテキストを選択してから張り付けてください。
これでツイートを記事内に張り付ける紹介は終わります。
サイドバーにタイムラインを埋め込む方法
ここまでは特定のツイートを記事内に埋め込む方法を紹介してきましたが、ここからはトップページや記事中に右側に表示されているサイドバーへタイムラインを埋め込む方法を紹介します。
Twitter Publishにアクセスする
まずはTwitter Publishにアクセスします。
What would you like to embed?と聞かれますので下に自分のTwitterサイトのURLを張り付けます。
自分のTwitterサイトのURLはTwitterのプロフィール画面のURLです！
Embedded Timelineを選択する
日本語表記だと埋め込みタイムラインになっていると思いますが、僕のPCではなぜかこのように表示されていました。
どちらの表記でも左側のEmbedded Timelineを選択します。
カスタマイズ
set customization optionsかカスタマイズオプションを設定するというボタンがあるためクリックします。
ここでは３つの設定ができます。
- タイムラインの表示サイズ
- 背景色
- 言語
この中で重要になってくるのがタイムラインの表示サイズです。
ここを変更せずにコードを取得してしまうととても長いタイムラインがサイドバーに出現してしまします。
僕はHeight（高さ）360px×Width（幅）360pxに設定しています。
サイドバーであれば縦横ともに300～400pxぐらいがいいかなと思ます。
設定が終わったらUpdateをクリックして、Copy Codeをクリックして終わりです。
ウィジェットにコードを張り付ける
外観→ウィジェットをクリックします。
カスタムHTML→サイドバートップ→ウィジットを追加の順にクリックしていきます。
タイトルにはTwitterなどを入力して、内容には先ほどコピーしたコードを張り付けます。
最後に確認してイメージ通りに埋め込まれていたら完了です！
サイズをちょっと変えたい
ここからはおまけですが、確認した後にサイズなど少し変えたい場合は外観→カスタマイズから変更することをおすすめします。
今回の場合はウィジット→サイドバートップ→一番下のカスタムHTMLを選択します。
するとコードが表示されます。ここで data-width="360" data-height="360"の数字を変えると幅や高さがリアルタイムで変化するので好きなサイズを見つけやすいです！
変更が終わったら最後に公開を押し忘れないようにだけ注意してください！
【WordPress】記事中やサイドバーにTwitterを埋め込む方法を紹介まとめ
今回は記事中やサイドバーにTwitterを埋め込む方法を紹介しました。
記事内は2通り、サイドバーは1通りのやり方を説明しましたがどちらも5分もあればできると思ます。
ブログとSNSは切っても切り離せない関係になっているとは思うので是非設定してみてください！
わからないことがありましたらTwitter、問い合わせをいただければいくらでもお答えしますのでご連絡よろしくお願いします！
では、また次の記事で会いましょう！！！