今や生活に切っても切り離せないものにソーシャルメディアがありますよね。
TwitterやFacebookに始まり、LINEなど世界中にたくさんのソーシャルメディアが存在しますが、今や欠かすことのできないソーシャルメディアの１つに「インスタグラム」があります。
写真や画像をアップロードするだけで簡単にオシャレなソーシャルメディアとして確立されているインスタグラム。何かとインスタ映えという言葉が流行っているので、アカウントを持っていなくても今や知らない人の方が少ないのではないでしょうか？
ブロガーにとっても、ある意味無視できないSNSの１つがインスタグラムですが、せっかく更新していくのであれば、ぜひともブログにも埋め込んでインスタグラムの表示をさせたいものです。
そこで今回は、WordPressにインスタグラムを埋め込んで表示させる方法を一挙まとめてご紹介したいと思います。
インスタグラムの写真単体を埋め込んで表示させる方法
まずは、1番シンプルな方法として、インスタグラムの写真や画像を単体で引用する形式でブログに埋め込んで表示させる方法をご紹介します。
対象のインスタグラムの写真を表示させたい場合には、この方法が1番簡単で手軽に埋め込むことができます。
埋め込みたいインスタグラムへアクセス
まずは、WordPressに埋め込みたいインスタグラムのアカウントへアクセスします。
今回は、WordPressのインスタグラムアカウントの一部の写真をお借りして埋めこんでみたいと思います。
埋め込んでみた参考としては以下のような形になります。
埋め込み用のコードを取得
埋め込みたい写真へアクセスし、右下の点線マークをクリックします。
続いて「埋め込み」という項目を選択し、表示されたコードをコピーします。なお、コピーは「埋め込みコードをコピー」をクリックするだけでOKです。
埋め込みサイズを調整
続いて埋めこんだ際のインスタグラム写真のサイズを調整します。
先ほどコピーしたデフォルトのコードのサイズは、横幅がかなり大きいコードとなり、そのため、埋めこんだ際にはみ出してしまうことが多々ありますので、埋め込む箇所の最適なサイズに調整が多くの場合、必要となります。
でも心配ご無用！サイズの調整方法は、コード内の『max-width:』の後に続く数字を変更するだけで簡単に調整することが可能です。
表示したい箇所に調整したコードを埋め込む
最後にコピーしサイズも調整したコードを埋め込みたい所定の箇所に、貼り付ければ完成です！
選んだインスタグラムの写真が表示されているか、確認してみましょう。
WordPressのサイドバーにインスタグラムを表示させる方法
続いてWordPressサイトのサイドバーにインスタグラムのアカウントを表示させたい場合は、InstaWidget（インスタウィジェット）という外部サービスを利用する埋め込み表示させる方法をおすすめします！
InstaWidget（インスタウィジェット）とは、ブログにインスタグラムの写真を表示させることができるウィジェットサービスで、ユーザー名やハッシュタグを入力するだけで、無料で埋め込みコードを生成してくれる優れものツールです。
ご自身のインスタグラムアカウントとWordPressを連動させて表示させることができる方法なので、一度埋め込んでしまえばずっと継続して表示させることができます。
WordPressでお使いのテーマにサイドバーがある方は、ぜひ設置してみましょう！
InstaWidget（インスタウィジェット）にアクセス
最初にInstaWidget（インスタウィジェット）へアクセスします。
https://instawidget.net/?hl=ja
続いて、「早速作ってみる」ボタンをクリックします。
ユーザー名やハッシュタグなどを指定
続いて、無料インスタグラムブログパーツ作成画面に移ります。ここでは、埋め込み表示させたいインスタグラムのアカウント名を指定したり、埋め込みたいサイズの指定、写真アルバムの表示有無など、様々な設定を変更することができます。
変更後、プレビューボタンをクリックすることで、右側の表示で確認することができますので、自分のブログにあった設定を変更をしてみましょう。
埋め込み用コードを取得して設置
埋め込み表示の設定が終わったら、コード欄下の「埋め込みコードを取得」ボタンをクリックし、ウィジェット用コードをコピーしましょう。また、サイズの調整はこの方法でも「width=」の後の数値を変更することで自由に設定することが可能です。
ご利用のWordPressテーマにもよりますが、WordPressの場合、外観からウィジェット、サイドバーからテキストを新たに追加して、先ほどのコードを貼り付ければ設置が完成です！
お使いのテーマで上記の方法で設置ができない場合は、sidebar.phpへコードを追加することで設置ができるテーマもあります。
「Instagram フィード」プラグインを利用して表示させる方法
WordPressを利用する上での特権といえば、何と言ってもプラグインの存在ですね。
もちろんWordPressにインスタグラムの表示を埋め込めるプラグインはいくつか存在しますが、今回は、インスタグラム埋め込み用プラグイン、「Instagram フィード」を使った埋め込みの方法をご紹介します。
Instagram フィードプラグインをインストール
まずはWordPress管理画面から、「Instagram フィード」プラグインをインストールします。
管理画面内の「プラグイン」＞「新規追加」＞「Instagram Feed」と入力しインストールした後にプラグインを有効化しましょう。
プラグインとインスタグラムアカウントを紐付け
続いて、Instagram フィードプラグインをご利用のインスタグラムアカウントとの紐付け作業を行います。
インストール済みプラグインから、Instagram フィードのsettingをクリックし、Configureタブの中から”Log in and get my Access Token and User ID“ボタンを選択します。
続いてインスタグラムへのログインを求める画面が表示されますので、ご利用のユーザーネームとパスワードを入力し、ログインします。その後で表示された「Access Token」と「User ID」をそれぞれ所定の欄に入力し、保存します。
埋め込み表示をカスタマイズ
次に、Customizeタブでは埋め込み表示のサイズや背景色などをカスタマイズすることができます。
- Number of Photos・・・最大33枚まで、埋め込み時のフィード写真枚数を変更できます
- Number of Columns・・・1列に写真を何枚並べて表示させるかを設定できます。
そのほかにも、ボタンの背景色やテキストの文言を変更することが可能ですので、自分のブログデザインに合うカスタマイズを見つけてみましょう！
埋め込み用コードを埋め込む
Display Your Feedタブから埋め込み用コードを取得しコピーしておきます。続いて、埋め込みたいページへアクセスし、取得したコードを設置するとインスタグラムの埋め込みが完成です！
Instagram フィードプラグインでは、インスタグラム側を更新していけば、自動的に埋め込んだ写真が更新され追加されますので、一度埋め込んでおくだけでOKです。
light box風に写真を埋め込みたいなら「InstaShow Lite」
これまでご紹介した方法でも、充分にWordPressにインスタグラムを埋め込むことが可能ですが、１つ変わり種として、「InstaShow Lite」というインスタグラム埋め込み用プラグインがあります。
InstaShow Liteプラグインの特徴
上記でご紹介した「Instagram フィード」プラグインでは、写真をクリックした際にはリンクでインスタグラムへ飛んでしまいます。でも、「InstaShow Lite」プラグインを利用すれば写真をクリックすると、light box風にその場で写真がぐわっと大きく表示されて、ハッシュタグや投稿の内容を見せることができます。
どちらのプラグインを利用するかは人それぞれ好みがあると思いますが、僕は「InstaShow Lite」の方がスタイリッシュな雰囲気をブログで出せるので断然おすすめです！
それでは以下では、InstaShow Liteプラグインの設定方法をご紹介しましょう。
InstaShow Liteプラグインをインストール
他のプラグインと同様に、InstaShow Liteプラグインもインストール方法は変わりません。
WordPress管理画面内から「プラグイン」の新規追加から「InstaShow Lite」と入力し検索します。「InstaShow Lite」が表示されたら、インストールとプラグインを有効化を完了させましょう。
プラグインとご利用のインスタグラムアカウントとを紐付け
プラグインを有効化したら、ご利用のインスタグラムアカウントとプラグインとの紐付け設定を行います。
この紐付け作業の際には、事前に同じブラウザ上でご利用のインスタグラムアカウントにログインしておくようにしましょう。
WordPress管理画面左のサイドから、「InstaShow」をクリックし、続いて表示される画面で青い「Authorize in Instagram」ボタンをクリックします。
さらにその後の「Authorize」ボタンを押すとご利用のインスタグラムアカウントとの紐付け作業が完了です。
InstaShow Liteの各種設定
続いてInstaShow Liteの各種設定を行います。
「Sizes」のGridのColumnsでは、写真を何枚横に表示させるかどうかを設定することができます。また、Rowsでは縦に表示させる枚数を設定します。
また、UIの項目では、矢印表示の有無や、左右にスワイプの稼働の有無などを設定することが可能です。そのほかにも色々と設定項目が多数用意されていますので、色々変更してみてご自身のお気に入りの設定を見つけてみてはいかがでしょうか。
ショートコードを貼り付けて設置
各種設定が終了したら、最後にインスタグラムの埋め込みを設置してみましょう。「GetShortcode」をクリックして表示されたショートコードが専用のコードとなります。
全てコピーして所定の位置にコードを設置して、インスタグラムの埋め込み表示がされていれば大成功です！お疲れ様でした。
まとめ
いかがでしたでしょうか？
今回は、インスタグラムの埋め込み表示させる方法をまとめて一挙にご紹介しました。
WordPressをご利用の場合は、そのまま埋め込んでもいいですし、プラグインを使って特殊にカスタマイズしてみるのもいいと思います！
ソーシャルメディアの中でも写真で魅力的に見せることができればバズる可能性の高いインスタグラムですので、ぜひご利用のブログにひとつ埋め込んで流入経路を増やしてみてはいかがでしょうか？
最後までお読みいただきありがとうございました。