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ユニット の使い方】
- bingo!CMS管理画面にログインし、SNSを埋め込みたいページのページ編集画面に入ります。
- 画面上部のデザインユニットの中から HTML v17 のアイコンをドラッグ＆ドロップで配置します。
- HTML v17ユニットの ユニット編集 をクリックします。
- html入力欄に各SNSの埋め込みコードの<a>タグ、<blockquote>タグなど（SNSにより異なります）を貼り付けて保存します。
※HTML v1.7ユニットにはjavascriptの入力欄がありますが、外部スクリプトの読み込みには使用できません。
【このページ用のcssとjavascriptの設定 の使い方】
- bingo!CMS管理画面にログインし、SNSを埋め込みたいページのページ編集画面に入ります。
- 画面右上部の このページ用のcssとjavascriptの設定 をクリックします。
- javascript入力欄に埋め込みコードの<script>タグを貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
※bingo!CMSのバージョンにより、スマートフォン用の入力欄がない場合があります。 - 保存後、ポップアップウィンドウは × で閉じます。
SNSごとの埋め込み方法
Twitter（単体の投稿の埋め込み方法）
- Web版のTwitterにアクセスし、ID（電話番号、メールアドレス、ユーザー名）とパスワードを入力してログインします。
- 埋め込みたい投稿の右上にある、点が3つ並んだメニューをクリックします。
- ツイートを埋め込む をクリックします。
- Twitter Publish が開きます。
そのまま埋め込みコードをコピーする場合は Copy Code をクリックします。
コピーしたコードは、後ほどbingo!CMSの編集画面で使用します。
メモ帳などに貼り付けて保存しておきます。
オプション設定を行う場合は set customization options. をクリックします。
- 下記を参考に設定し Update をクリックします。
How would you like this to look?
- 背景をLight（白）またはDark（黒）から選択します。
What language would you like to display this in?
- ツイートの日付等の表示言語を選択します。
Would you like to limit context in this Tweet?
- ツイートが別ツイートへの返信である場合、チェックすると元ツイートを非表示にできます。
Opt-out of tailoring Twitter
- Twitterに閲覧データを送信しない場合はチェックを入れます。
新たにコードが生成されるので Copy Code をクリックしてコピーします。
コピーしたコードは、後ほどbingo!CMSの編集画面で使用します。メモ帳などに貼り付けて保存しておきます。
- bingo!CMSのツイートを埋め込みたいページにHTMLv17 をドラッグ&ドロップで配置し、ユニット編集 をクリックします。
- ユニットの編集画面を開き、html の入力欄に、先程コピーしておいたコードのうち、<blockquote>〜</blockquote>を貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。
以下は、bingo!CMS公式Twitterのツイートを埋め込む場合の入力例です。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">《パッチファイル適用代行の年内対応締め切りは11/13（金）18:00受付分まで》<br>締め切り以降にお申し込みいただいた場合、年内対応完了のお約束はできかねますのでご注意ください！<a href="https://twitter.com/hashtag/bingocms?src=hash&ref_src=twsrc%5Etfw">#bingocms</a> <a href="https://twitter.com/hashtag/CMS?src=hash&ref_src=twsrc%5Etfw">#CMS</a> <a href="https://twitter.com/hashtag/AdobeFlash?src=hash&ref_src=twsrc%5Etfw">#AdobeFlash</a> <a href="https://t.co/Asv5r5sqaD">https://t.co/Asv5r5sqaD</a></p>— bingo!CMS【公式】クラウドプラットフォームプレリリース中 (@bingocms) <a href="https://twitter.com/bingocms/status/1325605142138253312?ref_src=twsrc%5Etfw">2020年11月9日</a></blockquote>
- ページ編集画面右上の このページ用のcssとjavascriptの設定 をクリックし、CSS・JS設定 を開きます。
- javascript の入力欄に、先程コピーしておいたコードのうち、<script>〜</script>を貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
保存後、ポップアップウィンドウは画面右上の × で閉じます。
以下は、bingo!CMS公式Twitterのツイートを埋め込む場合の入力例です。
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
- 埋め込みが完了しました。
ページ編集画面にうまく表示されないときは、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
- ツイートの埋め込みがプレビュー画面で確認できました。
投稿の横幅は、デフォルトで550pxに指定されています。
Twitter（タイムラインの基本的な埋め込み方法）
- https://publish.twitter.com/ にアクセスし、埋め込みコードを発行したいTwitterのURLを入力して入力欄の右端にある矢印をクリック（またはEnterキーを押下）します。
- 表示オプションが表示されるので Embedded Timeline （埋め込みタイムライン）を選択します。
- コードが生成されるので、 Copy Code をクリックしてコードをコピーします。
コピーしたコードは、後ほどbingo!CMSの編集画面で使用します。
メモ帳などに貼り付けて保存しておきます。
以下は、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>
- bingo!CMS管理画面を開き、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>
- ページ編集画面右上の このページ用の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>
- 埋め込みが完了しました。
ページ編集画面にうまく表示されないときは、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
- 埋め込みをプレビュー画面で確認します。
基本的な埋め込み方法の場合、HTML v17ユニット を設置したコンテナの幅に合わせて表示されます。
Twitter（タイムラインの高さや幅を調整して埋め込む方法）
- 前述の Twitter（基本の埋め込み方法）の手順3 で、コードをコピーする前に set customization options （カスタマイズオプションを設定する）をクリックします。
- 高さと幅、背景色、言語を設定し Update をクリックします。
新たにコードが生成されるので Copy Code をクリックしてコピーします。
後は、前述の基本的な埋め込み方法の通りに設定します。
PCとスマートフォンで表示幅を変更したい場合は、それぞれコードを発行し、HTML v17ユニット のPC・Tablet用とSP用のタブにそれぞれの<a>タグを分けて記述してください。
Facebook（単体の投稿の埋め込み方法）
- Facebookを開き、埋め込みたい投稿の右上にある、点が3つ並んだメニューをクリックします。
- 埋め込み をクリックします。
- 埋め込み投稿 が開きます。
写真つきの投稿を埋め込む際、写真と投稿文を一緒に埋め込む場合は、 投稿全文を含める にチェックを入れます。
写真のみ埋め込む場合はチェックを外します。
- コードを取得 をクリックします。
- コードがポップアップで表示されます。
IFrame をクリックしタブを切り替え、コードをコピーします。
コピーしたコードは、後ほどbingo!CMSの編集画面で使用します。
メモ帳などに貼り付けて保存しておきます。
以下は、bingo!CMS公式Facebookの場合のコードの生成例です。
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FbingoCMS%2Fposts%2F3986339781396174&show_text=true&width=552&height=811&appId" width="552" height="811" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
- Facebookを埋め込みたいページに、HTML v17ユニット をドラッグ&ドロップで配置します。
ユニットの編集画面の html の入力欄に先ほどコピーしたタグを貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。
- 埋め込みが完了しました。
ページ編集画面にうまく表示されないときは、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
Facebook（タイムラインの基本的な埋め込み方法）
- https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP にアクセスし、FacebookページのURL に埋め込みコードを発行したいFacebookページのURLを入力します。
タブ が空欄の場合は timeline と入力します。
【タブについて】
タブ は、タイムライン以外にイベントとメッセージを表示できます。
その場合、timeline の後に events 、messages を カンマ区切りで入力します。
生成したコードをサイトに埋め込むと、Facebookページで公開しているイベント情報を表示したり、埋め込みからFacebookページへメッセージを送信できるようになります。
- 幅（最小180px:最大500px）、高さ（最低70px）に任意の値を入力し、コードを取得 をクリックします。
値が未入力の場合、幅はデフォルトの340pxとなります。
【その他】
- スモールヘッダーを使用 => ヘッダーの高さが低くなります。
- カバー写真を非表示にする => Facebookページに登録したカバー画像が非表示になります。
- plugin containerの幅に合わせる => ページの読み込み時に、コンテナに合わせプラグインの幅が可変（最小180px:最大500px）します。
ただし、ページの読み込み後にスマートフォンの画面を回転させるなどしてもサイズは自動変更されず、手動で再読み込みが必要となります。 - 友達の顔を表示する => そのFacebookページにいいね！した友達のプロフィール写真を表示します。
- コードがふたつ生成されるので、それぞれコピーします。
以下は、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>
- 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>
- ページ編集画面右上の このページ用のcssとjavascriptの設定 をクリックし、CSS・JS設定 を開きます。
javascript の入力欄にStep 1のコードを貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
※bingo!CMSのバージョンにより、スマートフォン用の入力欄がない場合があります。
保存後、ポップアップウィンドウは × で閉じます。
- 埋め込みが完了しました。
ページ編集画面にうまく表示されないときは、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
- プレビュー画面で埋め込みの表示が確認できました。
Facebook（タイムラインをレスポンシブで埋め込む方法）
本Tipsは以下の記事を元に、bingo!CMSに合わせて適宜変更を加えています。
引用元： facebookのページプラグインをレスポンシブで埋め込む方法 - ユニバースオフィシャルブログ「ゆにメモ」
- 前述の基本的な埋め込み方法の手順1〜2を参照し、コードを取得します。
この時、幅と高さの値は未入力にし、必ず plugin containerの幅に合わせる にチェックを入れます。
- Facebookを埋め込みたいページに、HTML v17ユニット をドラッグ&ドロップで配置します。
ユニットの編集画面を開き、html の入力欄に以下のコードを貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。
<div id="fb-root"></div> <div class="facebook-wrapper"></div>
※保存後にユニットが一時的に非表示になることがありますが、そのまま次の手順に進んでください。
- ページ編集画面右上の このページ用のcssとjavascriptの設定 をクリックし、CSS・JS設定 を開きます。
css の入力欄に以下のコードを貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
※bingo!CMSのバージョンにより、スマートフォン用の入力欄がない場合があります。
<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; を記述していますが、不要な場合は削除してください。
- 続けて、同じ画面の 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となるよう記述していますので適宜ご変更ください。
- さらに、貼り付けたコードの ★★★★★ の部分に、先程取得したStep 2のコードを置き換えます。
- 置き換えたコードの deta-width および deta-height に、以下を加えて保存します。
スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
保存後、ポップアップウィンドウは × で閉じます。
追加前
data-width="" data-height=""
追加後
data-width="' + w + '" data-height="' + h + '"
- 埋め込みが完了しました。
ページ編集画面にうまく表示されないときは、ページを再読み込みするか、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
- プレビュー画面で埋め込みの表示が確認できました。
- スマートフォン用のプレビュー画面に表示されるQRコードを読み込むと、お手持ちのスマートフォンでレスポンシブの動作確認が行なえます。
【レスポンシブの範囲について】
プラグインの仕様により、レスポンシブの範囲は幅：最小180px/最大500pxとなります。
Instagram（単体の投稿の埋め込み方法）
- Web版のInstagramにアクセスし、ID（電話番号、ユーザーネーム、メールアドレス）とパスワードを入力してログイン（またはFacebookでログイン）します。
- 任意の公開アカウントの埋め込みたい投稿をクリックします。
- 埋め込みたい投稿の右上にある、点が3つ並んだメニューをクリックします。
- 埋め込み → 埋め込みコードをコピー をクリックします。
コピーしたコードは、後ほどbingo!CMSの編集画面で使用します。
メモ帳などに貼り付けて保存しておきます。
以下は埋め込みコードの発行例です。
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/CHUFk9jDsIF/?utm_source=ig_embed&utm_campaign=loading" data-instgrm-version="13" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/CHUFk9jDsIF/?utm_source=ig_embed&utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> この投稿をInstagramで見る</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div></a> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/CHUFk9jDsIF/?utm_source=ig_embed&utm_campaign=loading" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">小田原市役所前のけやき通りも、すっかり秋。今年も赤や黄色の紅葉がきれいです。 #小田原のチカラ #小田原市 #小田原市役所 #小田原 #おだわら #odawara #秋 #紅葉 #けやき #欅 #赤 #黄 #travelodawara #風景 #風景写真 #森里川海 #街路樹 #autumn #japan #kanagawa</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/odawalab/?utm_source=ig_embed&utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> 神奈川県 小田原市 公式 オダワラボ</a>(@odawalab)がシェアした投稿 - <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2020-11-08T02:58:47+00:00">2020年11月月7日午後6時58分PST</time></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script>
- bingo!CMSのInstagramを埋め込みたいページにHTMLv17 をドラッグ&ドロップで配置し、ユニット編集 をクリックします。
- html 欄に先程コピーしておいたコードのうち、<blockquote>〜</blockquote>を貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。
以下は埋め込みコードの貼付例です。
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/CHUFk9jDsIF/?utm_source=ig_embed&utm_campaign=loading" data-instgrm-version="13" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/CHUFk9jDsIF/?utm_source=ig_embed&utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> この投稿をInstagramで見る</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div></a> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/CHUFk9jDsIF/?utm_source=ig_embed&utm_campaign=loading" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">小田原市役所前のけやき通りも、すっかり秋。今年も赤や黄色の紅葉がきれいです。 #小田原のチカラ #小田原市 #小田原市役所 #小田原 #おだわら #odawara #秋 #紅葉 #けやき #欅 #赤 #黄 #travelodawara #風景 #風景写真 #森里川海 #街路樹 #autumn #japan #kanagawa</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/odawalab/?utm_source=ig_embed&utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> 神奈川県 小田原市 公式 オダワラボ</a>(@odawalab)がシェアした投稿 - <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2020-11-08T02:58:47+00:00">2020年11月月7日午後6時58分PST</time></p></div></blockquote>
- 画面右上の CSS/JS を開き、javascript 欄に、先程コピーしておいたコードのうち、<script>〜</script>を貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
※bingo!CMSのバージョンにより、スマートフォン用の入力欄がない場合があります。
以下は埋め込みコードの貼付例です。
<script async src="//www.instagram.com/embed.js"></script>
- 埋め込みが完了しました。
ページ編集画面にうまく表示されないときは、ページを再読み込みするか、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
- プレビュー画面で埋め込みの表示が確認できました。
Instagram（投稿一覧の埋め込み方法）
無料拡張ユニット「インスタグラム連携ユニット」にて、インスタグラム投稿一覧のタイル表示が可能です。
投稿のリンク先は「投稿」または「ユーザー」から選択できます。
詳細はbingo!CMSユーザーズサイトのインスタグラム連携ユニットダウンロードページをご確認ください。
※bingo!CMS1.7.0以上が対象です。
その他のTips
-
2022年01月12日
連載記事のNEWアイコンを任意の画像に変える方法bingo!CMSの「連載記事一覧用ユニット」にデフォルトで設定されている「NEW」アイコン（gif）を、任意の画像（jpg、png等）へ置き換えるTipsをご紹介します。
-
-
-
2020年02月05日
Googleカスタム検索でサイト内検索を設置する方法bingo!CMSのCSS・JS設定とHTML v17ユニットを使用し、Googleカスタム検索でサイト内検索を設置する方法をご紹介します。