【2025年版】
WEBサイトに埋め込む外部サービスと用意する情報の早見表！【後編】 Embedding Services and Required Info for Your Website
WEBサイトの充実度を高めるためには、さまざまな外部サービスの導入が必要です。前編では、YouTubeやGoogleアナリティクス、Googleタグマネージャー（GTM）など、「Google系サービス」を中心にご紹介させて頂きました。【前編はこちら】
今回は後編として、SNSやアクセス解析の補助ツールなど、より「運用」に近い外部サービスをご紹介します。ぜひサイト制作や運用の際の参考にしてみてください。
目次
Instagram自体は、写真や動画を活かしたビジュアル訴求に最適です。店舗・美容・医療・採用など、「見せるコンテンツ」を扱うサイトと相性が抜群なため、投稿を自動でサイトに反映することで、手間をかけずに更新感を出せます。
導入に必要な情報
- アカウント or 投稿ポストのURL
- 埋め込み用コード
- 独自でフィードを埋め込む場合はAPI利用 + jsのコードが必要です。
導入に必要なコード例
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/reel/xxxxxxxxxxxx/?utm_source=ig_embed&utm_campaign=loading" data-instgrm-version="14" 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);"> .... <a href="https://www.instagram.com/reel/xxxxxxxxxxxx/?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; text-decoration:none;" target="_blank">Instagram(@instagram)がシェアした投稿</a></p></div></blockquote>
<script async src="//www.instagram.com/embed.js"></script>
X（旧Twitter）
リアルタイムな情報発信に強いX（旧Twitter）は、ニュース・キャンペーン・採用活動など「発信頻度が高い業種」に最適です。自社アカウントや特定ツイートを直接サイト内に表示が可能です。
導入に必要な情報
- アカウント or 投稿ポストのURL
- 埋め込み用コード
導入に必要なコード例
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"> … <a href="https://t.co/xxxxxxxxxxxx">https://t.co/xxxxxxxxxxxx</a></p>— Japan (@XcorpJP) <a href="https://twitter.com/XcorpJP/status/xxxxxxxxxxxx">October 9, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
TikTok
TikTokは近年、採用サイトや店舗サイトの訴求力を高める動画プラットフォームとして急上昇しています。投稿を埋め込むことで、SNS流入とWEB回遊をつなぐ導線を作れます。
導入に必要な情報
- アカウント or 投稿ポストのURL
- 埋め込みコード
導入に必要なコード例
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/xxxxxxxxxxxx" data-unique-id="tiktokjapan" data-embed-type="creator" style="max-width: 780px; min-width: 288px;" > <section> <a target="_blank" href="https://www.tiktok.com/xxxxxxxxxxxx?refer=creator_embed">@tiktokjapan</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
Microsoft Clarity
Microsoft Clarityは、ユーザーの行動を録画＋ヒートマップで可視化できる無料ツールです。Googleアナリティクスでは見えない「クリック・スクロールの実態」を把握できるため、UX改善や離脱ポイント分析に非常に有効です。
導入に必要な情報
- Microsoftアカウント（GoogleアカウントやFacebookアカウントでも代用可）
- Webサイトの編集権限（HTMLコードの設置やGTMの設定）
- 埋め込み用のコード（IDを含む）
導入に必要なコード例
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "ここに表示されたIDを入力");
</script>
Text おわりに
いかがでしたでしょうか？SNSフィードや解析ツールをWEBサイトに埋め込むことで、日々の運用データを「更新」「分析」「改善」へと循環させる仕組みを作ることができます。今回紹介したInstagram・X・TikTok・Microsoft Clarityはいずれも、導入コストが低く、運用効果を可視化しやすい実践的なツールです。
WEBサイトを「作って終わり」にせず、運用しながら育てていくことで、ユーザーとの関係性を長期的に高めていけるはずです。自社の目的やターゲットに合わせて、最適な組み合わせをぜひご検討してみてください。
