テクニカルノート

Instagram のウィジェットは、FacebookやTwetterのように公式に提供されていないので、外部サービスをつかったりすることが多いみたいです。
そこで、APIからデータを取得して自前でHTMLを生成する方法を試しました。

必要なものは、

• Instagramユーザーのアクセス許可
• Instagramユーザーアクセストークン

なので、あらかじめ取得しください。

WP側でインスタのウィジェットHTMLを生成するのですが、Instagram基本表示APIへのアクセスは一日200回までなので、ajaxで返すHTMLはupdate_optionでキャッシュしておくことにします。

以下、function.phpにコピペします。

//jquery
function add_my_ajax() {
?>
<script>
	jQuery(document).ready(function($) {
	    $.ajax({
		type: 'POST',
		url: '<?php echo admin_url( 'admin-ajax.php'); ?>',
		data: {
		    'action' : 'view_instagram',
		},
		success: function( response ){
			$('#instagram-list').html(response);
		}
	    });
	    return false;
	});	
</script>
<?php
}
add_action( 'wp_head', 'add_my_ajax', 100 );

//インスタデータの読み込みAJAX
function view_instagram(){
	$insta_time = get_option('insta_access_timestamp' , time());//前回APIアクセス時からの経過時間
	$html = get_option('insta_html');
	//https://developers.facebook.com/docs/graph-api/overview/rate-limiting
	//APIへのアクセスは一日200回までなので、10分に一回再読み込み
	if (!$html || $insta_time < time() - 600){
		$html = get_insta_data();
		update_option('insta_access_timestamp' , time());//キャッシュしたタイムスタンプを記録
		update_option('insta_html' , $html);//HTMLをキャッシュ
	}
	echo $html;
	die();
}
add_action( 'wp_ajax_view_instagram', 'view_instagram' );
add_action( 'wp_ajax_nopriv_view_instagram', 'view_instagram' );

//インスタAPIからデータを取ってHTML作成
function get_insta_data(){
	$conn = curl_init(); // cURLセッションの初期化
	curl_setopt($conn, CURLOPT_RETURNTRANSFER, true); // 実行結果を文字列で返す
	curl_setopt($conn,CURLOPT_SSL_VERIFYPEER, false); // サーバー証明書の検証をしない

	//インスタ長期アクセストークンの更新　2021/02/25追加
	$access_token = get_option('insta_access_token' , "Instagramユーザーアクセストークン");
	$url = "https://graph.instagram.com/refresh_access_token"
		. "?grant_type=ig_refresh_token"
		. "&access_token=$access_token";
	curl_setopt($conn, CURLOPT_URL, $url); //URLの設定
	$res =  curl_exec($conn); //コンテンツの取得
	$array_res = json_decode($res,true);
	if ($array_res['expires_in']';
				$html .= '';
				$html .= '';
				$count -= 1;
			}
			if ($count
 
あとは、ウィジェットのカスタムHTMLあたりをつかって、書き込む要素を作ります。

こんな感じで表示されます。あとはCSSでどうにでもできますね。

わかると思いますけど、HTMLは次の部分をいじくればOK
			if ($image_url){
				$html .= '';
				$html .= '';
				$html .= '';
				$count -= 1;
			}