（ご参考）各種SNSをSHIFTに連携させる方法 「facebook」「YouTube」「Instagram」「Twitter」

Presentation on theme: "（ご参考）各種SNSをSHIFTに連携させる方法 「facebook」「YouTube」「Instagram」「Twitter」"— Presentation transcript:

1 （ご参考）各種SNSをSHIFTに連携させる方法 「facebook」「YouTube」「Instagram」「Twitter」
※2017年6月現在の方法です。 SNS側の仕様が頻繁に変わることをご了承ください。

2 facebook YouTube Instagram Twitter SHIFT
≪はじめに≫ 各種SNSの情報（タイムラインや写真、動画等）をSHIFTページに連携表示させるには、SNS各サイトから「埋め込みコード」を取得し、SHIFTの「ソースコード設定」部分に貼り付けます facebook YouTube Instagram Twitter 埋め込みコード 埋め込みコード 埋め込みコード 埋め込みコード SHIFT SNSの埋め込みコードを貼り付け

3 表示イメージ　（新テンプレート4） YouTube facebook Instagram Twitter

4 ≪埋め込み用ソースコードを生成するページにアクセス≫
1：facebook ≪埋め込み用ソースコードを生成するページにアクセス≫ 検索エンジン（yahoo!やgoogle）で「facebook　ソーシャルプラグイン」を検索し を開く 「ページプラグイン」をクリック

5 ≪facebookページのURLを設定し「コードを取得」をクリック≫
※個人ページはNGのようです。 そのまま 推奨：300～500 ※SHIFTで選択しているテンプレートにより異なります。 推奨：250～500 ※SHIFTで選択しているテンプレートにより異なります。 お好みで設定してください。 上の設定に合わせて変化します。 設定が完了したらここをクリックして下さい。

6 ≪ソースコードをSHIFTに貼り付け：『Iframe』の場合≫
1：facebook ≪ソースコードをSHIFTに貼り付け：『Iframe』の場合≫ Iframeを選択　※表示されていない場合があります。その場合は次ページ【『JavaScript SDK 』の場合】へお進みください このソースコードをすべてコピーして、SHIFTの【④その他情報入力」＞「地図・お問い合わせフォーム・掲示板等】編集画面の「ソースコード設定」部分に貼り付けてください。 コピーして貼り付け ※1、2どちらでもOKです。（選択したテンプレートにより表示される場所が変わります）

7 ≪ソースコードをSHIFTに貼り付け：『 JavaScript SDK 』の場合≫
1：facebook ≪ソースコードをSHIFTに貼り付け：『 JavaScript SDK 』の場合≫ JavaScript SDKを選択 このソースコード①、②をすべてコピーして、SHIFTの【「④その他情報入力」＞「地図・お問い合わせフォーム・掲示板等」】編集画面の「ソースコード設定」部分に貼り付けてください。 ① ② ※ソースコード設定1、2どちらでもOKです。（選択したテンプレートにより表示される場所が変わります） ※下図は設定1に貼り付け例 ①、②ともここに貼り付け

8 表示された埋め込みコードをSHIFTのソースコード設定部分に貼り付け
2：YouTube 埋め込みたい動画を開く ↓ 「共有」をクリック 「埋め込みコード」をクリック 表示された埋め込みコードをSHIFTのソースコード設定部分に貼り付け

9 表示された埋め込みコードをSHIFTのソースコード設定部分に貼り付け
3：Instagram 埋め込みたい写真を開く ↓ 右下の「・・・」をクリック 「埋め込み」をクリック 表示された埋め込みコードをSHIFTのソースコード設定部分に貼り付け ※タイムラインを埋め込むコードは提供されていないようです

10 「ツイートをサイトに埋め込む」をクリック
4：Twitter：特定のつぶやき 埋め込みたいつぶやきの右上の 「　　　」をクリック ↓ 「ツイートをサイトに埋め込む」をクリック 表示された埋め込みコードをSHIFTのソースコード設定部分に貼り付け

11 4：Twitter：タイムライン ①、Twitterにログインし「プロフィールと設定」内の「設定」をクリック ②、「ウィジェット」をクリック

12 4：Twitter：タイムライン ③、「新規作成」内の「リスト」をクリック ④、TwitterのURLを入力し「→」をクリック

13 ⑥、この埋め込みコードをSHIFTのソースコード設定部分に貼り付け
4：Twitter：タイムライン ⑤、お好みのデザインを選択 ⑥、この埋め込みコードをSHIFTのソースコード設定部分に貼り付け

14 ≪ご注意点≫ SNSによっては、SHIFTのプレビュー画面上でうまく表示されていない場合がありますが、公開ページでは正常表示されます。
【プレビュー画面】 【公開ページ】 公開保存