ワードプレス内の固定ページにインスタグラムを表示させるためにプラグインを探しましたが、なかなか自分の好みのものがないので、いろんなサイトで 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 を下の●～●の間に入れて、ブラウザからアクセスする。
この画面が表示されるので「Autorize」 をクリックする。
リダイレクト後、ブラウザののアドレスバーに以下のようなアクセストークンが表示される。
「access_token=」以降の文字列がアクセストークン。
この例では「123456789.abcdefg」。（実際はもっと長いんですけどね。）
https://●リダイレクト URL●/#access_token=123456789.abcdefg
インスタグラムのデータを取得する
以下の URL にアクセスするとインスタグラムのデータを JSON 形式で取得できる。
インスタグラムのデータを表示する
僕は以下のコードを子テーマの「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');
ここまで来るのに結構時間かかりましたよ～。
以下のサイトを参考にさせていただきました、ありがとうございました。
- Instagram APIでwebサービスを作りたい全ての人に向けて書きました
- Instagram APIで取得できるJSONからいろんな情報を表示する – 大阪市天王寺区SOHOホームページ制作 – デザインサプライ-DesignSupply.-
- Instagram APIを使って自分の投稿をウェブサイトで表示する – 趣味は写真で、WEB制作の仕事をしている人の備忘録。
- インスタグラムのタイムライン的なのをつくる – Qiita
- WordPressで現在時刻を利用すると9時間ずれてしまう問題 – Qiita
結構頑張ったのに、来年には使えなくなっちゃうのが残念ですが…まぁ楽しかったからいいや。
コメント