Q&A
ソースコードは見やすくシンタックスハイライトしていただけると助かります。また「phpとjsの知識がないに等しい」だととても説明しづらくなってしまうため、自分が書いたコードの動作について理解している部分とそうでない部分を追記してもらえると答えやすくなります。
※phpとjsの知識がないに等しいです。
Instagram APIを取得して、サイトに画像を（件数やハッシュタグを設定して）表示したいと考えております。
画像の表示自体は『jquery-instagram』というjQueryを使用して表示することができました。
しかし、ソースにアクセストークンが表示されていると危険だとInstagramの解説サイトで知りました。
上記の方法で画像を表示することはできたのですが、**画像の表示件数（1件だけにしたい）を変更したりハッシュタグで画像を表示させる方法（何をどこに追記すればよいか）を教えて下さい。**初歩的な質問で申し訳ありませんが、使用しているソースなどを記載しますので、アドバイスをよろしくお願い致します。
◎html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.instagram.js"></script> <script type="text/javascript" src="js/instagram.js"></script> <title>無題ドキュメント</title> </head> <body> <div class="instagram"></div> </body> </html>◎instagram.php
<?php //POSTリクエストの場合のみ受付 if($_SERVER['REQUEST_METHOD'] == 'POST'){ //アクセストークン $access_token = "アクセストークン"; //JSONデータを取得して出力 echo @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token={$access_token}"); //終了 exit; } ?>◎instagram.js
// JavaScript Document
$(function(){
var $container = $(".instagram");
var html = "";
$.ajax({ url: "instagram.php",//PHPファイルのURL type:"POST", dataType: "json" }).done(function(data){ //通信成功時の処理 $.each(data.data,function(i,item){ var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得 var link = item.link; //リンクを取得 html += "<li><a href='" + link + "' target='_blank'><img src='" + imgurl + "'></a></li>"; }); }).fail(function(){ //通信失敗時の処理 html = "<li>画像を取得できません。</li>"; }).always(function(){ //通信完了時の処理 $container.html(html); });
});
◎jquery-instagram.js
/*
- Instagram jQuery plugin
- v0.2.1
- http://potomak.github.com/jquery-instagram/
- Copyright (c) 2012 Giovanni Cappellotto
- Licensed MIT
*/
(function ($){
$.fn.instagram = function (options) {
var that = this,
apiEndpoint = "https://api.instagram.com/v1",
settings = {
hash: null
, userId: null
, locationId: null
, search: null
, accessToken: null
, clientId: null
, show: null
, onLoad: null
, onComplete: null
, maxId: null
, minId: null
, next_url: null
, image_size: null
};
options && $.extend(settings, options); function createPhotoElement(photo) { var image_url = photo.images.thumbnail.url; if (settings.image_size == 'low_resolution') { image_url = photo.images.low_resolution.url; } else if (settings.image_size == 'thumbnail') { image_url = photo.images.thumbnail.url; } else if (settings.image_size == 'standard_resolution') { image_url = photo.images.standard_resolution.url; } return $('<div>') .addClass('instagram-placeholder') .attr('id', photo.id) .append( $('<a>') .attr('target', '_blank') .attr('href', photo.link) .append( $('<img>') .addClass('instagram-image') .attr('src', photo.images.low_resolution.url) ) ); } function createEmptyElement() { return $('<div>') .addClass('instagram-placeholder') .attr('id', 'empty') .append($('<p>').html('No photos for this query')); } function composeRequestURL() { var url = apiEndpoint, params = {}; if (settings.next_url != null) { return settings.next_url; } if (settings.hash != null) { url += "/tags/" + settings.hash + "/media/recent"; } else if (settings.search != null) { url += "/media/search"; params.lat = settings.search.lat; params.lng = settings.search.lng; settings.search.max_timestamp != null && (params.max_timestamp = settings.search.max_timestamp); settings.search.min_timestamp != null && (params.min_timestamp = settings.search.min_timestamp); settings.search.distance != null && (params.distance = settings.search.distance); } else if (settings.userId != null) { url += "/users/" + settings.userId + "/media/recent"; } else if (settings.locationId != null) { url += "/locations/" + settings.locationId + "/media/recent"; } else { url += "/media/popular"; } settings.accessToken != null && (params.access_token = settings.accessToken); settings.clientId != null && (params.client_id = settings.clientId); settings.minId != null && (params.min_id = settings.minId); settings.maxId != null && (params.max_id = settings.maxId); settings.show != null && (params.count = settings.show); url += "?" + $.param(params) return url; } settings.onLoad != null && typeof settings.onLoad == 'function' && settings.onLoad(); $.ajax({ type: "GET", dataType: "jsonp", cache: false, url: composeRequestURL(), success: function (res) { var length = typeof res.data != 'undefined' ? res.data.length : 0; var limit = settings.show != null && settings.show < length ? settings.show : length; if (limit > 0) { for (var i = 0; i < limit; i++) { that.append(createPhotoElement(res.data[i])); } } else { that.append(createEmptyElement()); } settings.onComplete != null && typeof settings.onComplete == 'function' && settings.onComplete(res.data, res); } }); return this;
};
})(jQuery);
回答1件
0
ベストアンサー
表示件数を1件にするについてはinstagramAPIのリファレンスにcountというパラメータを指定すれば出来ると書いてあるので指定すれば出来ると思います。
https://instagram.com/developer/endpoints/users/#get_users_media_recent_self
PHP
1// instagram.php 2// &count=1を追加 3echo @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token={$access_token}&count=1");
ハッシュタグの画像を表示するについては、エンドポイントが異なり以下のようなURLになります。
https://api.instagram.com/v1/tags/{tag-name}/media/recent?access_token=ACCESS-TOKEN
ハッシュタグのエンドポイントは以下を参考にしてください。
https://instagram.com/developer/endpoints/tags/#get_tags_media_recent
{tag-name}はURLエンコードした値を指定します。
PHP
1// instagram.php 2$hashtag = urlencode('焼肉'); // 焼肉タグを取得する場合 3echo @file_get_contents("https://api.instagram.com/v1/tags/{$hashtag}/media/recent/?access_token={$access_token}");
投稿2015/11/19 08:58
総合スコア25
あなたの回答
tips
プレビュー
