Instagramリンクをブログに貼る方法｜埋め込みとロゴ付きリストの作り方

お店紹介の記事を書いていると、「ここはInstagramをチェックしてほしい！」と思うことがあるのですが、リンクの貼り方に頭を悩ますのです。

この記事ではInstagramのリンクの埋め込み方と、試行錯誤の末辿り着いた「Instagramロゴ付きお店リスト」の作り方を、備忘録としてまとめました。

1.インスタ投稿をそのまま埋め込んだ場合

投稿を埋め込んだ例↓。こちらの記事で使用しました。

この投稿をInstagramで見る

高嶋ちさ子(@chisakotakashima)がシェアした投稿

直接投稿を表示させたい時は「埋め込み」がわかりやすい。
仕様変更により、PCからしか設定できないのが難点。

手順（埋め込みコードの取得）

2.URLリンクをコピペした場合

URLをそのまま貼り付けると、このような表示になります。

Instagram

www.instagram.com

リンク先を開かない何もわからないので、そっけない感じ。

3.複数のInstagramリンクを載せたい場合

お店紹介のように複数リンクをまとめたい時は、埋め込んでいたら、スクロールが大変なので、Instagramロゴ付きリストにすると見やすく整理できます。
例えば、こちら⇩は、せんびる（船場センタービル）のお店リスト例。

ロゴがあることで「リンク先がInstagram」だと一目でわかるのがポイントです。

Instagramロゴ付きリストの作り方

1. Instagramロゴを準備

1. Instagramブランドリソースセンターから公式ロゴをダウンロード（ページ下部にリンクあり）。
2. ダウンロードしたPNGをWordPressのメディアライブラリにアップロード。
3. アップロード後、画像URLをコピー。

2. HTMLでリストを作成

カスタムHTMLで以下のように記載します。
ポイントはheight:1emにすることで、文字サイズに合わせて自動調整されます。

<ul>
  <li>
    <a href="https://www.instagram.com/お店１のリンク">
      <img src="https://PNGのリンク.png" alt="Instagram" style="height:1em; vertical-align:middle; margin-right:4px;">
      店名１
    </a>　詳細
  </li>
  <li>
    <a href="https://www.instagram.com/お店２のリンク">
      <img src="https://PNGのリンク.png" alt="Instagram" style="height:1em; vertical-align:middle; margin-right:4px;">
      店名２
    </a>　詳細
  </li>
</ul>

1. 「PNGのリンク」部分に先ほどコピーした画像URLを入れる。
2. お店の名前やリンク、営業時間などの詳細をそれぞれ記入。

ショートコード化してさらにラクに

毎回HTMLを書くのが大変であれば、functions.php にショートコードを登録するのもありです。

以下のようなコードを追加登録することで、例えば[shop] を入力することで簡単にお店リストを呼び出せるようになります。

※ 以下は実際に試したわけではなく、備忘録として記載しています。

functions.php に追加するコード

function my_shop_shortcode($atts) {
    $atts = shortcode_atts( array(
        'name' => '',   // お店名
        'url'  => '',   // Instagramリンク
        'detail' => '', // 営業時間や説明
    ), $atts, 'shop' );

    // Instagramアイコン画像URL（必要に応じて差し替え）
    $icon_url = 'https://PNGのリンク.png';

    $html = '<li>';

    if ( !empty($atts['url']) ) {
        $html .= '<a href="'. esc_url($atts['url']) .'" target="_blank" rel="noopener">
            <img src="'. esc_url($icon_url) .'" alt="Instagram" style="height:16px; vertical-align:middle; margin-right:4px;">
            '. esc_html($atts['name']) .'
        </a>';
    } else {
        $html .= esc_html($atts['name']);
    }

    if ( !empty($atts['detail']) ) {
        $html .= '　'. esc_html($atts['detail']);
    }

    $html .= '</li>';

    return $html;
}
add_shortcode('shop', 'my_shop_shortcode');

使い方（記事内）

冒頭のお店リストをショートコードで書くとこんな感じになります。

<ul>
[shop name="utatane" url="https://www.instagram.com/utatane_shop.osaka/" detail="9:30～17:30"]
[shop name="きものカンナ" detail="和装レンタル・販売"]
[shop name="tres june" url="https://www.instagram.com/tres_june/" detail="動画でよく目にする人気店。和洋ミックススタイル。11:00～17:00"]
</ul>

Instagram投稿の埋め込みについて

2025年現在、スマホアプリからは埋め込みコードを取得できず、PCブラウザからのみ取得可能になっています。
複数店舗をまとめて紹介したい場合は、今回の「ロゴ＋リンク方式」のほうがスッキリ表示できて便利です。

まとめ

小さな「不便だな…」を解決できた瞬間って、本当にテンションが上がります。
コツコツ整えるのは自己満足かもしれないけど、工夫を重ねて成長できることがあることは、すごく幸せなこと。

そんな小さな“わくわく”を、また一つ積み上げられた気がしています。
よかったらぜひ、あなたの記事やリスト作りにも役立ててください。