インスタグラムをワードプレスで表示

2019.04.24
スポンサーリンク

ワードプレス内の固定ページにインスタグラムを表示させるためにプラグインを探しましたが、なかなか自分の好みのものがないので、いろんなサイトで Instagram API を使用しての解説を参考に自作してみました。

作っておきながら残念な話なのですが Instagram API は 2020年には利用できなくなるそうです。
まぁ、それでも作りたくなっちゃったので、そん時はそん時で…。

スポンサーリンク

インスタグラム開発者サイトでアプリ登録

まず、インスタグラム開発者サイトに行ってアプリを登録します。

この画面で「Register Your Application」をクリック。

この画面で「Register a New Client」をクリック。

次の画面で「Security」タブをクリック。
「Disable implicit OAuth:」のチェックを外す。
外したら「Details」タブをクリック。

この画面で必要事項を記入する。
赤く囲んだ箇所が入力必須項目。

Application Name アプリ名
Description 説明
Website URL ウェブサイトのURL
Valid redirect URIs リダイレクト URL
(Website URL と同じでいいみたい。)

入力したら「Register」をクリック。

この画面が出たら完了。

再編集したい場合は「MANAGE」をクリックして再編集する。

アクセストークンを取得する

アプリ登録完了画面の「CLIENT ID」と「Valid redirect URIs」で入力した URL を下の●～●の間に入れて、ブラウザからアクセスする。

https://api.instagram.com/oauth/authorize/?client_id=●CLIENT-ID●&redirect_uri=●リダイレクトURI●&response_type=token&hl=en

この画面が表示されるので「Autorize」 をクリックする。

リダイレクト後、ブラウザののアドレスバーに以下のようなアクセストークンが表示される。
「access_token=」以降の文字列がアクセストークン。
この例では「123456789.abcdefg」。（実際はもっと長いんですけどね。）

https://●リダイレクト URL●/#access_token=123456789.abcdefg

インスタグラムのデータを取得する

以下の URL にアクセスするとインスタグラムのデータを JSON 形式で取得できる。

https://api.instagram.com/v1/users/self/media/recent?access_token=●アクセストークン●

インスタグラムのデータを表示する

僕は以下のコードを子テーマの「functions.php」に記述しました。
表示画像は「150px x 150px」、動画は「640px x 640px」で表示することにしました。

ショートコード「instagram_disp」で呼び出すことが可能です。

このサンプルのページはこちらです。


/************************************************
インスタデータ表示
表示画像 thumbnail 150x150
表示動画 standard_resolution 640x640
************************************************/
function disp_instagram(){
	$option = [
		CURLOPT_RETURNTRANSFER => true, //文字列として返すかどうか
		CURLOPT_TIMEOUT        => 3, // タイムアウト時間
	];

	$myAccessToken = '●アクセストークン●';
	$count = 9; //表示件数
	$url = 'https://api.instagram.com/v1/users/self/media/recent/?access_token='.$myAccessToken."&count=".$count;

	$ch = curl_init($url);
	curl_setopt_array($ch, $option);

	$json    = curl_exec($ch);
	$info    = curl_getinfo($ch);
	$errorNo = curl_errno($ch);

	if ($errorNo !== CURLE_OK) {
		// 詳しくエラーハンドリングしたい場合はerrorNoで確認
		// タイムアウトの場合はCURLE_OPERATION_TIMEDOUT
		return [];
	}

	// 200以外のステータスコードは失敗とみなし空配列を返す
	if ($info['http_code'] !== 200) {
		return [];
	}


	//Json からデータを取得件数分書き出し
	$obj = json_decode($json);
	foreach($obj->data as $data){
		echo "<div class=\"toukou\">\n";
		//投稿日時と投稿へのリンク
		$uts = $data->created_time;
		$uts = $uts + 9 * 60 * 60;//WordPress では9時間ずれるので、取得したutsに9時間プラスする
		$created_date = date( "Y年n月j日",$uts);//日付
		$weekdays = ["日", "月", "火", "水", "木", "金", "土"];//曜日
		$created_day = date("w",$uts);
		$created_day = $weekdays[$created_day];
		$created_time = date( "G時i分s秒",$uts);//時刻
		echo "<p class=\"toukou_date\">\n<a href=\"".$data->link."\">".$created_date."(".$created_day.")</a><span>　".$created_time."</span></p>\n";
		//投稿文 ハッシュタグを取り除く
		$toukoubun = substr($data->caption->text, 0, strcspn($data->caption->text,'#'));
		echo "<p class=\"caption\">\n".$toukoubun."</p>\n";
		//「いいね！」とコメント数
		echo "<p class=\"like_comment\">いいね！ ".$data->likes->count."　　コメント ".$data->comments->count."</p>\n";

		/*****************************************************************************
		画像、動画
		画像のポップアップに「baguetteBox」を使用しているが、
		動画は無視されるので、リンクはかけずに大きいサイズを使用する。
		standard_resolution
		*****************************************************************************/
		//1枚目の画像、動画
		$type = $data->type;
		switch ($type) {
			case "video"://動画 Type = video
				echo "<div class=\"image_frame\">\n<video src=\"".$data->videos->standard_resolution->url."\"  muted controls></video></a>";//表示動画 standard_resolution 640x640
				break;
			case "image"://画像　Type = image
				echo "<div class=\"image_frame\">\n<a href=\"".$data->images->standard_resolution->url."\">";//リンク画像 standard_resolution 640x640
				echo "<img src=\"".$data->images->thumbnail->url."\" alt=\"写真の説明はありません。\"></a>";//表示画像 thumbnail 150x150
				break;
			default://複数の画像・動画がある場合は <div> タグのみ書き出し。　Type = carousel
				echo "<div class=\"image_frame\">\n";
		}
		//2枚目以降の画像、動画
		switch ($type) {
			case "carousel"://動画 Type = video
				foreach($data->carousel_media as $carousel_media){
					$type = $carousel_media->type;
					switch ($type) {
						case "image":
							echo "<a href=\"".$carousel_media->images->standard_resolution->url."\">";//リンク画像 standard_resolution 640x640
							echo "<img src=\"".$carousel_media->images->thumbnail->url."\" alt=\"写真の説明はありません。\"></a>";//表示画像 thumbnail 150x150
							break;
						case "video":
							echo "<video src=\"".$carousel_media->videos->standard_resolution->url."\"  muted controls></video></a>";//表示動画 standard_resolution 640x640
							break;
					}
				}
		}
			echo "</div>\n";//画像枠
		echo "</div>\n";//投稿枠
	}
}
add_shortcode('instagram_disp', 'disp_instagram');

ここまで来るのに結構時間かかりましたよ～。

以下のサイトを参考にさせていただきました、ありがとうございました。

結構頑張ったのに、来年には使えなくなっちゃうのが残念ですが…まぁ楽しかったからいいや。

コメント

スポンサーリンク