I have been trying to implement Masonry into this project for ages now, and I would be totally happy to have someone who can help me out. The internet is full of similar problems with masonry, but none of the given solutions could help me fix this.
Basically, I am pulling reviews from my Facebook page via the Open Graph API with the following code. The Facebook response data is converted from json to an array and then stored in the fb_reviews variable for later use. This one works as desired:
[...]
function (response) {
if (response && !response.error) {
//convert to array
fb_reviews = Object.keys(response).map(function (_) {
return response[_];
});
//only store needed data of fb_reviews[0]
fb_reviews = fb_reviews[0];
reviews();
}
;
});
[...]
This works perfectly. As you can see, the following reviews() function is called next to display the Facebook data, and this is where I would like masonry to kick in:
// DISPLAY REVIEWS
var print2 = "";
var reviews = function() {
var z = fb_reviews.length - 1;
var print2 = "";
for (i = 0; i < z; i++) {
//put together div container for every review object
print2 += '<div class="review" id="review-' + i + '"><div class="meta">' + fb_reviews[i].reviewer.name + ' rated ' + fb_reviews[i].rating + '/5</div><blockquote>' + fb_reviews[i].review_text + '</blockquote></div>';
}
print2 = $(print2);
// still works!!!
$("#reviews").append(print2);
//until here, everything still works, but the following does no longer work:
$("#reviews").masonry({
itemSelector: '.review'
});
}
;
The content is appended as desired etc., but I have literally tried any possible way to initialize masonry, including using all snippets I could find for appended content, e. g.:
$("#reviews").append( print2).masonry( 'appended', print2 );
There are many more, including reload and layout etc, but this does not make much sense to me, because there is no content in the #reviews-div-container until all Facebook reviews are loaded and appended.
Masonry ALWAYS seems to be called BEFORE the Facebook reviews are appended, no matter where I would position and spread the masonry code snippets.
So what is the best way to get Masonry initialized AFTER the Facebook data is stored and appended?
Thank you so much in advance for your help! Really appreciate your support
Simon
With our without an API Key, the google feed api appears to be skipping some of the latest articles in the RSS queried.
Even the default example from https://developers.google.com/feed/v1/devguide?csw=1 appears to be skipping some articles whatever feed I use, see example here: http://codepen.io/anon/pen/xbxxwE
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
I'm specifically using this RSS, http://blog.ncb.org.uk/syndication.axd and the first 2 articles are not appearing either.
Is there anyone else using the API and experiencing the same issue? Where should we go from here? Is there some sort of support for the Feed API?
Cheers,
P.
Google caches the results and it may take up to an hour for it to refresh. That is why the latest articles wont show immediately.
Here was someone having similar issues of the feed not getting updated. It could be that maintaining the Feed API is not a high priority to Google any more. Yahoo Pipes or Superfeedr could be good alternatives.
I have a site which shows the weather for the next three days of a previously specified city (default city or city searched using a form) --> http://agustin-suarez.com/demos/yield/index.html
I use the API of OpenWeatherMap.org to do so. I am also using Google Tag Manager to send some events to Google Analytics which save the results obtained in the website. This is the code for the Macro (custom html tag):
<script>
(function($) {
$(window).bind("load", function() {
var climaMañana = document.getElementById("reservar1Clima").value;
var precioMañana = document.getElementById("reservar1Precio").value;
var climaPasadoMañana = document.getElementById("reservar2Clima").value;
var precioPasadoMañana = document.getElementById("reservar2Precio").value;
var climaDosDias = document.getElementById("reservar3Clima").value;
var precioDosDias = document.getElementById("reservar3Precio").value;
dataLayer.push({'event': 'climaMañana', 'eventLabelMañana': climaMañana, 'eventValueMañana': precioMañana});
dataLayer.push({'event': 'climaPasadoMañana', 'eventLabelPasadoMañana': climaPasadoMañana, 'eventValuePasadoMañana': precioPasadoMañana});
dataLayer.push({'event': 'climaDosDias', 'eventLabelDosDias': climaDosDias, 'eventValueDosDias': precioDosDias});
});
})(jQuery);
</script>
It works really good 90% of the time, but if the API spends more time than usual to send the response, Google Tag Manager is sending those events anyway with blank values for the variables, which is not optimal for keeping data quality in Google Analytics.
Any suggestion for making Google Tag Manager to wait until all variables are populated?
I have been using this JSON ticker for the last month. It has been working like a charm, but today it stopped working; maybe anyone knows what could have gone wrong here?
$(function () {
startRefresh();
});
function startRefresh() {
setTimeout(startRefresh, 10000);
var turl = 'https://btc-e.com/api/2/ltc_btc/ticker';
$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22' + encodeURIComponent(turl) + '%22&format=json', function (data) {
jQuery('#ticker').html(data['query'].results.ticker.last);
jQuery('#ticker').append(' BTC');
});
}
http://jsfiddle.net/marcetin/9FHp3/4/
Here is the same example but with Cryptsy API and works well:
http://jsfiddle.net/marcetin/P2t9R/2/
I checked out https://btc-e.com/api/2/ltc_btc/ticker and got JSON back, so the issue is not with that site.
I checked out your code, and aside from being a little dirty, there was nothing that would keep it from pulling that service.
So, the issue seems to be at Yahoo's side. Purhaps that API is no longer available through Yahoo.
I have have cleaned up (and commented) your code:http://jsfiddle.net/9FHp3/27/
// Function for pulling JSON
function startRefresh() {
// This is the API URL
var turl = 'https://btc-e.com/api/2/ltc_btc/ticker';
// This sends the API URL through Yahoo?
$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22' + encodeURIComponent(turl) + '%22&format=json', function (data) {
// Writes to the page
$('#ticker').html(data['query'].results.ticker.last+' BTC');
});
}
// Do the initial pull
startRefresh();
// Refresh every 10000
setInterval(startRefresh, 10000);
However, you should really be pulling REST APIs from a server-side code such as PHP. Unless they are available in JSONP or CORS they are not really intended for cross-domain client-side script.
I hope this helps!
I'm trying to recover the last week posts in my facebook news feed with the javascript sdk.
I'm able to get the first page but then, I don't know how to continue iterating through the other pages. I've tried it with the following code:
$('#loadPosts').bind('click', function() {
FB.api('/me/home',{since:'last week'}, getPosts);
});
getPosts = function(response){
for (element in response.data){
post = response.data[element]
console.log(post);
}
previousPage = response.paging.previous;
console.log(previousPage);
// can i call FB.api(previousPage, getPosts); ??
}
But I'm getting a URL as previous page and I don't know how to make a javascript FB.api call from that URL. Any ideas?
Alright, it seems a lot of whining about a simple issue that I still believe my old answer clarifies. Anyway, let me babysit you. :)
First: I find out that you cannot really go to the "previous" page from the first page. Ideally, I should. So, here is a bug that I have filed you may want to follow: https://developers.facebook.com/bugs/391562790938294?browse=search_50fcac3ce094e7068176315
Second: If this is by design, you cannot go back to "previous" from the first page (because there is no previous), but you can surely go to "Next". However, since the API behaves as a cursor, and you have moved forward, now your "previous" page would work.
The answer to the question:
I'm getting a URL as previous page and I don't know how to make a javascript FB.api call from that URL. Any ideas?
yes, you can make FB.api call. But I suggest you to make a HTTP GET call instead, because it's easier. Also, note that previous may return and empty array like {"data":[]}
How to get previous/next page?
Here, I am writing a small code that uses jQuery. In case you do not want to read the code, there are two ways:
Use previous/next URL and make HTTP GET request. Which, if not empty, will come with next set of "previous", "next" link.
Parse the URL, and get the query-string as JSON ans pass it to FB.api. I used jQuery BBQ pluging for parsing.
Important Note: In the example, I am using "next" URL because on the first request if I use "previous" it gives empty JSON instead of giving posts from the past. However, I can use use "previous" URL once I have moved ahead a few pages. Like Google results, you can not go previous on page 1, but you can from any page > 1 (see Example 3 below). This is called pagination.
Example 1: Code using HTTP GET (preferred): (I will load 3 posts/page and look three next-pages)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js"></script>
<script>
var i =0;
var getPosts = function (response){
for (element in response.data){
post = response.data[element]
console.log(post.id + ": " +post.message);
}
// can i call FB.api(nextPage, getPosts); ??
if(i < 2){
nextPage = response.paging.next;
console.log(nextPage);
i++;
//Method 1: I use it.
$.get(nextPage, getPosts, "json"); //optional: $.getJSON can be use instead
}
}
$(document).ready(function(){
$('#loadPosts').bind('click', function() {
FB.api('/me/home',{since:'yesterday','limit': '3'}, getPosts);
});
})
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'XXXXXXXXXXXX', // FILL YOUR APP ID HERE!
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
});
// Additional initialization code such as adding Event Listeners goes here
};
</script>
<button id="loadPosts">Load Posts</button>
<p>Please open developer console to see what's happening. In Firefox, you can use ctrl+shift+k, and in Chrome/Chromium use ctrl+shift+i</p>
</body>
</html>
Response:
100004192352945_156620584487686: undefined
137723270230_10152423499430231: On this day, please spare a thought for those fellow citizens, for whom I just spare a thought and do nothing else.
642965867_10151211036740868: Thanks everyone for their wishes! The wishes made my day!
https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD&until=1359184568
367116489976035_536776529676696: Rage. Quit. Life.
899605553_10152450871820554: undefined
367116489976035_417820828298092: undefined
https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD&until=1359179890
137723270230_10152423148745231: Pratibha Patil used to love the Republic Day Parade, especially the part where the visiting Chief Guest extended her an invitation to visit his/her own country.
137723270230_10152423131700231: The Kingfisher tableau at Republic Day Parade was so simple. Vijay Mallya riding a bicycle.
367116489976035_484460034950769: undefined
Example 2: Code using FB.api: (I will load 3 posts/page and look three next-pages)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js"></script>
<script>
var i =0;
var getPosts = function (response){
for (element in response.data){
post = response.data[element]
console.log(post.id + ": " +post.message);
}
// can i call FB.api(nextPage, getPosts); ??
if(i < 2){
nextPage = response.paging.next;
console.log(nextPage);
i++;
//Method 2: If you have to call FB.api
var params = jQuery.deparam.querystring(nextPage);
console.log(JSON.stringify(params, null, 2));
FB.api('/me/home', params, getPosts)
}
}
$(document).ready(function(){
$('#loadPosts').bind('click', function() {
FB.api('/me/home',{since:'yesterday','limit': '3'}, getPosts);
});
})
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'XXXXXXXXXXXX', // FILL YOUR APP ID HERE!
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
});
// Additional initialization code such as adding Event Listeners goes here
};
</script>
<button id="loadPosts">Load Posts</button>
<p>Please open developer console to see what's happening. In Firefox, you can use ctrl+shift+k, and in Chrome/Chromium use ctrl+shift+i</p>
</body>
</html>
Response:
367116489976035_536776529676696: Rage. Quit. Life.
899605553_10152450871820554: undefined
367116489976035_417820828298092: undefined
{
"limit": "3",
"access_token": "AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD",
"until": "1359179890"
}
137723270230_10152423148745231: Pratibha Patil used to love the Republic Day Parade, especially the part where the visiting Chief Guest extended her an invitation to visit his/her own country.
137723270230_10152423131700231: The Kingfisher tableau at Republic Day Parade was so simple. Vijay Mallya riding a bicycle.
367116489976035_484460034950769: undefined
https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD&until=1359178140
{
"limit": "3",
"access_token": "AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD",
"until": "1359178140"
}
655515199_403590309726450: a good resolution to take on Republic Day
505588854_496901583686790: Love the secret world that slow motion reveals.
693811975_10151217837201976: undefined
Example 3: Performing: page1 -> page2 -> page1 or page -> next -> previous The following code will load page1, then go to "next" page (page2), then come back to page1, using "previous"
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js"></script>
<script>
var i =0;
var getPosts = function (response){
for (element in response.data){
post = response.data[element]
console.log(post.id + ": " +post.message);
}
// can i call FB.api(nextPage, getPosts); ??
if(i < 2){
nextPage = response.paging.next;
if(i==1)
nextPage = response.paging.previous;
console.log(nextPage);
i++;
$.get(nextPage, getPosts, "json"); //optional: $.getJSON can be use instead
}
}
$(document).ready(function(){
$('#loadPosts').bind('click', function() {
FB.api('/me/home',{since:'yesterday','limit': '3'}, getPosts);
});
})
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'XXXXXXXXXXXX', // FILL YOUR APP ID HERE!
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
});
// Additional initialization code such as adding Event Listeners goes here
};
</script>
<button id="loadPosts">Load Posts</button>
<p>Please open developer console to see what's happening. In Firefox, you can use ctrl+shift+k, and in Chrome/Chromium use ctrl+shift+i</p>
</body>
</html>
Response:
PAGE1:
367116489976035_536806916340324: How big is the Solar System?
Full infographic here: http://bit.ly/WmzfVn
137723270230_10152423534790231: "Sociologist" Ashis Nandy has claimed that most of the corrupt came from OBC/SC/ST castes.
Following this, Corrupt people have strongly condemned Nandy's attempts to divide them on caste lines. They'll be united in loot, forever.
100004192352945_156620584487686: undefined
PAGE2:
https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAKqIMyCVYjH9upK4e2bjUwLoVbbFDL0ffc0SZBTVR9MUFGV4ZCq6HBdFIadFMpLDC3ATMZCJ4GPsXWpG4qTGODavuvzLAZDZD&until=1359185659
137723270230_10152423499430231: On this day, please spare a thought for those fellow citizens, for whom I just spare a thought and do nothing else.
642965867_10151211036740868: Thanks everyone for their wishes! The wishes made my day!
367116489976035_536776529676696: Rage. Quit. Life.
PAGE1:
https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAKqIMyCVYjH9upK4e2bjUwLoVbbFDL0ffc0SZBTVR9MUFGV4ZCq6HBdFIadFMpLDC3ATMZCJ4GPsXWpG4qTGODavuvzLAZDZD&since=1359185123&__previous=1
367116489976035_536806916340324: How big is the Solar System?
Full infographic here: http://bit.ly/WmzfVn
137723270230_10152423534790231: "Sociologist" Ashis Nandy has claimed that most of the corrupt came from OBC/SC/ST castes.
Following this, Corrupt people have strongly condemned Nandy's attempts to divide them on caste lines. They'll be united in loot, forever.
100004192352945_156620584487686: undefined
OLD ANSWER
Use limit, offset, since and until parameters to achieve your goal.
Refer: http://developers.facebook.com/docs/reference/api/
Paging
When querying connections, there are several useful parameters that enable you to filter and page through connection data:
limit, offset: https://graph.facebook.com/me/likes?limit=3
until, since (a unix timestamp or any date accepted by strtotime): https://graph.facebook.com/search?until=yesterday&q=orange
The following should get all the posts since last week until yesterday from 21st - 30th message (basically, third page of 10 message per page pagination).
FB.api(
'/me/home',
{
'since':'last week',
'limit': '10',
'offset': '20',
'until': 'yesterday'
},
getPosts
);
I've just tested, it works. I have used limit=4, which is page-size kind of thing. So, when I fetch data since Feb 02, 2011 (Unix Time Stamp: 1296626400) till today using this
https://graph.facebook.com/me/home?access_token=[AUTH_TOKEN]&since=1296626400&limit=4
It returns the data, plus it also return URL to go to next page
{
"data": [
<ARRAY OF POSTS HERE>
],
"paging": {
"previous": "https://graph.facebook.com/me/home?access_token=[NEW_AUTH_TOKEN]&since=1298026753&limit=4",
"next": "https://graph.facebook.com/me/home?access_token=[NEW_AUTH_TOKEN]&limit=4&until=1298023222"
}
}
You can safely use previous and next attributes of the JSON object to jump to next page (or previous page). This seems to be the easiest way to do.
By the way, \u00257C needed to be converted to | to get this to work.
If you simply wanted to get the next page (using the paging.next object) you could do a jQuery.getJSON request. Something like the following:
function loadAlbums(){
FB.api('/me/albums', function(response){
handleAlbumsResponse(response);
});
}
function handleAlbumsResponse(response){
var albums = response.data;
for( var i in albums){
var album = albums[i];
$('#albums ul').append('<li>' + album.name + '</li>');
}
if( response.paging.next){
console.log('fetching next page...');
$.getJSON(response.paging.next, function(response){
handleAlbumsResponse(response);
});
}
}
The key constraint in your question is we can't use the 'next' url provided in the response.
I'll try to answer your question by first asking a more general question:
How can we create a user experience for our Facebook app where every call for more items returns the same amount of items.
If the user requests 'more' and gets 10 items, presses 'more' and gets then 4, then 7 etc, she might think our app is buggy.
On the Open Graph intro page, different parameters for paging are introduced. These are:
limit
offset
until
since
as mentioned under the 'paging' heading. However if we implement a solution with limit and offset where we increment offset ,e.g.:
https://graph.facebook.com/me/home?limit=10&offset=OFFSET
where OFFSET will be increased by the limit each request, we find that the number of results returned will sometimes not be equal to the “limit” parameter we specified. This is because parameters are applied on Facebook's side before checking if the queried results are visible to the viewer. We ask for 10, but we might get 8 items in return.
This means we can't use a solution where we increment limit and offset if we want our app's 'more' request to always return the same amount of items.
A solution proposed in this blog by Jeff Bowen (who works on the Facebook plaform team) is this logic:
request item with limit = YOUR_LIMIT.
retrieve the created_time field of the last item in the response.
request next 10 items with since = RETRIEVED_CREATED_TIME and limit=YOUR_LIMIT
Here's a code sample, based on an example in the blog post mentioned above:
var graphURL = "https://graph.facebook.com/me/home?" +
"callback=processResult&" +
"date_format=U&" +
"limit=10";
function loadPosts() {
var script = document.createElement("script");
script.src = graphURL;
document.body.appendChild(script);
}
function processResult(posts) {
if (posts.data.length == 0) {
document.getElementById("loadMore").innerHTML =
"No more results";
}
else {
graphURL = graphURL + "&until=" +
posts.data[posts.data.length-1].created_time;
for (var post in posts.data) {
var message = document.createElement("div");
message.innerHTML = posts.data[post].message;
document.getElementById("content").appendChild(message);
}
}
}
This solution retrieves the next 10 items from the user's newsfeed in chronological order without using the url in the JSON response.
It's working
function friends_list()
{
for (var x = 0; x<500; x++)
{
FB.api(
'/me/friendlists/',
'GET',
{"fields":"id","offset":x},
function(response) {
for (i = 0; i < response.data.length; i++)
{
document.getElementById("friends_list").innerHTML =
document.getElementById("friends_list").innerHTML + "<br>" + response.data[i].id;
}
document.getElementById("friends_list").innerHTML =
document.getElementById("friends_list").innerHTML + "<br>" ;
}
);
}
}
I noticed the question is very old. My answer is true for the these days FB jsSDK (2017) :)
Actually it's simpler than what predecessors described and somewhat intuitive. FB jsSDK it is an API itself and it is expected to be able to navigate through pages of the response by itself and using same means, no?
function getPosts(){
FB.api('/me/posts', 'GET', {limit:250}, cbGetPosts);
}
function cbGetPosts(response){
// do your stuff with response.data
if(response && response.paging){
FB.api(response.paging.next, cbGetPosts); // yep, is this simple
}
}
Obviously this will request for next pages as long as there is a next key defined but s proving the concept.