How to get pictures from the flickr API - javascript

My goal is to bring in photos based on a search of 5 different words; 5 photos each word. I need to bring the pictures back into my site; preferably smaller versions as I will bring many files in.
I am new to rest services in general. I saw this option:
https://www.flickr.com/services/api/flickr.photos.search.html
and I go to the API explorer link at the bottom:
https://www.flickr.com/services/api/explore/flickr.photos.search
and put in 猫 (meaning cat) for the text field and number of pictures per page at 5 and pages 1, so I would only get back 5 images. This gives me this XML link:
https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=4aa062c1cd2da6075e27b599f583665a&text=%E7%8C%AB&per_page=5&page=1&format=rest&api_sig=9f1beab3f0da8f620e197104eb81aa2a
My question would be what would I do with this request? It looks like it is giving ample information to be able to locate each image, but how would I use this XML to pull the images directly into my site?

shellwe --
After making the request, you'll need to use the information returned to you and build the 'Photo Source URL' (see: https://www.flickr.com/services/api/misc.urls.html)
In essence, you'll want to loop through the response and build the photo url.
As an example, using the first line item provided in your link:
https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
would be:
https://farm5.staticflickr.com/4218/35419029800_7a39f756be.jpg
How you incorporate the final photo urls into your website ultimately depends on how you've got things set up.
Hope this helps some.

Related

Adding language in URL with javascript

I'm creating a single-page site, and I came across a problem that I can not solve. I have my menu with "Home | Blog | Contact" etc, change the URL with the javascript without updating the page with the code below:
window.history.replaceState({url: stgUrl}, "", stgUrl);
so I can see that the URL is modified correctly, the problem is that my site is in two different languages, and I want to put something like "/pt/" e "/en/" so the user can better visualize what language is browsing. The problem is that when I do this:
window.history.replaceState({url: stgUrl}, "", '/en'+stgUrl);
I get file upload errors, such as site images(Get 404: Not Found), which are not finding the path correctly anymore, because of '/en'.
since the changed url looks like this: mysite.com/en/
I would also like to add comments to blog posts on the site, and I saw that to add Disqus comments, I would need to have different urls for each post, so I can better control the comments, it's also something I do not know how to do.
obs: my site will be hosted without access to a server, so everything should work on the client, like a static but one page blog.
And how do I update the page with the url changed without receiving a 404? I would like to go to the home page for example, or update and maintain the current page.
So my question about urls comes down to three questions:
1 - How to change the url with "/pt" and "/en" and not receive 404 for images not found?
2 - How to change the url in order to generate comments from Disqus?
3 - How to update the page with the url changed without receiving a 404?

Use HTML template to create pages from API

I have been asked to design an "intelligent home" website based on an API provided. I have "Rooms" (actual rooms in a house) and "Devices" in each room.
I have a page (HTML file) "Rooms" which contains a list of all the availabe rooms in the API. I have another HTML file named "RoomX" which is the "template" for all the rooms. It has a list of all the devices in the specified room.
I don't know how to "create" and link new "Room" pages every time I add a Room to the Rooms list. Example: I added "Room 1" as a room in the API and as an element in the page "Rooms". I click on it, and right now, it takes me to my "RoomX" page. I want to create "copies" of that "RoomX" page; so that when I click on the new room I created, I can access a page that has the selected room title and its devices.
The creation and deletion of rooms is dinamic, so I would need to create these pages depending on the user's needs. I am only just starting to use HTML, CSS and JS (I am using JQuery on my page), so I would appreciate an extensive explanation.
Thanks!
What I understand is that you have an API ready and they asked you to design the front end? or are you supposed to design everything?
if the API is already made please go back to it and look for the specification, Usually the response is going to be a JSON.
example:
let's say that to get all available rooms > yourwebsite.com/rooms
to get one room, for example room 1 > yourwebsite.com/rooms/1
if that was made for you already, all you need to make is the UI + use jquery AJAX to get the json response and display it
if nothing was made then pretty much doing it dynamically with html is impossible. What you need to do then is:
pick any RESTful API framework and learn it if you don't know one already
make a restful api that generates json responses
make the UI using either front-end frameworks or by classic html, css and js

Screen-scrape paginated data

I'm trying to grab a list of all of the available stores returned from the search at this website.
https://www.metropcs.com/find-store.html.html
The issue is that it returns back only 4 or 5 at a time, and does not have the option for 'See All'. I attempted to use Post Man in Chrome and AutoPager in Firefox to see if I could somehow see all of the data in the background but I wasn't able to. I also was researching JSON interception tools, as I believe the site is using JSON in the return set, but I wasn't able to find any of the actual data that I needed.
In the past I was able to hit 'print preview' and grab the list that way (then I just copy-pasted to Excel and ran some custom macros to strip the data I need) but the printer-friendly version is gone now as well.
Any ideas on tools that would allow me to export all of the stores found, especially for larger return sets?
You want to manipulate this request:
https://www.metropcs.com/apps/mpcs/servlet/genericservlet
You'll notice the page sends this (among other things) as the request to that URL:
inputReqParam=
{"serviceProviderName":"Hbase","expectedParams":
{"Corporate Stores":...Truncated for clarity...},
"requestParams":
{"do":"json",
"minLatitude":"39.89234063913044",
"minLongitude":"-74.85258152641507",
"maxLongitude":"-74.96578907358492",
"maxLatitude":"39.979297160869564"
},
"serviceName":"metroPCSStoreLocator"}
You'll need to manipulate the lat and long bounding box to encompass the area you want. (The entire US is something like [-124.848974, 24.396308] to [-66.885444, 49.384358] )
In your favorite browser it should be easy enough to tweak the request to get a JSON response with what you require.

How to cache an image from URL before displaying it

Basically, this app should contain a collection of objects in a view showing a representative image of each object (i.e. a movie should show its poster).
Talking about movies, I am trying to use the IMDB APIs in order to retrieve the metadata for a certain movie title, including its poster. However, hotlinking won't let me display the images once their URLs are obtained from the APIs (I keep getting the "GET [...] 403 Forbidden" error...).
Since I am using the JSONStore feature in order to cache the data, I would like to know if there is a possibility to store those images in JSONStore and then display them like a normal browser would do. I am trying to do all this sort of things from the front-end side, not the back-end one, using AngularJS, HTML5 and JavaScript.
Do you have any suggestions for this kind of problems?
Thank you.
Suggested solution: What you'd need to do is to encode the images to base64 and this way you could store the binary image as a string inside your JSONStore collection.
When you then need to display it you will need to base64 decode the string back into an image and display it in your HTML

How to reshare a Facebook Post

i want to reshare a facebook post by letting my visitors go to some url and press share.
I looked into sharer.php and https://www.facebook.com/dialog/feed but both seem to only give me ways to let a user share a link and not reshare a facebook post.
I don't want to simple post the content of a post but to repost it, so the share count of the post also goes up.
Did i miss something, and is there a way to accomplish resharing via some api?
I've seen a post where someone was trying to do the same, unfortunately this is not possible with current API. You can only get the Post (with the post ID, if is public or with access token), scrape the information and create a new one.
David Crissc Reinberger is right that i can't reshare a post in a way that increments the share count.
Still there is a way to reshare a post that is a photo which increments the share count of the photo post:
Post an image
Get the Image link:
e.g.: https://www.facebook.com/photo.php?fbid=10152377142043306
Take the url and add it to sharer.php:
e.g.: https://www.facebook.com/sharer/sharer.php?u=https://www.facebook.com/photo.php?fbid=10152377142043306
This way you will really reshare the image and also increment the share count of the image post.
As you said, Facebook wont let you rehsrae their photo.
But using a proxy you can do that. And proxy gives you the flexibility to choose between sharer, or feed dialog.
Feed dialog fits better mobile web apps. Faster amd have better UI. Sharer don`t exist on mobile web apps.
https://images.weserv.nl/ does the job. Facebook accept the image as a picture param, and this way you are able to reshare thier posts.
Usage example (plus width and hight to improve performance)
'https://images.weserv.nl/?url=' + facebookImageUrl + '&h=200&w=200'

Categories