こんにちは、さこっしーです。
この記事では、Twitterの投稿をブログのサイドバーに埋め込む方法をご紹介していきます。
Cocoonでは、ウィジェットの編集画面でコードをコピペするだけなので、埋め込みがめちゃくちゃ簡単にできます。
この記事を読み終わったころには、あなたもツイートを埋め込むことがカンタンにできるようになっています。
Twitterをブログのサイドバーに埋め込む方法
![](https://sakossy.com/wp-content/uploads/2021/04/3d-illustration-design-of-twitter-phone-and-popping-up-icons.png)
Twitter Publishにアクセス
まず、下記のサイトにアクセスしましょう。
ブログにTwitterのタイムラインを挿入するためのコードを取得します。
Twitterのアドレスを入力
「何を埋め込みたいですか?」という画面が表示されます。
![](https://sakossy.com/wp-content/uploads/2021/04/8ef23944ae131db6d878c86c8e7dbb7c.png)
入力欄に「自分のTwitterのアドレスを入力」しましょう。
![](https://sakossy.com/wp-content/uploads/2021/04/860627c0f1484cc0a6f8f0bcb494c9b1.png)
Twitterのアドレスは「https://twitter.com/ツイッターアカウント」という表記になります。ツイッターアカウントについては、下記の画像を見てください。
僕の場合は「https://twitter.com/hekuchan612」になります。
![](https://sakossy.com/wp-content/uploads/2021/04/1f6477633100ad387c8d9f4a680995a5-1.png)
ツイッターアカウントを入力して「キーボードのエンター」か「入力欄右側の矢印」をクリックすると、下記のような画面に移動します。
表示オプションの選択
タイムラインの表示の選択画面になります。
左側の「埋め込まれたタイムライン」をクリックすると、コードが表示されます。
![](https://sakossy.com/wp-content/uploads/2021/04/3b0f158c809d78f5611dafd2a126684c.png)
コードの編集
下記のようにコードが表示されます。
![](https://sakossy.com/wp-content/uploads/2021/04/304f903ee5cb778a78b2cf6c98672343.png)
![](https://sakossy.com/wp-content/uploads/2021/04/304f903ee5cb778a78b2cf6c98672343-1.png)
下記のような画面が表示されます。この場合の「高さ」は「600」に設定しています。
あとでも変更できるので、高さを入力したら右下の「更新」をクリックしましょう。
![](https://sakossy.com/wp-content/uploads/2021/04/8539bdbd0d8c9ac6db0f3e66b9d9d5f4.png)
コードが変更されるので「コードをコピーする」をクリックして、コードをコピーしましょう。
![](https://sakossy.com/wp-content/uploads/2021/04/e67c0a64bd6305d2b6eaf9ea0d4c335d.png)
WordPressのウィジェット画面でコードを入力
WordPressの管理画面左メニューから「外観」→「ウィジェット」をクリックしましょう。
![](https://sakossy.com/wp-content/uploads/2021/04/bb2f8cf4b705928832c23613546d103f.png)
「ウィジェット」の中にある「カスタムHTML」をクリックしましょう。
![](https://sakossy.com/wp-content/uploads/2021/04/e88ddeecb81e30469c27acc3082a051d.png)
つぎに「サイドバー」を選択して「ウィジェットを追加」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/e099556b2a25cdfd9e29b141b6ce46fc.png)
すると、右側の表示されている「サイドバー」のメニューに「カスタムHTML」が追加されます。
![](https://sakossy.com/wp-content/uploads/2021/04/b8ef93e766bcfc5c18a183702766e0d3.png)
タイトルに「Twitter」と入力して、「内容」の中に先ほどのコードを貼りつけて「保存」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/8a1a620ddd01dcd6ccb8bf2949d0cad8.png)
これでブログのサイドバーに、Twitterのタイムラインが埋め込まれました。
Twitterの埋めこみ確認と高さの再調整
Twitterの埋めこみがちゃんとできていたら、下記のようになります。
![](https://sakossy.com/wp-content/uploads/2021/04/d7e07f59a65092dfe82edbba49b8affd.png)
ウィジェットの編集画面で、タイトルや表示する画面の長さを調整します。
![](https://sakossy.com/wp-content/uploads/2021/04/fbb8a742cbd9cda9ec7a18766401fdab.png)
下記のように、高さの数値「600」を「400」に変更して「保存」をクリックしてみます。
![](https://sakossy.com/wp-content/uploads/2021/04/e21663ffeeeff91a95845be5e77504fb.png)
すると、下記のように高さが調整されて表示されます。
![](https://sakossy.com/wp-content/uploads/2021/04/d59064fb2db6ce5e04a36b833aef83ac.png)
まとめ
今回は、Twitterの投稿をサイドバーに埋め込む方法をご紹介しました。
ブログ運営者は、ブログと並行してTwitterを使っている方も多いと思います。
ツイートをブログのサイドバーに追加すれば、ブログの新しいコンテンツとしていいのではないでしょうか。
また、ブログの記事を更新を頻繁にできていなくてもTwitterが更新されていれば、ブログ全体を新鮮に保つことができます。
さらに、ブログを見てくれた方がTwitterでフォロワーになってくれるかもしれません。
ということで、ブログにTwitterのタイムラインを追加することをオススメします。
今回は、以上となります。
最後まで読んでいただき、ありがとうございました。
コメント