MENU

SNS埋め込み

SNS埋め込み術 – 完全ガイド

🌟SNS埋め込み術

InstagramやTikTokを簡単にWEBサイトに埋め込んで、最新投稿を自動表示しよう！
WordPress、HTML、どんなサイトでも使用可能！

💡このページでできること

📋すぐに使えるコード

コピーボタン1クリックで、各SNSの埋め込みコードを簡単にコピーできます。WordPress、HTML、どんなサイトでも使用可能です。

🎯投稿IDを変更するだけ

コピーしたコードの「投稿IDをここに入力」部分を実際のInstagram投稿IDやTikTok動画IDに置き換えるだけで完成します。

📱レスポンシブ対応

スマートフォン、タブレット、パソコンのどの画面サイズでも自動的に最適な表示に調整されます。

🔄リアルタイム表示

埋め込んだSNS投稿は最新の状態で表示されます。いいね数やコメントも自動更新されます。

🚀簡単3ステップで完了！

  1. コピーボタンをクリック → 埋め込みコードを取得
  2. 投稿IDを変更 → 表示したいSNS投稿のIDに置き換え
  3. サイトに貼り付け → WordPress、HTML、どんなサイトでも対応

🌐対応サイト一覧

  • 📝 WordPress – カスタムHTMLブロックに貼り付け
  • 💻 HTML/CSS サイト – bodyタグ内に直接貼り付け
  • 🛒 Shopify – セクションやページに追加
  • 🎨 Wix – HTML埋め込み機能を使用
  • 📱 Squarespace – コードブロックに追加
  • ⚡ その他のCMS – HTML対応サイトなら何でも可能

📸Instagram埋め込み方法

埋め込みたいInstagramの投稿を開き、右上の「…」メニューから「埋め込み」を選択します。

✨このコードで何ができる？

  • 📱 Instagram投稿をそのまま表示 – 画像、動画、キャプション、いいね数まで完全再現
  • 🔄 自動更新 – いいね数やコメント数がリアルタイムで更新
  • 📏 レスポンシブデザイン – スマホ・タブレット・PCで最適表示
  • 🎨 Instagramの公式デザイン – ブランドイメージを保持
Instagram埋め込み – 完全版
Instagram埋め込み
💡 投稿IDの例： CxxxxxxxxxxxのようなID
🔍 投稿IDの見つけ方： Instagram投稿のURL「instagram.com/p/CxxxxxxxxxxxID/」の部分

🔧修正が必要な箇所

必ず変更してください：

  • 📝 data-instgrm-permalink="https://www.instagram.com/p/投稿IDをここに入力/"
  • 🎯 「投稿IDをここに入力」 → 実際の投稿IDに置き換え
  • ✅ 例： data-instgrm-permalink="https://www.instagram.com/p/C1a2b3c4d5e6f7g/"

⚠️ 注意： 他の部分は変更しないでください。JavaScriptやCSSを変更すると正常に動作しなくなります。

📋実際の修正例

❌ 修正前（コピーしたまま）

data-instgrm-permalink="https://www.instagram.com/p/投稿IDをここに入力/"

✅ 修正後（実際のID）

data-instgrm-permalink="https://www.instagram.com/p/C1a2b3c4d5e6f7g/"
Instagram埋め込み – WordPress用
Instagram埋め込み – シンプル版（どこでも使える）

💡 シンプル版の使い方

このコードはどんなサイトでも使用できます：

  • 📝 HTML – bodyタグ内に貼り付け
  • 🛒 Shopify – セクションに追加
  • 🎨 Wix – HTML埋め込み機能で追加
  • 📱 Squarespace – コードブロックに貼り付け

🔄Instagram最新投稿を自動反映する方法

新しいInstagram投稿をサイトに表示する手順：

  1. 新しい投稿をアップ
  2. 投稿URLをコピー（instagram.com/p/新しいID/）
  3. サイトのコードを更新（古いIDを新しいIDに変更）
  4. 保存・公開で新しい投稿が表示

💡 効率的な更新のコツ：

  • 📅 定期更新 – 週1回など決まったタイミングで一括更新
  • 📝 IDリスト管理 – スプレッドシートで新しい投稿IDを管理
  • 👥 チーム運用 – SNS担当者がIDをメモ、Web担当者が更新
  • 🔗 ブックマーク活用 – このページをブックマークして素早くアクセス

🎵TikTok埋め込み方法

埋め込みたいTikTok動画のページで、「共有」ボタンから「埋め込み」を選択します。

✨ このコードで何ができる？

  • 📱 TikTok動画をそのまま再生 – 音声付きで自動再生・ループ再生
  • 👤 作成者情報も表示 – ユーザー名、フォロワー数、プロフィール画像
  • 💖 いいね・コメント数表示 – エンゲージメントもリアルタイム更新
  • 🔗 TikTokアプリへのリンク – クリックで元動画へ誘導
TikTok埋め込み – 完全版
TikTok埋め込み
💡 URL例： https://www.tiktok.com/@saigate_mama/video/1234567890123456789
🔍 動画IDの見つけ方： TikTok動画のURL「tiktok.com/@ユーザー名/video/1234567890123456789」の数字部分

🔧 修正が必要な箇所（2箇所）

必ず両方変更してください：

  1. 📝 cite="https://www.tiktok.com/@ユーザー名/video/動画IDをここに入力"
  2. 📝 data-video-id="動画IDをここに入力"

実際の例：

  • ✅ cite="https://www.tiktok.com/@saigate_mama/video/7234567890123456789"
  • ✅ data-video-id="7234567890123456789"

⚠️ 注意： ユーザー名と動画IDの両方を正確に入力してください。

📋 実際の修正例

❌ 修正前

cite="https://www.tiktok.com/@ユーザー名/video/動画IDをここに入力"
data-video-id="動画IDをここに入力"

✅ 修正後

cite="https://www.tiktok.com/@saigate_mama/video/7234567890123456789"
data-video-id="7234567890123456789"
TikTok埋め込み – WordPress用
TikTok埋め込み – シンプル版（どこでも使える）

💡 シンプル版の使い方

このコードはどんなサイトでも使用できます。2箇所の修正を忘れずに！

  • 📝 cite=”…” の部分
  • 📝 data-video-id=”…” の部分

🔄TikTok最新動画を自動反映する方法

新しいTikTok動画をサイトに表示する手順：

  1. 新しい動画をアップ
  2. 動画URLをコピー（tiktok.com/@username/video/新しいID）
  3. サイトのコード2箇所を更新
    • cite=”…” の部分
    • data-video-id=”…” の部分
  4. 保存・公開で新しい動画が表示

💡 TikTokの更新コツ：

  • 🎯 2箇所必須 – citeとdata-video-idの両方を必ず更新
  • 📱 動画IDをメモ – 動画アップ時にIDを記録しておく
  • 🔄 バックアップ – 古いIDも保存して切り替えが可能に

🐦X (旧Twitter) 埋め込み方法

埋め込みたいツイートの右上「…」メニューから「ツイートを埋め込む」を選択します。

✨ このコードで何ができる？

  • 📝 ツイート内容を完全表示 – テキスト、画像、動画、リンクプレビュー
  • 📊 エンゲージメント表示 – リツイート数、いいね数、返信数
  • 🔗 元ツイートへのリンク – クリックでX（Twitter）の投稿ページへ
  • 🎨 ダークモード対応 – サイトのデザインに合わせて選択可能
X (Twitter)埋め込み – 完全版
X (Twitter) 埋め込み
💡 ツイートIDの例： 1234567890123456789
🔍 ツイートIDの見つけ方： ツイートのURL「twitter.com/ユーザー名/status/1234567890123456789」の数字部分

🔧 修正が必要な箇所

必ず変更してください：

  • 📝 href="https://twitter.com/ユーザー名/status/ツイートIDをここに入力"
  • 🎯 「ユーザー名」 → 実際のユーザー名（@マークなし）
  • 🎯 「ツイートIDをここに入力」 → 実際のツイートID

実際の例：

  • ✅ href="https://twitter.com/saigate_mama/status/1234567890123456789"

⚠️ 注意： ユーザー名に@マークは付けないでください。

📋 実際の修正例

❌ 修正前

href="https://twitter.com/ユーザー名/status/ツイートIDをここに入力"

✅ 修正後

href="https://twitter.com/saigate_mama/status/1234567890123456789"
X (Twitter)埋め込み – WordPress用
X (Twitter)埋め込み – シンプル版（どこでも使える）

💡 シンプル版の使い方

このコードはどんなサイトでも使用できます。ユーザー名とツイートIDを変更してください。

🎨表示カスタマイズオプション

ダークテーマ

🔧 修正箇所： href="ツイートURL" → 実際のツイートURLに変更

会話を隠す

🔧 修正箇所： href="ツイートURL" → 実際のツイートURLに変更

幅を指定

🔄X (Twitter)最新ツイートを自動反映する方法

新しいツイートをサイトに表示する手順：

  1. 新しいツイートを投稿
  2. ツイートURLをコピー（twitter.com/username/status/新しいID）
  3. サイトのコードを更新（古いツイートIDを新しいIDに変更）
  4. 保存・公開で新しいツイートが表示

💡 X (Twitter)の更新コツ：

  • 🎯 ユーザー名確認 – @マークは不要、ユーザー名のみ使用
  • 📝 ツイートID管理 – 19桁の数字IDを正確にコピー
  • 🔄 リプライチェーン – 会話表示のON/OFFも設定可能

🌐どんなサイトでも使用する方法

📝 WordPress

使用方法：

  1. 投稿・ページ編集画面を開く
  2. 「カスタムHTML」ブロックを追加
  3. 上記のWordPress用コードを貼り付け
  4. プレビューで確認後、公開

💻 HTML/CSS サイト

使用方法：

  1. HTMLファイルを開く
  2. <body>タグ内に完全版またはシンプル版コードを貼り付け
  3. 投稿IDを変更
  4. ファイルを保存してアップロード

🛒 Shopify

使用方法：

  1. 管理画面 → テーマ → アクション → コードを編集
  2. 表示したいページのテンプレートを開く
  3. シンプル版コードを貼り付け
  4. 保存して確認

🎨 Wix

使用方法：

  1. エディター画面を開く
  2. 「追加」→「その他」→「HTML埋め込み」
  3. シンプル版コードを貼り付け
  4. 投稿IDを変更して適用

📱 Squarespace

使用方法：

  1. ページ編集画面を開く
  2. 「ブロックを追加」→「コード」を選択
  3. シンプル版コードを貼り付け
  4. 投稿IDを変更して保存

⚡ その他のCMS

共通の方法：

  • 📝 HTML編集機能を探す
  • 🔧 カスタムコード機能を使用
  • 📋 シンプル版コードを貼り付け
  • 🎯 投稿IDを実際のものに変更

🎯 成功のポイント

  • 🔍 シンプル版を推奨 – どんなサイトでも確実に動作
  • 📱 モバイル確認必須 – スマホでの表示を必ずチェック
  • 🔄 テスト投稿で練習 – まずテスト用の投稿で動作確認
  • 💾 バックアップ作成 – 元のページの状態を保存してから作業

🚀全SNS共通：効率的な更新運用方法

🤖 将来的な自動化について

完全自動化には以下の方法がありますが、技術的知識が必要です：

  • 📡 SNS API – Instagram Graph API、Twitter APIなどを使用
  • ⚙️ RSS フィード – 一部のSNSでRSS経由取得
  • 🔌 専用ツール – Zapier、IFTTTなどの自動化サービス
  • 💰 有料サービス – 専門の埋め込みサービスを利用

推奨：手動更新から始めて、必要に応じて自動化を検討しましょう。

💡 プロのコツ

複数投稿を表示したい場合：

  • 🎯 メイン投稿 – 最新の重要な投稿を1つ大きく表示
  • 📱 サブ投稿 – 過去の人気投稿を小さく2-3個表示
  • 🔄 ローテーション – 月1回程度でサブ投稿を入れ替え

🚀導入のメリット

📱リアルタイム更新

SNS投稿でお店の雰囲気や新商品をタイムリーに伝達

🔄自動同期

SNS投稿だけでウェブサイトも自動更新

📱レスポンシブ対応

どのデバイスからでも美しく表示

  1. ホーム
  2. SNS埋め込み