
今回の記事では、プラグインなしでワードプレスサイトへのツイッターヴィジェットの埋め込み方法を紹介します。
- ツイッターをサイドバー等に埋め込むことで、ツイッターのフォロワー数を増やす機会を増やすだけでなく、サイト自体が華やかにもなります
- ツイッターヴィジェットの設置はプラグインなしでも簡単に設置可能です
WEBMAGAZINE「GOKUI」の運用を開始して約3か月が経過し、徐々にサイトの内容が充実してきましたので、この辺りでそろそろSNSとの連携を進めていこうと思います。
連携を考えているSNSは「Instagram(インスタグラム)」「Twitter(ツイッター)」「Facebook(フェイスブック)」の3つですが、前回「Instagram (インスタグラム)」をサイドバーに埋め込んでみたので、続いてTwitter(ツイッター)を埋め込んでみます。
Instagram (インスタグラム)は「Smash Balloon Social Photo Feed」というプラグインを使いましたが、 Twitter(ツイッター) はプラグインなしで設置が出来てしまいます。
では早速進めていきましょう。
1)まずはTwitterにログインして「アカウント名」と「パスワード」を確認しておきます。

2)次にhttps://publish.twitter.com/に移動します。

3)中央にある入力枠のプルダウンから「https://twitter.com/TwitterDev」を選択します。

4)「TwitterDev」の部分を、アカウント名から@を抜いたもの(僕の場合はアカウント名が@naita114なのでnaita114)に書き換えます。

5)表示方法の選択画面に映るので、左側(Twitterのタイムライン表示)を選ぶと、 カスタマイズオプションを促す文章とワードプレスに貼り付けるコードが表示されます。
作成されたコードをこのまま使用しても良いのですが、この段階で一旦カスタマイズオプションをクリックして「表示サイズ」と「背景色」を設定しておきましょう。

6)カスタマイズオプションをクリックするとこのような画面が表示されます。
表示サイズは、僕の場合サイドバーに表示したいので幅300pix×高さ450pixとしました。
背景色はサイトのデザインに合わせて「Light(白色)」or「Dark(黒色)」が選べます。
(このあたりの設定は、後でコードを直接書き換えて設定し直すこともできます。 )
設定が終わったら「Update」をクリックします。

7)「表示サイズ」と「背景色」が設定されたコードが再作成されました。
「Copy Code」をクリックして作成されたコードをコピーしておきます。

8)あとは、コピーしたコードをサイト内の任意の場所(設置したい場所)に貼り付ければ設置完了です。
僕の場合はサイドバーに設置したいので、ワードプレスの管理画面から外観>ヴィジェットに進み、サイドバーヴィジェットにテキストで貼り付けました。

以上で設置完了です。
設置したサイトを開いて確認してみて下さい。