Twitter Feed Proの動作を見る

WordPressにTwitterフィードを追加する方法

そこで、Custom Twitter Feeds Pro WordPressプラグインの概要を簡単に説明し、できることをいくつか紹介しよう。

Twitterアカウントとの接続

プラグインをインストールして、左のメニューからTwitter Feedsを選択します。プラグインのセットアップに必要なのは、TwitterからAccess TokenとSecretを取得することだけです。

ログインボタンをクリックするだけです。 

Twitterアカウントにログインし、プラグインがデータを読み取ることを許可すると、Twitterのアクセストークンとシークレットが返送されます。

また、Twitter開発者アプリを設定している場合は、このボックスにチェックを入れることで、自分のアプリの情報を使うことができます。

ツイッターフィードタイプの選択

あとは、どのようなツイートを表示するかを決めるだけだ。これでできるようになった： 

• スクリーンネームを入力するだけで、あらゆるTwitterアカウントのツイートを表示できます。 
• フィードを組み合わせたい場合は、1つ以上のTwitterアカウントを追加してください。
• ハッシュタグフィード表示1つのハッシュタグ、または複数のハッシュタグのフィードを表示します。

また、特定の条件と検索語に基づいてツイートを表示する検索を作成することもできます。

例えば、基本的な単語やフレーズ、メンションを使うこともできる。もっと具体的に、特定のフレーズと画像の両方を含むツイートだけを表示することもできる。

そして 利用可能な検索オプションの全リストはをご覧ください。

また、あなたのホームタイムラインからのツイートを表示するか、あなたについて言及しているツイートのみを表示するかを選択することもできます。 

異なるフィードタイプを1つのフィードにまとめたい場合、例えばユーザーのタイムラインとハッシュタグフィードを組み合わせたい場合は、こちらの指示に従ってください。

とりあえず、スマッシュ・バルーンのツイッターアカウントのひとつである スマッシュバルーンTwitterアカウント.

Twitterフィードのプレビュー

なので、すぐにフィードをカスタマイズすることもできるし、ここにあるカスタムTwitterフィードのショートコードを取得して、フィードを表示したい投稿、ページ、ウィジェットにコピー＆ペーストすることもできる。

ページを表示すると、ツイッターのフィードが表示されていることがわかります。フィードは1カラムで表示されます。 

しかし、カスタマイズの設定を見ていただくとわかるように、表示されるコンテンツの種類からレイアウト、すべての要素のスタイルに至るまで、フィードのあらゆる部分が完全にカスタマイズ可能です。 

ツイート内に複数の写真を表示することができ、リンクを共有すると、プラグインがそのURLのメタ情報を動的に取得し、ビジュアルなTwitterカードリンクを作成することがわかります。

また、写真やビデオをクリックすると、ポップアップ・ライトボックスが起動し、各項目をスクロールすることができる。 

HTML5ビデオをフルサポートし、YouTube、Vimeo、Vine、Soundcloudなどのサードパーティ・サービスもサポートしている。

各ライトボックスの下部には、さらに詳しい情報が表示されます。そして、そのツイートを様々なソーシャルメディアネットワークで共有したり、ツイッターで直接見ることもできる。

また、自分のサイトを離れることなく、そのツイートに返信したり、リツイートしたり、「いいね！」したりすることもできる。 

また、フィードは完全にレスポンシブなので、画面のサイズに適応します。タッチスクリーンにも対応しており、あらゆるモバイルデバイスでご利用いただけます。

プラグインの設定ページに戻れば、カスタマイズがいかに簡単かをお見せできるだろう。

ツイッターフィードのカスタマイズ

まず最初に、いくつかのユーザーアカウントを追加し、ツイート数を50に設定します。それから、カスタマイズ・ページに移動して、いくつか微調整してみる。

フィードの幅と高さをコントロールするための基本的な設定があります。これで 

• ツイートのどの部分を表示するかを選ぶ
• ヘッダーとload moreボタンを表示するかどうかを選択します。
• ツイートを回転カルーセルで表示する
• カルーセルの列数を他のカスタマイズオプションと一緒に選択します。 
• フィードを複数のカラムで表示し、デスクトップまたはモバイルデバイスで使用するカラム数を選択します。
• フィードの一番下までスクロールすると、さらにツイートが自動ロードされるように選択。

フィードのツイートをフィルタリングすることもできる。つまり、特定の単語やハッシュタグを含むツイートだけを表示したり、特定の単語やハッシュタグを含むツイートを削除したりすることができる。

これにより、表示されるツイートをより細かくコントロールできるようになり、特定の単語やハッシュタグ、フレーズをブロックするために、フィードを事前に自動的に調整することができる。

また、必要に応じてフィード内の特定のツイートを非表示にすることもできますし、独自のカスタムCSSやJavaScriptのためのセクションも用意されています。

スタイルタブに移動すると、フィードのさまざまな部分をスタイル設定するためのオプションがあります。以下のことができます： 

• 背景色の設定
• ヘッダーをカスタマイズし、使用するカスタムテキストを設定する。
• 内蔵オプションの1つを選択して、日付を完全にフォーマットします。
• 独自の日付書式を使用する
• 日付で使われている文字列を翻訳する。
• ツイート作成者とツイートテキストをカスタマイズする
• プラグインが使用するテキスト文字列を翻訳します。
• ツイート内のリンクを無効にする
• ツイートのテキスト全体をTwitterの投稿にリンクする。
• 各投稿の下にある返信、リツイート、いいね！オプションのスタイル
• ツイッターのリンクに使用するテキストを変更する
• 詳細読み込みボタンで使用する色を選択する
• ボタンのテキストを変更または翻訳する

変更を保存してフィードを表示すると、カスタマイズが適用されていることがわかります。 

というわけで、3つのツイッター・アカウントのツイートを3列のメイソン・レイアウトで表示しています。 

そして、下にスクロールしていくと、フィードの一番下まで到達したときに、より多くのツイートが自動的に読み込まれるのがわかるだろう。 

さらに、メーソンリーレイアウトは完全にレスポンシブで、モバイルデバイスでは1カラムに変化する。

カスタム・ショートコードを使う

プラグインのもう一つの大きな特徴は、複数の異なるフィードを同じページまたはサイト全体に表示し、それぞれのフィードに独自の設定を適用できることです。

デフォルトでは、フィードはプラグインのconfigure、customize、styleタブの設定を使用します。しかし、プラグインの便利なショートコードオプションを使用することで、これらの設定を上書きすることができます。

また、ショートコードに直接設定を追加するだけで、特定のフィードの設定を上書きすることができます。 

WordPressのウィジェットページに移動して、組み込みの カスタムTwitterフィードウィジェットデフォルトのショートコードが自動的に追加されます。デフォルトでは、プラグインの設定ページからの設定が表示されますが、ショートコードのオプションを使って、これらの設定を上書きすることができます。

用意したショートコードを貼り付けます：

• スクリーンネーム "Twins "とハッシュタグ "#MNTwins "の両方のツイートを同じフィードに表示する。
• ツイート数を5に設定
• 石積み柱のレイアウトを無効化
• カルーセルと自動再生の設定を有効にする
• ヘッダーの表示に選択
• メディアとツイッターカードを除外
• 背景色を薄いグレーにする。

そして2つ目のフィードを追加する： 

• 検索パラメーターを使って、"sunset "という単語を含むツイートだけを表示する。
• 写真や動画などのメディアを含むツイートだけを表示する。
• 石積みのレイアウトを再び無効にする
• ヘッダーテキストを "Sunsets "とする。
• 高さを400ピクセルに設定
• ツイート数を5とする。

もう一度ページを表示すると、2つの新しいフィードが追加されていることがわかる。一番上のフィードには、「ツインズ」アカウントとハッシュタグ「#MNTwins」の両方からのツイートのカルーセルが表示されている。 

最後にツイートをスクロールして読み込めばいいだけだ。そして、メディアとツイッターカードを除いて、薄いグレーの背景色になっている。 

2つ目のフィードは、"sunset "という単語を含むツイートで、画像または動画も含まれています。ご覧のように、フィードには400ピクセルの高さが追加されているので、スクロールバーが自動的に追加されています。 

下までスクロールすると、さらに多くのツイートが自動的に読み込まれているのがわかる。

これで、このプラグインがいかに多機能でカスタマイズが可能か、また、このプラグインでできることのいくつかがおわかりいただけたと思う。

ご自分のスクリーンネーム、ハッシュタグ、検索キーワードを ウェブサイトのデモ.

ご不明な点がございましたら、ウェブサイトからお問い合わせください、 フェイスブックページまたはTwitterの@SmashBalloonまでご連絡ください。