みなさん、こんにちは!!
管理人のピーディー( @PD_bloger ) です。
ブログに記事を書いていると、Twitter もいっしょに入れて、もっと情報を配信したい!と思ったりしませんか??
WordPress に Twitter を埋め込む方法って、実はすごく簡単なんです。
場所、サイズも自由にカスタマイズできます!
フォローボタンもくっつけることもできます!
変なプラグインも不要です!
では、解説スタート!
スポンサーリンク
Twitter を埋め込む
埋め込みコードをコピーする
まずは Twitter にログインしてください。
![](https://pd-afiblog.com/wp-content/uploads/2018/09/1-1.jpg)
ログインすると、画面右上にあるプロフィールアイコンをクリックします。
メニューが開くので、「設定とプライバシー」を選択しましょう。
![](https://pd-afiblog.com/wp-content/uploads/2018/09/4-1-600x254.jpg)
まず「ユーザー情報」を開きます。
ユーザー名のすぐ下にある URL をコピーします。
こちらは後ほど別画面に貼り付けをします。
![](https://pd-afiblog.com/wp-content/uploads/2018/09/2-1.jpg)
次は「ウィジェット」をクリックしましょう。
![](https://pd-afiblog.com/wp-content/uploads/2018/09/3-1.jpg)
赤枠「publish.twitter.com」をクリックします。
現在開いている画面から別のページに切り替わります。
![](https://pd-afiblog.com/wp-content/uploads/2018/09/5-1-600x456.jpg)
『Twitter』を共有・埋め込みするための「Twitter Publish」というページが表示されます。
Twitter をブログに埋め込むには「Embedded Timeline(タイムラインに埋め込む)」を選択します。
![](https://pd-afiblog.com/wp-content/uploads/2018/09/6-1.jpg)
先ほどコピーした「ユーザー情報」を入力する画面に切り替わります。
そのまま URL を貼り付け、「Preview」を選択します。
![](https://pd-afiblog.com/wp-content/uploads/2018/09/7-600x568.jpg)
下へスクロールするとプレビューが表示されます。
ブログに埋め込みするためのサイズ調整をしたい場合は「set customization options」をクリックします。
![](https://pd-afiblog.com/wp-content/uploads/2018/09/8.jpg)
数値を入力する欄が 2 つ表示されます。
『左側が高さ』『右側が幅』になります。
ぼくは「高さ:550」「幅:400」くらいがシックリきました。
お好みで調整してくださいませ。
調整完了したら「update」を押し、画面が切り替わったら「Copy Code」をクリックします。
![](https://pd-afiblog.com/wp-content/uploads/2018/09/9.jpg)
Twitter をブログに埋め込むためのコードをコピーできました。
次は、ダッシュボード画面からコードを貼り付ける作業に移ります。
埋め込みコードをウィジェットに貼り付ける
ダッシュボード画面を開きます。
「外観」>「ウィジェット」で操作設定をしていきます。
![](https://pd-afiblog.com/wp-content/uploads/2018/09/10.jpg)
Twitter のコードを埋め込みたいので「カスタム HTML」を選択します。
次に埋め込みたい場所を選びます。
この解説では「メインサイドバー」にしました。
※ 「フッター」に設定するのも見栄えが良いかもですね。
内容欄にコピーした Twitter コードを貼り付けます。
タイトル欄に「Twitter」「ツイッター」など入れておくと見栄えがよくなるでしょう。
ブログ表示すると「タイトル」「ツイート」が表示されるようになります。
フォローボタンを埋め込む
ブログに Twitter を埋め込むまではできたけど、せっかく見てもらうなら「フォロー」もしてほしいですよね?!
フォローボタンも埋め込んでしまいましょう!
埋め込みコードをコピーする
Twitter 埋め込み設定のページ「Twitter Publish 」を開きます。
選択する項目は「Twitter Buttons」です。
いろいろボタンの種類があるのですが、「フォロー」ボタンなので、「Follow」を選びましょう!
先ほどの Twitter 埋め込みと同じくユーザー情報(ユーザー名すぐ下のリンク)をコピー貼り付けします。
「フォロー」ボタンも大きさをカスタマイズすることができます。
「set customization options」をクリックします。
「Hide Username」は「フォロー」ボタンのすぐ後ろのユーザー名を非表示(「フォローする」のみ表示する)にできます。
「Large Button」は「フォロー」ボタンを(少し)大きくできます。w
設定変更ができたら「Update」を押し、「Copy Code」でコードをコピーします。
埋め込みコードをウィジェットに貼り付ける
コピーしたコードを貼り付けます。
ダッシュボード画面から、ウィジェットを開きます。
先ほど、「Twitter(ツイート)」のコードを貼り付けした「カスタム HTML」を開きます。
「Twitter」のコードの下に、「フォロー」ボタンのコードを貼り付けます。
ブログを表示すると、ウィジェットに設定した通り「タイトル」「ツイート」「フォロー」が順に並んでいます。
余談ですが、「フォロー」ボタンの位置を「左」「中央」「右」にずらすこともできます。
「フォロー」ボタンのコードの頭に
<div align=center>
</div>
2 つ位置を調整するコードを入れてあげるとボタンを動かすことができます。
ちなみに、「center」を「right」にすると右側に行きます。
これはあくまで補足です。
見栄えは、、、微妙ですかね^^;
お好みな方を選んでください!
まとめ
Twitter の埋め込みはすごく簡単です。
ちょっとコードを貼り付けたり、英語のページがあったりして難しそうに感じますが、基本コピペです。
どこに配置するかは「ウィジェット」から簡単に変更できます。
プラグインを使用するのもよいですが、最近はセキュリティ脆弱性の問題などもあります。
不要なプラグインはできるだけ使用しない方針でブログ運営したいですね。
Twitter の基本機能の一部なのでぜひ活用してみてください。