※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件
あなたの回答
tips
プレビュー