Oh, hello.
I'm doing an experiment with instagram api For now, i can show the photos by instagram tags. But i have one question:
Theres a way to show the instagram photo + the user name(the person who post the photo)?
Thanks ;)
If I understood your question correctly, assuming you have the URL of an Instagram image like http://instagram.com/p/p2P-98uHBp/ then you could use Instagam's Embedding Endpoints to get json information from that link.
This URL format will return the json data you need :
http://api.instagram.com/oembed?url=http://instagram.com/p/p2P-98uHBp/
The user name can be extracted from an ajax response like :
var instaURL = "http://api.instagram.com/oembed?url=http://instagram.com/p/p2P-98uHBp/";
$(document).ready(function () {
$.ajax({
url: instaURL,
dataType : "jsonp", // this is important
cache: false,
success: function (response) {
alert("the instagram user is = " + response.author_name);
},
error: function () {
alert("couldn't process the instagram url");
}
});
});
See JSFIDDLE
Related
Cross post from slack#help channel...
I'm creating a Sanity/Nuxt site for a client that includes a blog component. His primary marketing source is Instagram and since Instagram's API only allows for single-image posts I'm trying to go about it in the reverse way. I'm setting up a Netlify function where the client will paste in the link to the Instagram post and the function will fetch all associated images via URL using the /?__a=1 trick to fetch public data from Instagram. What I would like to do is fetch all of the images from said Instagram post, upload them as assets, and then create a blog post utilizing said uploaded images. I've modified the built-in Netlify function to create a Sanity document, where I'm pulling the image as an arrayBuffer, converting it to 'base64', then trying to upload.
When I try to run the file, found at https://gist.github.com/jeffpohlmeyer/d9824920fc1eb522ceff6380edb9de80 , I get the following error:
body: {
statusCode: 400,
error: 'Bad Request',
message: 'Invalid image, could not read metadata',
details: 'Input buffer contains unsupported image format'
},
Can anyone suggest a way I can do this? As an alternative I figured I could just link to the URLs hosted on Instagram instead of hosting the images within Sanity but it makes it difficult to maintain for the client if, for example, the Instagram post changes or he wants to change the cover image, choosing URLs instead of images would be difficult.
Tried the same on my repl:
async function uploadImage(){
const image = await axios.get(
'<<url>>',
{ responseType: 'arraybuffer' }
)
const data = Buffer.from(image.data, 'binary');
client.assets
.upload('image', data)
.then(() => {
console.log('Done!')
})
.catch((err) => {
console.log('err', err)
return { statusCode: 400 }
})
}
uploadImage();
just remove base64 conversion done and this should work
I'm trying to using Airtable, node.js, express.js and jquery to create a simple user authentication functionality but I'm fairly new at this and I'm running into a problem I can't seem to fix and the articles I've read I can't seem to grasp or adapt to my particular situation.
I have this Ajax call in my html doc:
$("#checkUser").submit(function(e) {
var studentID = $('input[name="student"]').val()
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data) {
$(window).attr("location", window.location.href + 'Dashboard?student=' + studentID);
},
error: function(data){
console.log("User not found. Try again");
}
});
});
This call sends the inputted username and data to the server which then processes it in the following way:
app.post('/checkUser', urlencodedParser, function(request,response){
var user = JSON.stringify(request.body);
user = JSON.parse(user);
base('RegisteredStudents').select({
filterByFormula: '{UserID} = ' + user.student,
view: "Grid view"
}).eachPage(function page(records, fetchNextPage) {
records.forEach(function(record) {
response.sendStatus(200);
});
fetchNextPage();
}, function done(error) {
response.sendStatus(404);
});
});
If the user exists in the database of Airtable, it should send '200' which the Ajax then reacts by redirecting accordingly to the user's profile. Otherwise, if the user does not exist, the server should respond with '404', which the Ajax call should react to by printing a statement in the console. While it does do these two things well, the server breaks down when, after a student puts in the wrong user ID and the Ajax prints the statement, the student tries to put once more a userID. I get the " Can't set headers after they are sent. " message. Please, how can I solve this?
Thank you!
You have two response.send..., you can only send data once. Either make sure only one runs with some conditional or add return before all response.send... so if any of them runs, the program will return and the other response.send.. will not run.
I am very new to web programming. I took an online course covering html, css, js and node, now I started to build an online calendar application. In my calendar page each day of the year is represented by a text input. So there are 365 inputs in the page. What I am trying to do is; when an input lost focus, the value of the input must be stored in a mongo database. I assume that I should send a post request to my index.js file from the calendar.ejs file when the input lost focus. But all the examples I could find so far use form tag. Is it possible to send a post request when the onfocusout event of a text input is triggered?
Have you tried jQuery $.ajax?
http://api.jquery.com/jquery.ajax/
var request = $.ajax({
url: "http://www.your-url.com",
type: "POST",
data: { ... } // payload to the api
}).done(function (response, textStatus, jqXHR) {
//your code
}).fail(function (jqXHR, textStatus, errorThrown) {
console.error(
"The following error occurred: " +
textStatus, errorThrown
);
}).always(function () {
// your code
});
I am trying to send a get request to Facebook graph API from a node js app. I hardcoded a user access token I got from the graph api explorer and used the app id and app secret from the dashboard to log the user in.
I have already logged the user in through facebook with passport.
Below is the code that sends the request
/* GET users listing. */
router.get('/', function(req, res) {
console.log("position 3");
const options = {
method: 'GET',
uri: 'https://graph.facebook.com/v2.10/me?fields=id,name',
port:8000,
qs: {
access_token: user_access_token
}
};
http.request(options,function(res){
console.log("position 4");
//res.json(res);
})
});
The problem is, I get a 200 status code but no data. The console displays "position 3" but doesn't display "position 4". Can anyone please explain why is the request returning no data. I have seen a similar post but the problem isn't exactly the same as mine.
Try with those options:
const options = {
method: 'GET',
uri: 'https://graph.facebook.com/v2.10/me?fields=id,name&access_token=' + user_access_token
};
Btw, keep in mind that user tokens are only valid for 2 hours and you can extend them to 60 days max.
When retrieving feeds of a facebook page, we can at most get 100 feeds.
How can we parse all available feeds with graph API and node.js?
If it was recursive, we could test on paging and next elements when getting the response.
For example, this code retrieves only two last feed pages, but I want to retrieve all feeds.
// note: you might want to prevent the callback hell :)
graph.get('likes', {limit: 2, access_token: "foobar"}, function(err, res) {
if(res.paging && res.paging.next) {
graph.get(res.paging.next, function(err, res) {
// page 2
});
}
});
if you want to get a data. you must be set user_post permission on graph explorer.
Code.
FB.api(
'/mosaiquefm/feed',
'GET',
{},
function(response)
{
// here print response. this response according to screenshot.
}
);