アクセシビリティ重視のウェブ制作

チャコウェブ

株式会社CyberCats

受付時間:9:00~17:00(月曜日~金曜日)

中小企業のホームページ制作で事業の価値を引き出します。良いホームページの作り方や運営の方法、集客に役立つヒントをお届けします。

【Instagramをホームページに埋め込み新たなファンを獲得しよう】Instagram埋め込み方法を画像で解説-CHACO-WEBかんたんマニュアル

【Instagramを埋め込み、映えるホームページにしよう】Instagram埋め込み方法を画像で解説-CHACO-WEBかんたんマニュアル

CHACO-WEBかんたんマニュアルとして、今回はWordPressを利用したInstagramの埋め込み方法をご紹介します。

手軽に美しい写真が共有できるアプリとして、特に今では飲食店などでも爆発的な人気が出始めているInstagram。そのInstagramをホームページに埋め込むことにより、美しい写真でホームページが豊かな表情を持ちます。

またホームページからお客様をInstagramへ誘導もできるようになりますので、フォロワー数増加が期待できます。

難易度はそこまで高くありませんので、ホームページにWordPress管理画面がある方でInstagramを利用している方は是非トライしてみてください。

今回の記事では2通りの埋め込み方法をお伝えしますが、実際の作業はパソコンからすることをオススメします。

特定の画像のみInstagramを埋め込む方法

初めにお伝えするのは、特定の画像のみ埋め込む方法です。

Instagramに投稿された全ての写真ではなく、ある特定の写真のみの埋め込みとなりますので、例えば合計5枚の写真を埋め込む場合は、同様の作業を5回繰り返すことになります。

 

Instagramにログインします。

まずは、Instagramにログインします。

Instagramにログインします。

現在はコロナ禍によりテレワークを実施されている企業様も多いと思います。ログイン環境が普段とは異なる場所の場合、ログイン制限がかかることもありますので、ご注意ください。

画像の埋め込みコードを取得します。

ホームページへ埋め込みをしたい投稿画像をクリックし、画像の詳細画面へ移動します。

画像の右上に3つの「・・・」ボタンがありますので、クリックします。

画像の右上に3つの「・・・」ボタンがありますので、クリックします。

埋め込みボタンを押し、埋め込みコードをコピーします。

https://gyazo.com/59dbed582c79e7862327b0d747ec2bcf

埋め込みボタンを押し、埋め込みコードをコピーします。

WordPress管理画面に埋め込みコードを入力します。

WordPress管理画面へアクセスし、テキストモードの上、コピーしたタグを貼り付けます。
WordPress管理画面へアクセスし、テキストモードの上、コピーしたタグを貼り付けます。

プレビューモードで、ホームページに反映されているか確認をし、最後に公開をして完了です。

 

Instagram投稿画像全てを埋め込む方法

続いてご紹介する方法は、Instagramに投稿された画像全てを埋め込む方法です。

この方法で一度埋め込みをすると、次回からはInstagramを更新するだけでホームページも自動で連動されるので、管理が楽になります。

実際に埋め込みをしている事例をご覧ください。

【神奈川県横浜市港北区・緑区・神奈川区の放課後等デイサービスホームページ制作事例】

【兵庫県明石市のベーカリーショップホームページ制作事例】

【東京都目黒区品川区ペットホテル&トリミングサロンホームページ制作事例】

【山形県山形市産婦人科病院ホームページ制作事例】

【神奈川県大和市中国料理レストランホームページ制作事例】

 

WordPress管理画面にプラグインを導入します。

この埋め込みを実装するには、WordPressのプラグインが必要になります。

プラグインを利用することによって、WordPressバージョンとの互換性次第でホームページに不具合が起きる可能性もあります。バックアップを取りながら慎重に進めてください。

「Smash Balloon Social Photo Feed」というプラグインをインストールし、有効化します。

 

プラグインの設定をします。

プラグインが有効化されますと、メインメニューに「Smash Balloon Social Photo Feed」が追加されますので、「設定」画面に移動します。

設定ページの上部にあります、青いボタンからInstagramのアカウントに接続をします。
この時点でパソコンから該当のInstagramアカウントにログインをしておくとスムーズです。

Instagramのアカウントに接続をします。

接続が完了すると、以下のような表示になりますので、こちらで設定は完了です。

接続が完了すると、以下のような表示になりますので、こちらで設定は完了です。

 

ショートコードを取得し、表示させたい場所へ貼り付けします。

設定完了後、「3.フィードの表示」というタブへ移動し、ショートコードを取得、コピーします。

設定完了後、「3.フィードの表示」というタブへ移動し、ショートコードを取得します。

コードがコピーできたら、「指定の画像のみ埋め込む方法」と同様に、埋め込みをしたいページに貼り付けをして完了です。

表示デザインカスタマイズも可能です。

HTMLの専門技術が必要となりますので、この記事では詳細は割愛いたしますが、こちらのプラグインでは、表示デザインのカスタマイズも可能です。

パソコンでの表示配列とスマホでの表示配列を変えたりと、ホームページに合わせて細かな調整ができるのが素晴らしいですね。

まとめ

今回の記事では、Instagramの投稿画像をホームページに埋め込む方法を2通りご紹介しました。

Instagramをビジネスとして利用されている方も多いと思います。お客様の目に引くような写真をホームページにも埋め込んでみてはいかがでしょうか?

また、以前の記事で、Instagramに写真を投稿するだけで、ホームページのブログにも同時に自動投稿される機能もご紹介しています。そちらも合わせてご覧ください。


          この記事を書いた人        
タク制作部長
株式会社Cyber Cats 制作部長。2011年よりWebサイト制作業界に入り、日々デザインとにらめっこしています。 美しい文字組みに関心があり、どうしたら相手に伝わるデザインができるか切磋琢磨する日々です。 奇抜な料理とロック好き。
詳しいプロフィールはこちらから
SNSでフォローする