商品画像を待っています

Flow-Flow

商品コード: flow-flow カテゴリー:

WordPressサイトに、SNSの投稿を表示できたら便利ですよね。

プラグインを使用することで、簡単にSNSのフィードを表示することができます。

Flow-Flowは複数のSNS、複数のアカウントを一緒にフィードに表示させることができるので、とても便利ですよ！

カスタマイズも簡単で、オリジナリティのあるSNSフィードをサイトに作成できます。

ソーシャルの投稿やタイムラインをサイトに表示

Flow-Flowでは、TwitterやInstagramなどのSNSの投稿やタイムラインをWordPressサイトに表示させることができます。

表示の方法は簡単で、設定を行なったら任意の投稿やページにショートコードを貼るだけです。

 

複数のソーシャルアカウントを合わせて表示

Flow-Flowが他のSNSフィードプラグインと違うところは、複数のSNSアカウントを合わせて表示できる点です。

例えばInstagramユーザーを5人分、5つのFacebookページなどをまとめてフィードに表示させられます。

Twitter、Facebook、Instagram、YouTubeなど14ものSNSに対応しています。

 

フィードのデザインを自由にカスタマイズ

Flow-Flowでは、SNSフィードのカスタマイズも簡単にできます。

色の設定やグリッド表示の設定など、感覚的に簡単に行うことができるのが嬉しいところです。

CSS表記もできるので、より細かく自由にデザインを変更することができます。

Flow-Flowでは複数のSNSのフィードを合わせて表示させることができます。

TwitterやFacebookなどSNSを複数やっている方はとても便利なプラグインですよね。

また、カスタマイズも簡単で自由度が高いので、オリジナリティのあるSNSフィードをWordPressサイトに設置することができます。

Flow-Flowの使い方

ソーシャルアカウントの連携

Flow-Flowを使用するには、まずSNSとの連携が必要になります。

それぞれのSNSとの連携方法を解説します。

Facebook/Instagram

  1. ダッシュボードから [Flow Flow] をクリックします。FlowFlowの設定画面が開くので [認証] タブをクリックします。
  2. 「FacebookとInstagramの統合」セクションの [接続] をクリックします。
  3. Facebookへのログインが求められるので [・・・としてログイン] をクリックします。
  4. Instagramのビジネスまたはクリエイターアカウントを選択し、チェックを入れたら [次へ] をクリックします。
  5. FlowFlowがアクセスできるページを選択、チェックを入れたら [次へ] をクリックします。
  6. FlowFlowに許可するアクセスを選択、チェックを入れたら [完了] をクリックします。
  7. 以上でFlowFlowとFacebookのリンクが完了です。 [OK] をクリックします。

FlowFlowにInstagramをリンクさせるにはInstagramのビジネスアカウントかクリエイターアカウントが必要です。

ビジネスアカウントとクリエイターアカウントの作成方法は以下の公式サイトを参考にしてみてください。

ビジネスアカウントの作成方法
https://help.instagram.com/502981923235522

クリエイターアカウントの作成方法
https://help.instagram.com/2358103564437429

Twitter

Twitterで認証するには、Twitterアプリケーションを作成し、アクセストークンとAPIキーを取得する必要があります。

  1. https://developer.twitter.com/にアクセスします。
  2. Twitterデベロッパーで [サインアップ] をクリックし、自分のTwiterアカウントでログインします。
  3. Twitter開発者アカウントの申請を行います。[Apply for a developer account] をクリックします。
  4. TwitterAPIの使用方法を選択してください。
  5. Twitter APIやTwitterのデータをどのように使用するかを入力します。英語入力ですが、翻訳サイトで翻訳したもので構いません。
  6. 「Are you planning to analyze Twitter data?」では、Twitterのデータを分析する必要があるかを記載します。必要がなければ、[NO] にしておきます。
  7. 申請が完了すると「Verify your Twitter Developer Account」という件名のメールが届くので、内容を確認して、メール本文の[Confirm your email] ボタンをクリックします。ここから審査が開始されます。審査に通るとメールが届くので、以下の手順に進みます。（審査には数日かかることもあります。）
  8. Twitterデベロッパーで新規アプリを作成します。
  9. 「API Key」と [API Key Secret] をコピーしておきます。
  10. [Projects & Apps] > [先ほど作ったアプリ名] >[Keys & tokens] > 「Access Token and Secret」セクションの [Generte] をクリックします。
  11. 「AccessToken and Secret」の [Regenerate] をクリックします。
  12. 「Access Token」と「AccessTokenSecret」をコピーしておきます。[Yes,Isaved them] をクリックします。
  13. WordPressのダッシュボードから [FlowFlow] > [認証] > 「Twitternの統合」セクションで先ほどコピーした「APIキー」「APIシークレット」「アクセストークン」「アクセストークンシークレット」をそれぞれペーストします。[変更内容を保存] をクリックします。

以上でTwitterの設定は完了です。

Youtube

  1. Google DevelopersConsoleにアクセスし、googleアカウントでログインします。
  2. [APIとサービス] をクリックします。
  3. [プロジェクトを作成] をクリックします。
  4. プロジェクト名を決めて [作成] をクリックします。
  5. [APIとサービスの有効化] をクリックします。
  6. [YouTubeDateAPI] をクリックし、開いたページの [有効にする] をクリックします。
  7. [認証情報] > [認証情報を作成] > [APIキー] をクリックします。
  8. APIキーをコピーします。
  9. WordPressのダッシュボードから [FlowFlow] > [認証] をクリックし、「GoogleとYouYubeの統合」の「APIキー」の欄に先ほどコピーしたAPIキーを貼り付け [変更内容を保存] をクリックします。

これでYouTubeとの連携ができました。

ソーシャルフィードの設置方法

WordPressサイトにソーシャルフィードを設置する方法を解説します。

  1. WordPress管理画面のダッシュボードから [FlowFlow] > [フィード] > [フィードを作成する] をクリックします。
  2. フィードを作成するSNSマークをクリックします。
  3. ここではInstagramを選択しました。各項目を設定したら [フィードを作成する] をクリックします。
  4. [ストリーム] タブを開きます。[ストリーム] をクリックします。
  5. ストリームタイプを選択し、[→] をクリックします。
  6. ストリームに名前をつけ、 [フィードをストリームに接続する] をクリックします。
  7. プルダウンから追加するフィードを選択し、チェックボタンをクリックします。
  8. 同様にフィードを複数追加することができます。
  9. [ショートコード] をクリックします。ストリームのショートコードが確認できます。このショートコードを任意のページや投稿に貼り付けます。

ストリームのデザインカスタマイズ

作成したストリームは簡単にカスタマイズできます。ストリームを選択すると設定タブが表示されます。各タブごとに設定方法を解説します。

一般設定

一般設定タブでできる設定を解説します。

  • 並び替え・・・投稿の並び順を日付順やランダムなど指定できます。
  • 最初に読み込まれた投稿の数・・・表示される投稿数を指定できます。
  • カードクリックでライトボックスを表示・・・Noにするとカードをクリックすると元の投稿が開きます。
  • ライトボックスタイプ・・・ライトボックスのタイプを選べます。
  • プライベートストリーム・・・Yesにするとログインしたユーザーにのみ表示できます。
  • デスクトップでストリームを非表示にする・・・モバイルでのみ表示させるストリームを作成する場合、Yesにします。
  • モバイルデバイスでストリームを非表示にする・・・PCのみに表示させる場合Yesにします。
  • メディアの投稿のみを表示する・・・画像、動画のみで投稿を表示します。
  • タイトルリンク・・・ライトボックスが有効でも、投稿のタイトルから元の投稿をひらけるようにします。
  • メタ情報を非表示にする・・・各投稿のソーシャルネットワークアイコン、名前、タイムスタンプを非表示にします。
  • テキストを非表示にする・・・各投稿のテキストを非表示にします。
  • 最大画像解像度・・・大きなサイズの投稿がある場合はYesにします。

レイアウト

レイアウトタブでは、ストリームのレイアウトをカスタマイズできます。

レイアウトスタイルを決めたり、レスポンシブの設定、見出しや見出しの色などを簡単にカスタマイズすることができます。

  • ストリームレイアウトからレイアウトスタイルを選択できます。
  • レイアウトデザイン設定では見出しや背景色などストリームの見た目を変更できます。

スタイリング

スタイリングタブでは各投稿の表示スタイルを変更できます。

  • アバタースタイル・・・アバターの表示のされ方を変更できます。
  • シェイプスタイル・・・表示される投稿の角を丸くするかしないか選択できます。
  • ソーシャルアイコンスタンプ・・・SNSのマークの表示方法を選択できます。
  • カードの背景色・・・投稿の背景色を変更します。
  • アクセントの色・・・投稿の見出し、名前、ソーシャルボタンの色が変更できます。
  • リンクの色・・・リンク文字の色を変更できます。
  • 二次色・・・タイムスタンプとソーシャルカウンターの色を変更できます。
  • カードの影・・・投稿につけるシャドウを設定できます。
  • テキストの配置・・・投稿のテキストの配置を変更できます。
  • カウンターアイコンスタイル・・・投稿のカウンターの表示スタイルの変更ができます。

「カードビルダー ドラッグアンドドロップではドラッグ&ドロップをするだけで簡単にカードの並びを変更できます。

 

CSS

CSSタブでは、CSSの記載が可能です。より詳細にカスタマイズしたいという方は、CSSでコードを書くことでデザインをカスタマイズできます。