Instagramをさらに活用！ブログへの埋み方法まとめ

Instagramの普及に伴って、ウェブサイトやブログにInstagramを組み込み、画像による訴求効果を高める手法が広まりつつあります。Instagramの埋め込み方は大きく分けて4つの方法に分けられますが、その難度は大きく異なります。ここでは、外部呼び出しによるブログとの連携に必要なAPIの手続き、もっと手軽にできる埋め込みコードの取得、Wordpressのプラグイン、ウェブサービスの活用といった埋め込み方法などについて紹介していきます。

Instagram APIによる埋め込み

Instagram APIによる埋め込み機能を利用するには、以下の4つの手順を踏み、最終的にはphpやJavascriptなどのスクリプトを自作するかWordpressのプラグインを介して組み込む必要があります。

Instagram Developerへの開発者登録
Instagram アプリ（埋め込む機能）の登録
アクセストークンの取得
APIによるデータ取得

APIとは

Application Programming Interface（アプリケーション・プログラミング・インタフェース）の略称で、異なるサービス間でアプリケーションの機能を共有するための仕様を指します。おもに開発者向けであり、Google、Microsoft、Twitter、Facebook、Amazonなどで提供されています。原則として開発者登録や申請が必要となるため利用できるまでには手間がかかりますが、表示項目や機能をカスタマイズしながらウェブサイトやブログなどで流用できるメリットがあります。

Instagram Developerへの登録手順

公式のInstagram Developer Documentationにアクセスします。

画面上部の「ログイン」をクリックします。

ログインが完了したら、前の画面に戻ります。画面上部の「Manage Clients」をクリックすると

ウェブサイト：ブログまたはサイトのURL
Phone number：電話番号
What do you want to build with the API?：このAPIを利用してやりたいこと

などの入力項目が表示されますので、すべて入力します。そして、利用規約を確認の上、チェックボックス「I accept the API Terms of Use and Brand Guidelines」にチェックを入れてから「Sign up」をクリックします。再度、前の画面に戻りますので「Register Your Application」をクリックし、APIの管理画面に移動します。

Instagram Developerへの登録は以上です。

Instagram アプリ（Cliant）の登録手順

「Register a New Cliant」をクリックします。

APIの入力画面が表示されます。各項目の入力後に「Security」タブをクリックします。項目の意味は以下のとおりです。

Application Name:アプリの名称（必須）
Description:アプリの説明文（必須）
Company Name:組織名（任意）
Website URL:サイトのURL
Valid redirect URIs:認証後に遷移する画面（サイトのURLと同じでOK）
Privacy Pulicy URL：個人情報保護方針のURL（任意）
Contact email:メールアドレス（必須）

両方のチェックボックスを外し「Type the words above」に表示されているアルファベットを入力してから「Register」をクリックします。

Manage Clientsの見出しのページに遷移し「Successfully registered 'アプリ名'のメッセージと、CLIENT IDが表示されます。CLIENT IDは次の手順で必要になりますので、メモ帳やテキストファイルなどにコピーしておきましょう。

Instagram アプリの登録は以上です。

アクセストークンの取得

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

上記URLのCLIENT-IDを取得したCLIENT-IDに、REDIRECT-URIをValid redirect URIsに入力したURLに置き換え、ブラウザでアクセスします。以下のような画面が表示された場合は「Instagram Developerへの登録手順」で使用したアカウントでログインします。

認証画面が表示されますので「AUTHORIZE」をクリックします。

REDIRECT-URIに入力したアドレスのサイトが表示され「#access_token=」以降にアクセストークンが表示されます。アクセストークンも次の手順で必要になりますので、メモ帳やテキストファイルなどにコピーしておきましょう。

APIによるデータ取得

https://api.instagram.com/v1/users/self/media/recent/?access_token=ACCESS-TOKEN

上記URLのACCESS-TOKENを取得したアクセストークンに置き換え、ブラウザでアクセスします。スクリプトが表示されれば成功で、外部呼び出しが可能となります。

コードによるInstagramの埋め込み

個別の投稿だけをブログに埋め込みたい場合は、埋め込みコードが手軽かつ便利です。

WebブラウザからInstagramにログインします。

埋め込みたい投稿を選択し右下の「…」をクリックすると、以下のようなボタンが表示されますので「埋め込み」をクリックします。

表示されたコードを選択して右クリック、または「埋め込みコードをコピー」をクリックしてソースをクリップボードにコピーします。写真のみを埋め込みたい場合は、埋め込みコードをコピーする前にチェックボックス「キャプションを追加」のチェックを外します。

貼り付けたいページにHTML形式で挿入すれば完了です。

WordpressプラグインによるInstagramの埋め込み

Wordpress（無料登録でなくサーバーにインストールされたもの）で構築されたブログやウェブサイトでは、プラグインを利用した埋め込みも可能です。ここではWordpressバージョン4.8に対応しているお薦めのプラグインを紹介いたします。プラグインはWordpressのプラグインメニューの「新規追加」からキーワードにプラグイン名を入力して検索するか、後述のリンク先から入手できます。

Instagram Feed

投稿、固定ページ、ウィジェットなどにInstagramのフィードを埋め込むプラグインです。フィードの大きさや表示項目のカスタマイズができます。Instagram Feedを利用するためには Instagram APIのアクセストークンを取得しておく必要があります。

Intagrate Lite – Instagram Image Publishing

Instagramの画像をWordpressに自動投稿するプラグインです。埋め込みとは少し違いますが、プラグイン設置後の画像だけでなく過去の画像も投稿できますので、さかのぼって連動したい場合に便利です。

ウェブサービスを利用したInstagramの埋め込み

ウェブサービスでInstagramの埋め込みを行う場合は、好みのサンプルをベースに埋め込みコードが生成できるSnapWidget（スナップウィジェット）が便利です。無料でも利用できFacebookやTwitterにも対応していますので、これらを併用した連携も可能です。以下に利用手順を説明します。

SnapWidgetのサイトのログインページにアクセスし、アカウントを作成またはFaccebookアカウントでサインインします。

アカウントの認証に成功するとダッシュボードが表示されますので、画面右上の「CREATE A NEW WIDGET」または「BROWSE ALL WIDGET」をクリックします。

利用可能なサンプルが表示されます。レイアウトの下にあるタグは利用可能なプラン「ALL」「FREE」「PRO」レイアウトの種類「GRID」「BOARD」「MAP」「SCRulLING」「SLIDESHOW」対象のSNS「INSTAGRAM」「FACEBOOK」「TWITTER」を表しています。利用したいレイアウトを選択し、下部の「CREATE A NEW WIDGET」をクリックします。