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が記述できるユニットを設置した場所に表示されます。
SNSごとの埋め込み方法
Twitter(単体の投稿の埋め込み方法)
- Web版のTwitterにアクセスし、ID(電話番号、メールアドレス、ユーザー名)とパスワードを入力してログインします。
- 下記を参考に設定し 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の編集画面で使用します。メモ帳などに貼り付けて保存しておきます。
- ユニットの編集画面を開き、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>
Twitter(タイムラインの基本的な埋め込み方法)
- https://publish.twitter.com/ にアクセスし、埋め込みコードを発行したいTwitterのURLを入力して入力欄の右端にある矢印をクリック(またはEnterキーを押下)します。
- コードが生成されるので、 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>
Twitter(タイムラインの高さや幅を調整して埋め込む方法)
- 前述の Twitter(基本の埋め込み方法)の手順3 で、コードをコピーする前に set customization options (カスタマイズオプションを設定する)をクリックします。
Facebook(単体の投稿の埋め込み方法)
- コードがポップアップで表示されます。
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(タイムラインの基本的な埋め込み方法)
- 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>
Facebook(タイムラインをレスポンシブで埋め込む方法)
本Tipsは以下の記事を元に、bingo!CMSに合わせて適宜変更を加えています。
引用元: facebookのページプラグインをレスポンシブで埋め込む方法 - ユニバースオフィシャルブログ「ゆにメモ」
- 前述の基本的な埋め込み方法の手順1〜2を参照し、コードを取得します。
この時、幅と高さの値は未入力にし、必ず plugin containerの幅に合わせる にチェックを入れます。
- ページ編集画面右上の このページ用の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となるよう記述していますので適宜ご変更ください。
Instagram(単体の投稿の埋め込み方法)
- Web版のInstagramにアクセスし、ID(電話番号、ユーザーネーム、メールアドレス)とパスワードを入力してログイン(またはFacebookでログイン)します。
- 埋め込み → 埋め込みコードをコピー をクリックします。
コピーしたコードは、後ほど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>
- 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>
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カスタム検索でサイト内検索を設置する方法をご紹介します。