Flow-Flowの使い方
ソーシャルアカウントの連携
Flow-Flowを使用するには、まずSNSとの連携が必要になります。
それぞれのSNSとの連携方法を解説します。
Facebook/Instagram
- ダッシュボードから [Flow Flow] をクリックします。FlowFlowの設定画面が開くので [認証] タブをクリックします。
- 「FacebookとInstagramの統合」セクションの [接続] をクリックします。
- Facebookへのログインが求められるので [・・・としてログイン] をクリックします。
- Instagramのビジネスまたはクリエイターアカウントを選択し、チェックを入れたら [次へ] をクリックします。
- FlowFlowがアクセスできるページを選択、チェックを入れたら [次へ] をクリックします。
- FlowFlowに許可するアクセスを選択、チェックを入れたら [完了] をクリックします。
- 以上でFlowFlowとFacebookのリンクが完了です。 [OK] をクリックします。
FlowFlowにInstagramをリンクさせるにはInstagramのビジネスアカウントかクリエイターアカウントが必要です。
ビジネスアカウントとクリエイターアカウントの作成方法は以下の公式サイトを参考にしてみてください。
ビジネスアカウントの作成方法
https://help.instagram.com/502981923235522
クリエイターアカウントの作成方法
https://help.instagram.com/2358103564437429
Twitterで認証するには、Twitterアプリケーションを作成し、アクセストークンとAPIキーを取得する必要があります。
- https://developer.twitter.com/にアクセスします。
- Twitterデベロッパーで [サインアップ] をクリックし、自分のTwiterアカウントでログインします。
- Twitter開発者アカウントの申請を行います。[Apply for a developer account] をクリックします。
- TwitterAPIの使用方法を選択してください。
- Twitter APIやTwitterのデータをどのように使用するかを入力します。英語入力ですが、翻訳サイトで翻訳したもので構いません。
- 「Are you planning to analyze Twitter data?」では、Twitterのデータを分析する必要があるかを記載します。必要がなければ、[NO] にしておきます。
- 申請が完了すると「Verify your Twitter Developer Account」という件名のメールが届くので、内容を確認して、メール本文の[Confirm your email] ボタンをクリックします。ここから審査が開始されます。審査に通るとメールが届くので、以下の手順に進みます。（審査には数日かかることもあります。）
- Twitterデベロッパーで新規アプリを作成します。
- 「API Key」と [API Key Secret] をコピーしておきます。
- [Projects & Apps] > [先ほど作ったアプリ名] >[Keys & tokens] > 「Access Token and Secret」セクションの [Generte] をクリックします。
- 「AccessToken and Secret」の [Regenerate] をクリックします。
- 「Access Token」と「AccessTokenSecret」をコピーしておきます。[Yes,Isaved them] をクリックします。
- WordPressのダッシュボードから [FlowFlow] > [認証] > 「Twitternの統合」セクションで先ほどコピーした「APIキー」「APIシークレット」「アクセストークン」「アクセストークンシークレット」をそれぞれペーストします。[変更内容を保存] をクリックします。
以上でTwitterの設定は完了です。
Youtube
- Google DevelopersConsoleにアクセスし、googleアカウントでログインします。
- [APIとサービス] をクリックします。
- [プロジェクトを作成] をクリックします。
- プロジェクト名を決めて [作成] をクリックします。
- [APIとサービスの有効化] をクリックします。
- [YouTubeDateAPI] をクリックし、開いたページの [有効にする] をクリックします。
- [認証情報] > [認証情報を作成] > [APIキー] をクリックします。
- APIキーをコピーします。
- WordPressのダッシュボードから [FlowFlow] > [認証] をクリックし、「GoogleとYouYubeの統合」の「APIキー」の欄に先ほどコピーしたAPIキーを貼り付け [変更内容を保存] をクリックします。
これでYouTubeとの連携ができました。
ソーシャルフィードの設置方法
WordPressサイトにソーシャルフィードを設置する方法を解説します。
- WordPress管理画面のダッシュボードから [FlowFlow] > [フィード] > [フィードを作成する] をクリックします。
- フィードを作成するSNSマークをクリックします。
- ここではInstagramを選択しました。各項目を設定したら [フィードを作成する] をクリックします。
- [ストリーム] タブを開きます。[ストリーム] をクリックします。
- ストリームタイプを選択し、[→] をクリックします。
- ストリームに名前をつけ、 [フィードをストリームに接続する] をクリックします。
- プルダウンから追加するフィードを選択し、チェックボタンをクリックします。
- 同様にフィードを複数追加することができます。
- [ショートコード] をクリックします。ストリームのショートコードが確認できます。このショートコードを任意のページや投稿に貼り付けます。
ストリームのデザインカスタマイズ
作成したストリームは簡単にカスタマイズできます。ストリームを選択すると設定タブが表示されます。各タブごとに設定方法を解説します。
一般設定
一般設定タブでできる設定を解説します。
- 並び替え・・・投稿の並び順を日付順やランダムなど指定できます。
- 最初に読み込まれた投稿の数・・・表示される投稿数を指定できます。
- カードクリックでライトボックスを表示・・・Noにするとカードをクリックすると元の投稿が開きます。
- ライトボックスタイプ・・・ライトボックスのタイプを選べます。
- プライベートストリーム・・・Yesにするとログインしたユーザーにのみ表示できます。
- デスクトップでストリームを非表示にする・・・モバイルでのみ表示させるストリームを作成する場合、Yesにします。
- モバイルデバイスでストリームを非表示にする・・・PCのみに表示させる場合Yesにします。
- メディアの投稿のみを表示する・・・画像、動画のみで投稿を表示します。
- タイトルリンク・・・ライトボックスが有効でも、投稿のタイトルから元の投稿をひらけるようにします。
- メタ情報を非表示にする・・・各投稿のソーシャルネットワークアイコン、名前、タイムスタンプを非表示にします。
- テキストを非表示にする・・・各投稿のテキストを非表示にします。
- 最大画像解像度・・・大きなサイズの投稿がある場合はYesにします。
レイアウト
レイアウトタブでは、ストリームのレイアウトをカスタマイズできます。
レイアウトスタイルを決めたり、レスポンシブの設定、見出しや見出しの色などを簡単にカスタマイズすることができます。
- ストリームレイアウトからレイアウトスタイルを選択できます。
- レイアウトデザイン設定では見出しや背景色などストリームの見た目を変更できます。
スタイリング
スタイリングタブでは各投稿の表示スタイルを変更できます。
- アバタースタイル・・・アバターの表示のされ方を変更できます。
- シェイプスタイル・・・表示される投稿の角を丸くするかしないか選択できます。
- ソーシャルアイコンスタンプ・・・SNSのマークの表示方法を選択できます。
- カードの背景色・・・投稿の背景色を変更します。
- アクセントの色・・・投稿の見出し、名前、ソーシャルボタンの色が変更できます。
- リンクの色・・・リンク文字の色を変更できます。
- 二次色・・・タイムスタンプとソーシャルカウンターの色を変更できます。
- カードの影・・・投稿につけるシャドウを設定できます。
- テキストの配置・・・投稿のテキストの配置を変更できます。
- カウンターアイコンスタイル・・・投稿のカウンターの表示スタイルの変更ができます。
「カードビルダー ドラッグアンドドロップではドラッグ&ドロップをするだけで簡単にカードの並びを変更できます。
CSS
CSSタブでは、CSSの記載が可能です。より詳細にカスタマイズしたいという方は、CSSでコードを書くことでデザインをカスタマイズできます。
