Twitterのウィジェットを自分のブログに設置する方法がわかるよ。
![うちやま](https://buildingblock.jp/blog/wp-content/uploads/2020/09/uchiyama-gundam-150x150.jpg)
すごく簡単だよ。
Twitterのウィジェットを埋め込み、設置する方法
1、https://publish.twitter.com/に移動する
![https://publish.twitter.com/](https://buildingblock.jp/blog/wp-content/uploads/2020/09/1-13-1024x726.png)
2、検索窓に自分のTwitterのURLを記入
![自分のTwitterのURLを記入](https://buildingblock.jp/blog/wp-content/uploads/2020/09/2-14-1024x726.png)
僕の場合は「https://twitter.com/udy_t」と記入しました。
記入したら「→(矢印)」をクリック。
3、埋め込みたいタイムラインまたはTwitterボタンを選択
![埋め込み仕様の選択画面](https://buildingblock.jp/blog/wp-content/uploads/2020/09/3-12-1024x726.png)
今回は「埋め込みタイムライン」を埋め込む体で進めます。
4、埋め込みのURLをコピー
![Copy Code](https://buildingblock.jp/blog/wp-content/uploads/2020/09/4-13-1024x726.png)
「コードをコピー(Copy Code)」をクリック。
![コピー完了](https://buildingblock.jp/blog/wp-content/uploads/2020/09/5-13.png)
コピーが完了しました。
ブラウザがChromeで自動翻訳を使っている場合、日本語訳だとコピー機能がエラーになりやすいです。(画面が真っ白になる)そんなときは翻訳を原文の「英語」にしてやり直すと上手くいきます。
5、ワードプレスに埋め込む
![カスタムHTMLのウィジェット](https://buildingblock.jp/blog/wp-content/uploads/2020/09/6-13-1024x474.png)
ダッシュボードより 外観>ウィジェット をクリック。
「利用できるウィジェット」のエリアから「カスタムHTML」(もしくは「テキスト」でも可)をサイドバーに設けます。
![カスタムHTMLに埋め込みする画像](https://buildingblock.jp/blog/wp-content/uploads/2020/09/7-12-1024x474.png)
「4、埋め込みのURLをコピー」でコピーしたURLを埋め込み、タイトルを設定(今回は「タイムライン」にしました。)「保存」をクリック。
![サイドバーの見え方](https://buildingblock.jp/blog/wp-content/uploads/2020/09/8-12.png)
こんな感じになります。
![埋め込まれた画像例](https://buildingblock.jp/blog/wp-content/uploads/2020/09/9-11-1024x682.png)
実際のサイトで見るとこんな感じ。
初期設定のままだと「はみ出る」ので注意!
![Twitterのウィジェットがはみ出ている画像](https://buildingblock.jp/blog/wp-content/uploads/2020/09/10-9-1024x668.png)
はみ出しちゃった。汗
デフォルトの設定ってめちゃくちゃ長いです。汗
よって、自分のサイトにマッチした長さに変更しましょう。
Twitterのウィジェットをカスタマイズする手順
![set customization options](https://buildingblock.jp/blog/wp-content/uploads/2020/09/11-8-1024x726.png)
「set customization options」をクリック。
![Twitterのウィジェットをカスタマイズする画面](https://buildingblock.jp/blog/wp-content/uploads/2020/09/12-8-1024x726.png)
こちらの表示切り替わったらカスタマイズが可能になります。
「What size would you like your timeline to be?」の箇所
Height(px) | タイムラインの高さ |
Width(px) | タイムラインの幅 |
![How would you like this to look?](https://buildingblock.jp/blog/wp-content/uploads/2020/09/13-8.png)
「How would you like this to look?」の箇所
タイムラインのテーマ色が指定できます。
Light | 明るいデザイン |
Dark | 暗めのシックなデザイン |
![What language would you like to display this in?](https://buildingblock.jp/blog/wp-content/uploads/2020/09/14-6.png)
「What language would you like to display this in?」の箇所
言語指定が出来ます。
![](https://buildingblock.jp/blog/wp-content/uploads/2020/09/15-5-1024x726.png)
僕は縦幅を300pxにしてそれ以外はデフォルトにしました。
![うちやま](https://buildingblock.jp/blog/wp-content/uploads/2020/09/uchiyama-gundam-150x150.jpg)
好みやご自身のブログに合わせてサイズを調整してください。
設定したら「更新」をクリック。
![Copy Code](https://buildingblock.jp/blog/wp-content/uploads/2020/09/16-5-1024x726.png)
「コードをコピー(Copy Code)」をクリック。
![コピー完了](https://buildingblock.jp/blog/wp-content/uploads/2020/09/17-5.png)
コピーされました。
![カスタムHTMLにカスタマイズしたタグを埋め込む画像](https://buildingblock.jp/blog/wp-content/uploads/2020/09/18-4-1024x474.png)
「5、ワードプレスに埋め込む」のやり方通り、ダッシュボードより 外観>ウィジェット をクリックして「カスタムHTML」(もしくは「テキスト」でも可)にコピーしたタグを埋め込んで「保存」をクリック。
![カスタマイズしたウィジェットが埋め込まれた画像](https://buildingblock.jp/blog/wp-content/uploads/2020/09/19-4-1024x474.png)
カスタマイズしたウィジェットが埋め込まれ、
![ウィジェットがはみ出てない画像](https://buildingblock.jp/blog/wp-content/uploads/2020/09/20-3-1024x689.png)
はみ出さずに調整できました。
以上で設定完了です。
【補足】表示されない時は
上手く表示されないときは設定後に少し時間をおいてください。それだけで解消することがあります。
また、作成したばかりのTwitterアカウントや名前などを変えたアカウントだとすぐにウィジェットに表示されないこともあります。
Twitterのウィジェットは重いです
![重さを表現する画像](https://buildingblock.jp/blog/wp-content/uploads/2020/09/dumbbell-1024x682.jpg)
ここでいう「重い」というのはサイトの読み込み速度のことです。読み込み速度が遅いと「重い」などと言われます。
読み込みが遅いよりも早い方がユーザビリティ的には良いので、気になる方は無理にTwitterのウィジェットを埋め込む必要はありません。
どうしても早くしたい場合はサイトの読み込み速度を速める対策を行いましょう。
【次回予告】サイトの読み込みを早める方法
運用方針次第です
また、最終的には重さを加味した上でもウィジェットを埋め込むべきか?というご自身のサイト運用の方向性の問題になります。
弊社のブログは僕自身の人となり(キャラクター)が少しでもわかってくれたらいいなぁ、と思って運用しているので意図的にウィジェットを埋め込んでいます。
![うちやま](https://buildingblock.jp/blog/wp-content/uploads/2020/09/uchiyama-gundam-150x150.jpg)
読み込み速度が多少落ちても、それ以上に「自分を知ってもらう」を優先している、ということです。
埋め込んだ方が良い・悪い、は運用方針次第なので、ご自身の目的に合わせてご判断ください。
![うちやま](https://buildingblock.jp/blog/wp-content/uploads/2020/09/uchiyama-gundam-150x150.jpg)
以上、簡単に出来るので試してみてね。