[英]Instagram async feed
在这篇文章之后如何获取用户的Instagram feed ,我用它来显示最后一张图片
function fetchData($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_TIMEOUT, 20);
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
$result = fetchData("https://api.instagram.com/v1/users/123456789/media/recent/?access_token=123456789.123asdsd.asdadasdas23423423&count=1");
$result = json_decode($result);
foreach ($result->data as $post) {
if(empty($post->caption->text)) {
// Do Nothing
}
else {
// Display img
}
}
怎样才能异步加载? 有时甚至需要2-3秒来加载,并延迟了整个页面的显示时间。 谢谢您的时间和帮助!
编辑
tks到@steve,我每小时通过查询instagram api来解决它,并将响应保存到instagram.json
get-social-media.php
function get_instagram($user_id=instagram_user_id,$count=1){
$instaurl = `https://api.instagram.com/v1/users/`.$user_id.`/media/recent/?access_token=instagram_access_token&count=`.$count;
$instacache = `instagram.json`;
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_URL,$instaurl);
$instadata=curl_exec($ch);
curl_close($ch);
if(file_exists($instacache) && filemtime($instacache) > time() - 60*30){
//echo "ok instagram";
} else {
$jsonInstaData = json_decode($instadata,true);
file_put_contents($instacache,json_encode($jsonInstaData));
}
}
echo get_instagram();
以及用于前端social-media-block.phtml的ajax(magento和bootstrap)
jQuery(document).ready(function($) {
$("#instagram-img").html("");
$.ajax({
type: "GET",
async: true,
contentType: "application/json; charset=utf-8",
url:"resources/socialmedia-cache/instagram.json",
dataType: "json",
cache: true,
beforeSend: function () {
$("#loading").show();
},
success: function (data) {
console.log(data);
$("#loading").hide();
if (data == "") {
$("#InstaContainer").hide();
} else {
$("#InstaContainer").show();
for (var i = 0; i < data["data"].length; i++) {
var dataForJson = JSON.stringify(data.data[i]);
var date = new Date(parseInt(data.data[i].caption.created_time) * 1000);
$("#instagram-img").append("<a target=`_blank` href=`" + data.data[i].link + "` title=`" + data.data[i].caption.text + "`><img src=`" + data.data[i].images.low_resolution.url + "` class=`img-responsive socialmedia-img`></img></a>");
$("#instagram-img").append("<p align=`left`><script>" + "jQuery(document).ready(function() { jQuery(`a.timeago`).timeago();});" + "</" + "script><a class=`timeago` style=`color:#484848;` title=`" +(date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear()+", "+date.getHours()+":"+date.getMinutes()+ "`>" +(date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear()+", "+date.getHours()+":"+date.getMinutes()+ "</a></p>");
}
}
}
});
});
这也适用于Facebook
对于pinterest,我使用http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1&q=https://www.pinterest.com/MyPinterest/feed.rss快速解决方案将rss转换为json。 由于我需要大于236像素的图像,因此下一个解析为736像素。 此外,还需要从内容中提取img src
var string = data.responseData.feed.entries[i].content;
var filtered = string.replace('/236x/', '/736x/');
var source = filtered.match(/src\s*=\s*"(.+?)"/);
可能不是最好的代码,但至少是一个可行的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.