あなたのサイトもおしゃれに変身!WordPressにInstagramを連携する方法

今はいろいろなSNSを活用されている人が多いと思います。

Twitter、Facebook、Instagramなどなど。

そんなSNSを自分のブログと連携出来たらって考える人は多いと思います。

ただブログを始めたばかりの人や初心者の人は、どうやって連携すればいいのかわからない場合もありますので、今回はWordPressにInstagramを連携する方法を紹介していきます。

Instagramの投稿をWordPressに連携する方法

InstagramをWordPressに投稿するには、いくつかの方法があります。

◆ 直接投稿に共有する方法

◆ プラグインを使って投稿する方法

◆ その他の方法

それではこれからその方法を紹介していきます。

直接投稿に共有する

Instagramの投稿を、直接WordPressのページに投稿する場合はPCから行います
まずPCにてInstagramにログインします。
ログインしてWordPressに投稿したい写真を選んだら、画面右上の…マークをクリックします。
そうすると、下の図のようなポップアップが出てきますので、「埋め込み」をクリックします。
その後出てくる「埋め込みコード」をコピーして、WordPressの投稿ページにコピーします。
※WordPressにコピーする時は、投稿ページをテキストにして貼り付けてください。
無事に投稿ページに追加することができました。
簡単です(^^♪

プラグインを使って投稿する

Instagramの投稿をWordPressに共有するのにプラグインを使って行う方法もあります。
ここではおススメのプラグインを紹介させて頂きます。
今回紹介するのは、「Instagram Feed」というプラグインです。

Instagram Feedの特徴

Instagram FeedはInstagramに投稿した写真や動画をWordPressの記事内やサイドバーに簡単に表示できるプラグインになります。

◆ WordPressの記事やサイドバーにInstagramに投稿した写真や動画を表示できる

◆ ショートコードを使うので簡単に表示できる

◆ いろいろとカスタマイズができる

◆ レスポンシブ対応

◆ 無料版でも十分すぎるけど、さらに高機能の有料(Pro版)も用意されている

この様にサイドバーに表示したり
投稿記事内に表示したりできます。

Instagram Feedの登録の仕方

まずInstagram Feedをインストールします。
WordPressのダッシュボード左側メニューから、「プラグイン」⇒「新規追加」で検索窓に「Instagram Feed」と入れて検索してください。
「今すぐインストール」⇒「有効化」でInstagram Feedを使える状態にします。
有効化されると、ダッシュボード左側のメニューに「Instagram Feed」が表示されるのでクリックします。
初めに連携するInstagramアカウントの登録をします。
PC上でInstagramにログインをしている状態で、上の画像の赤枠部分をクリックすると自動的にログインしているInstagramアカウントを登録してくれます。
Instagramアカウントの登録が完了すると下の画像のように自分のアカウントが表示されるので、下の方にある「変更を保存」をクリックします。
「Check for new post every」を変更することにより反映する頻度を変えることができるので、頻繁にInstagramに投稿する人は1時間とかにしておいてもいいのかもしれません。
その他の設定は好みもあると思うので、初期設定でも十分だと思いますが、いろいろ試してみるのが良いと思います。

表示方法

Instagram Feedはショートコードを利用してWordPress内に表示します。
そのショートコードは上部タブの「3.Display Your Feed」をクリックするとショートコードが表示されます。
このショートコードを利用して表示していきます。

ショートコードの使用例

サイドバーなどに表示させる場合

WordPressダッシュボードの左側メニューから、「外観」⇒「ウィジェット」で表示させたい場所を選びます。

利用できるウィジェットから「テキスト」を選び表示させたいエリアに追加して、先程コピーしたショートコードをペーストすると画像のようにサイドバーに表示されます。

 

ページ内に表示する場合

ページ内に表示する場合も、ショートコードを表示したい場所へコピペするだけで表示されます。

ショートコードのカスタマイズ

ショートコードに少し手を加えるとカスタマイズすることができます。

instagram-feed num=8 cols=3

上記のようにショートコードの後ろに追加してあげることでカスタマイズができます。
※[ ]を付けてしまうとInstagramが表示されてしまうので、上記のショートコードは[ ]を外しています。
「num=○○」は表示する写真の枚数を表しています。上記の場合は8枚になります。
「cols=○○」は表示する列の数を表しています。上記の場合は3列になります。

その他の方法

WordPressにInstagramを表示させるには、直接投稿する方法と、プラグインを使って表示させる方法で十分だとは思いますが、その他の方法として、「別のサイトを使用する」という方法もあります。
今回紹介するのは「SnapWidget」というサイトです。
使い方はSnapWidgetのサイトに行き無料登録をしてください。
無料で登録をしたら下の画像のように表示されます。
表示したいタイプを選んで、「CREATE YOUR WIDGET」をクリックしてください。
そうすると表示の設定画面が表示されます。
表示内容は次の通りです。
Background Color 背景色を指定します
Description 説明を記入します
Hover Effect ホバー効果。ポインタを画像に合わせた時のアクションを指定します
Thumbnail Size 画像のサイズを指定します
Sharing Buttons 共有ボタンの表示
Photo Border 画像に枠線を付けるかどうかを選択
Responsive レスポンシブに対応するか選択します
設定を終えたら、「GET WIDGET」をクリックします。
下の図ようにコードが生成されますのでそれをコピーしてください。
あとはコピーしたコードを投稿ページにペーストすれば、Instagramを表示することができます。
補足として、SnapWidgetで表示されたInstagramの画像をクリックすると、自身のInstagramへ移動するのではなく、SnapWidget内の自身のページへ移動するかたちになります。

まとめ

以上がWordPressにInstagramを連携させて表示する方法になります。
やってみると意外と簡単にInstagramを自分のブログやHPに表示することができるので、是非試してみてください。
Instagramは写真がメインなのでインスタ映えの画像を表示することで、あなたのブログやHPのおしゃれ感がアップします。
最後まで読んでいただきありがとうございました。
最新情報をチェックしよう!
広告