この記事の目次
プラグインをセットアップ
使用するプラグインはSmash BalloonのCustom Twitter Feedsです。
Smash Balloonではほかにも、FacebookやInstagramのフィードを表示するプラグインをリリースしていて、人気も高いようです。
Custom Twitter Feedプラグイン
プラグインの設定を開くと、"Configure”タブが現われます。
5つのタブがありますが、最低このタブだけ設定すれば利用可能です。
Twitterと連携させる
Twitterとの連携を承認する
Configurationタブの青いボタンをクリックすると、Twitterのページに切り替わってアカウント承認画面が表示されます。
すでにPC上でTwitterアカウントにログインしておくとスムーズに作業が進みます。
［連携アプリを認証］ボタンをクリックします。
Twitterとプラグインの連携を承認
承認が終わり、プラグイン設定画面に戻ると、Access TokenとAccess Token Secretのふたつと、Feed Typeに設定が書き込まれています。
このうちFeed Typeは”User Timeline”が選択され、連携したTwitterのユーザー名が入ります。
トークンが自動的に設定される
これで最低限の設定は終わり。
ショートコードを記述する
”Display Your Feed”タブに切り替えて、先頭にあるショートコードをコピーします。
ショートコードをコピーする
下のほうにあるテーブルには、いろいろなオプションを使う場合のショートコードが書かれています。
固定ページをElementorで開き、HTML要素をページ上に配置して、先ほどのショートコードをペーストします。
Elementorの画面でショートコードをペースト
ページをプレビューすると、無事タイムラインが表示されました。
プレビューで表示を確認
表示サイズの調整
”Configure”タブの初期設定では、フィードの表示数が5になっています。
このままだと5件分のツイートすべて表示するのですが、ツィートによってそのつど文字量が違うので、すべてを表示していたら、Webページのレイアウトに合わないことが多いでしょう。
そこで設定画面の”Customize”タブに切り替えて、フィードの幅と高さを指定します。
初期設定では、Widthが100%、Heightのほうは空欄です。
ここでは高さを500pxに設定してみました。
高さを500pxにしてみた
ちなみに、その下のはフィードのレイアウトオプションがありますが、無料版で使えるのはふつうのリスト形式だけです。
再びプレビューを見ると、高さが制限された代わりにスクロールバーが表示されています。
高さを制限したことでスクロールバーが出現
その他のオプション
Generalタブ
”General”タブではTwitterとの連携やタイムラインの表示数のほかに、タイムラインの更新頻度を指定できます。
初期設定では3時間です。
Customizeタブ
Show/Hideオプションでは、ツィートに関する表示を細かく指定できます。
アバターやツイッターロゴなどの画像、Likeやリツイートなどのボタンなどを非表示化できるようです。
また”Show Header”でヘッダを非表示化できます。
Customizeタブのオプション
Styleタブ
ツィート部分やヘッダ部分の背景色などを指定したり、ヘッダ用のテキストを登録できます。
Styleオプションのカラー指定
さらに細かい指定として、日付の書式、投稿者名やツイート本文などのテキストサイズ／文字色を指定したり、リンクを無効化することができます。
リンクやアイコンなどもカスタマイズできる
ショートコードは？
これらのオプションを変更しても、設置したショートコードはそのままでいいようです。
”Display Your Feed”タブには標準以外のショートコードがたくさん書かれていますが、より細かい設定が可能ということでしょうか・・・
機能は豊富だがあえて使うまでもない？
ただし、前回紹介した、パブリッシュしたコードを貼り付ける方法に比べると、なにかややこしいなという印象があります。
設定画面が日本語化されていないのもその一因でしょう。
ふつうにフィードを表示するだけだったら、あえてこのプラグインを使うまでもないかという印象を受けました。