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

SNSの埋め込みとは

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

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

bingo!CMSにSNSを埋め込むには

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

【貼り付け場所】

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

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

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

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

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

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

  1. bingo!CMS管理画面にログインし、SNSを埋め込みたいページのページ編集画面に入ります。
  2. 画面右上部の このページ用のcssとjavascriptの設定 をクリックします。
  3. javascript入力欄に埋め込みコードの<script>タグを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
    ※bingo!CMSのバージョンにより、スマートフォン用の入力欄がない場合があります。
  4. 保存後、ポップアップウィンドウは × で閉じます。

SNSごとの埋め込み方法

その他のTips

ページトップ