SNSのタイムラインをサイトに埋め込む方法

SNSの埋め込みとは

TwitterやFacebookなどのSNSに投稿した記事を、Webサイト上に表示する仕組みです。

自社でSNSを運用している場合、自社サイトに投稿を埋め込み、認知向上をはかれます。
また、Webサイトのリピーター獲得や、SNSのフォロワー増加などの相乗効果が期待できます。

bingo!CMSで埋め込みコードを記述するには

一般的に、SNSを埋め込む際は、取得したコード( <a>タグ、<script>タグ など )を全てコピーし、そのままWebサイト内の埋め込みたい場所へ貼り付けます。
しかし、bingo!CMSの場合は、コードをタグごとに分けてそれぞれ別の場所へ貼り付けます。
 

【貼り付け場所】

<a>タグ => htmlが記述できるユニット(本Tipsでは、HTML v17ユニット を使用します。)
<script>タグ => このページ用のcssとjavascriptの設定


埋め込みは、htmlが記述できるユニットを設置した場所に表示されます。

【HTML v17ユニット の使い方】

  1. bingo!CMS管理画面にログインし、SNSを埋め込みたいページのページ編集画面に入ります。
  2. 画面上部のデザインユニットの中から HTML v17 のアイコンをドラッグ&ドロップで配置します。
  3. HTML v17ユニットの ユニット編集 をクリックします。
  4. html入力欄に各SNSの埋め込みコードの<a>タグを貼り付けて保存します。


※HTML v1.7ユニットにはjavascriptの入力欄がありますが、外部スクリプトの読み込みには使用できません。

【このページ用のcssとjavascriptの設定 の使い方】

  1. bingo!CMS管理画面にログインし、SNSを埋め込みたいページのページ編集画面に入ります。
  2. 画面右上部の このページ用のcssとjavascriptの設定 をクリックします。
  3. javascript入力欄に埋め込みコードの<script>タグを貼り付けて保存します。
  4. 保存後、ポップアップウィンドウは × で閉じます。

>> Twitterを埋め込む方法
>> Facebookを埋め込む方法

SNSごとの埋め込み方法

Twitter

Facebook

Twitter(基本的な埋め込み方法)

  1. https://publish.twitter.com/ にアクセスし、埋め込みコードを発行したいTwitterのURLを入力して入力欄の右端にある矢印をクリック(またはEnterキーを押下)します。
  1. 表示オプションが表示されるので Embedded Timeline (埋め込みタイムライン)を選択します。
  1. コードが生成されるので、 Copy Code をクリックしてコードをコピーします。

以下は、bingo!CMS公式Twitterの場合のコードの生成例です。
<a class="twitter-timeline" href="https://twitter.com/bingocms?ref_src=twsrc%5Etfw">Tweets by bingocms</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  1. Twitterを埋め込みたいページに、HTML v17ユニット をドラッグ&ドロップで配置します。
    ユニットの編集画面を開き、html の入力欄に<a>タグのみを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。

以下は、bingo!CMS公式Twitterの場合の<a>タグの入力例です。
<a class="twitter-timeline" href="https://twitter.com/bingocms?ref_src=twsrc%5Etfw">Tweets by bingocms</a>
  1. ページ編集画面右上の このページ用のcssとjavascriptの設定 をクリックし、CSS・JS設定 を開きます。
    javascript の入力欄に<script>タグのみを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
    ※bingo!CMSのバージョンにより、スマートフォン用の入力欄がない場合があります。
    保存後、ポップアップウィンドウは × で閉じます。

以下は、bingo!CMS公式Twitterの場合の<script>タグの入力例です。
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  1. 埋め込みが完了しました。
    ページ編集画面にうまく表示されないときは、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
  1. 埋め込みをプレビュー画面で確認します。
    基本的な埋め込み方法の場合、HTML v17ユニット を設置したコンテナの幅に合わせて表示されます。

Twitter(高さや幅を調整して埋め込む方法)

  1. 前述の Twitter(基本の埋め込み方法)の手順3 で、コードをコピーする前に set customization options (カスタマイズオプションを設定する)をクリックします。
  1. 高さと幅、背景色、言語を設定し Update をクリックします。
    新たにコードが生成されるので Copy Code をクリックしてコピーします。
    後は、前述の基本的な埋め込み方法の通りに設定します。

    PCとスマートフォンで表示幅を変更したい場合は、それぞれコードを発行し、HTML v17ユニット のPC・Tablet用とSP用のタブにそれぞれの<a>タグを分けて記述してください。

Facebook(基本的な埋め込み方法)

  1. https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP にアクセスし、FacebookページのURL に埋め込みコードを発行したいFacebookページのURLを入力します。
    タブ が空欄の場合は timeline と入力します。
 

【タブについて】

タブ は、タイムライン以外にイベントとメッセージを表示できます。
その場合、timeline の後に events 、messages を カンマ区切りで入力します。
生成したコードをサイトに埋め込むと、Facebookページで公開しているイベント情報を表示したり、埋め込みからFacebookページへメッセージを送信できるようになります。

  1. 幅(最小180px:最大500px)、高さ(最低70px)に任意の値を入力し、コードを取得 をクリックします。
    値が未入力の場合、幅はデフォルトの340pxとなります。
 

【その他】

  • スモールヘッダーを使用 => ヘッダーの高さが低くなります。
  • カバー写真を非表示にする => Facebookページに登録したカバー画像が非表示になります。
  • plugin containerの幅に合わせる => ページの読み込み時に、コンテナに合わせプラグインの幅が可変(最小180px:最大500px)します。
    ただし、ページの読み込み後にスマートフォンの画面を回転させるなどしてもサイズは自動変更されず、手動で再読み込みが必要となります。
  • 友達の顔を表示する => そのFacebookページにいいね!した友達のプロフィール写真を表示します。
  1. コードがふたつ生成されるので、それぞれコピーします。

以下は、bingo!CMS公式Facebookの場合のコードの生成例です。

Step 1: Include the JavaScript SDK on your page once, ideally right after the opening 本文 tag.
(JavaScript SDKをページに1回、理想的には開始タグの直後に含めます。)

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>

Step 2: Place this code wherever you want the plugin to appear on your page.
(プラグインをページに表示する場所にこのコードを配置します。)

<div class="fb-page" data-href="https://www.facebook.com/bingoCMS/" data-tabs="timeline" data-width="250" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/bingoCMS/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/bingoCMS/">bingoCMS</a></blockquote></div>
  1. Facebookを埋め込みたいページに、HTML v17ユニット をドラッグ&ドロップで配置します。
    ユニットの編集画面を開き、html の入力欄にStep 2のコードを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。
<div class="fb-page" data-href="https://www.facebook.com/bingoCMS/" data-tabs="timeline" data-width="250" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/bingoCMS/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/bingoCMS/">bingoCMS</a></blockquote></div>
  1. ページ編集画面右上の このページ用のcssとjavascriptの設定 をクリックし、CSS・JS設定 を開きます。
    javascript の入力欄にStep 1のコードを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
    保存後、ポップアップウィンドウは × で閉じます。
  1. 埋め込みが完了しました。
    ページ編集画面にうまく表示されないときは、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
  1. プレビュー画面で埋め込みの表示が確認できました。

Facebook(レスポンシブで埋め込む方法)

本Tipsは以下の記事を元に、bingo!CMSに合わせて適宜変更を加えています。
引用元: facebookのページプラグインをレスポンシブで埋め込む方法 - ユニバースオフィシャルブログ「ゆにメモ」

  1. 前述の基本的な埋め込み方法の手順1〜2を参照し、コードを取得します。
    この時、幅と高さの値は未入力にし、必ず plugin containerの幅に合わせる にチェックを入れます。
  1. Facebookを埋め込みたいページに、HTML v17ユニット をドラッグ&ドロップで配置します。
    ユニットの編集画面を開き、html の入力欄に以下のコードを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。
<div id="fb-root"></div>

<div class="facebook-wrapper"></div>

※保存後にユニットが一時的に非表示になることがありますが、そのまま次の手順に進んでください。

  1. ページ編集画面右上の このページ用のcssとjavascriptの設定 をクリックし、CSS・JS設定 を開きます。
    css の入力欄に以下のコードを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
<style type="text/css">
.facebook-wrapper {
    max-width: 500px;
    margin: 0 auto;
}
.facebook-wrapper > .fb-page {
    width: 100%;
}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
}
</style>

※中央寄せにするため margin: 0 auto; を記述していますが、不要な場合は削除してください。

  1. 続けて、同じ画面の javascript の入力欄に以下のコードを貼り付けて保存します。
     
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>

<script>
j$(function() {
    // ページプラグインの埋め込みコードを返す。
    function pagePluginCode(w) {
        // 幅に応じて高さを変更する場合
        if(w > 400) {
            var h = 600;
        } else {
            var h = 400;
        }
        return '★★★★★';
    }
 
    // ページプラグインを追加する要素
    var facebookWrap = j$('.facebook-wrapper');
    var fbBeforeWidth = ''; // 前回変更したときの幅
    var fbWidth = facebookWrap.width(); // 今回変更する幅
    var fbTimer = false;
    j$(window).on('load resize', function() {
        if (fbTimer !== false) {
            clearTimeout(fbTimer);
        }
        fbTimer = setTimeout(function() {
            fbWidth = facebookWrap.width(); // 変更後の幅を取得
            // 前回の幅から変更があった場合のみ処理
            // スマホだとスクロール時にリサイズが発生することがあるため
            if(fbWidth != fbBeforeWidth) {
                facebookWrap.html(pagePluginCode(fbWidth)); // ページプラグインのコード変更
                window.FB.XFBML.parse(); // ページプラグインの再読み込み
                fbBeforeWidth = fbWidth; // 今回変更分を保存しておく
            }
        }, 200);
    });
});
</script>

※プラグインの表示幅が、400px以上のときは高さ600px、それ以下のときは400pxとなるよう記述していますので適宜ご変更ください。

  1. さらに、貼り付けたコードの ★★★★★ の部分に、先程取得したStep 2のコードを置き換えます。
  1. 置き換えたコードの deta-width および deta-height に、以下を加えて保存します。
    スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
    保存後、ポップアップウィンドウは × で閉じます。

追加前

data-width="" data-height=""

追加後

data-width="' + w + '" data-height="' + h + '"
  1. 埋め込みが完了しました。
    ページ編集画面にうまく表示されないときは、ページを再読み込みするか、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
  1. プレビュー画面で埋め込みの表示が確認できました。
  1. スマートフォン用のプレビュー画面に表示されるQRコードを読み込むと、お手持ちのスマートフォンでレスポンシブの動作確認が行なえます。


【レスポンシブの範囲について】

プラグインの仕様により、レスポンシブの範囲は幅:最小180px/最大500pxとなります。

その他のTips

ページトップ