We Keep Coding

How do I save twitch api image url to png file in a local directory?

Recently I've been working on a custom twitch chat widget for my stream and I've come across a few issues I need to address first.
Here is the code:
var userName = obj.user;
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/channels/" + userName,
headers: {
'Client-ID': 'ql93k2lg41xsnebz7kgyfjsrg28j532'
},
success: function(data1) {
var userLogo = data1.logo;
if (userLogo === null) {
userLogo = "https://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_70x70.png";
$("#logo").prepend("<div id='logo' class='image'>" + "<img src='" + userLogo + "' style='width:40px;height:40px;'>" + "</div>");
} else {
$("#logo").prepend("<div id='logo' class='image'>" + "<img src='" + userLogo + "' style='width:40px;height:40px;'>" + "</div>");
}
}});
As you can see the script grabs the username from obj.user to create the api url link for each user. Then we pull the logo from the users api.
If logo returns null then we set it to the default image link. Otherwise we pull the url from the user api for their logo and display it on screen.
Now I want to take these urls and have them save to my projects directory as .png's as they are loaded for the first time. This way if we have the image already on hand we can call it from our own personal database instead of constantly calling for it from the twitch api.
How could I edit my script to add a function to check if the .png is in directory, then if not pull it from the api call and save a copy to directory for future use in overlays?
It would also have to name the .png's after each user it's pulling from.

staging image on facebook with javascript to compose a custom object

I'm reading this interesting part of FB:
[https://developers.facebook.com/docs/sharing/opengraph/object-api#objectapi-images]
My goal is to sent a custom object to graph api explorer, completed of a staged image.
Please have a look to the FB documentation, paragraph about staging images.
I want to stage the image, get it later, and then compose an object with the staged image and push it to the graph api as a story.
There is only one example in CURL.
I would like to use FB.api().
I've been trying to do something like:
FB.api(
'https://graph.facebook.com/me/staging_resources',
'post',
{'file' : '#images/prawn-curry-1.jpg',
'access_token' : $USER_ACCESS_TOKEN},
function(response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML =
'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/me/activity/' +
response.id + '\">' +
'Story created. ID is ' +
response.id + '</a>';
}
}
);
but it does not like it, although the access_token is the appID.
I thought the access_token will be held in request and tried:
FB.api(
'https://graph.facebook.com/me/staging_resources',
'post',
{'file' : '#images/prawn-curry-1.jpg'},
function(response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML =
'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/me/activity/' +
response.id + '\">' +
'Story created. ID is ' +
response.id + '</a>';
}
}
);
but it does not take the image, neither with an absolute url.
(I guess the syntax #images/ means a relative url to the path, I've never seen it in this context).
Could you please tell me what is wrong here for staging an image with
javascript?
Can I post an image in Base64 or is the protocol the same
of /graph/me/photo? api ? I am trying to upload from canvas :)
Can you clarify how to call the image and compose the object story? It is not clear if the staged image will only be present temporarily, so to update the same object, or I can store indefinite objects, so that I should take care of naming.
In the link above, it looks like it query by image filename, and it is not clear to me if I can fetch *by ID * (exact matching) after response is successful so to upload a custom object, completed of its own image, to the graph api explorer.

Facebook javascript API - adding page/tab

Trying to get the installation of my Facebook Canvas app working. What I need to do is let the use choose a page on which to install the app. I am getting a list of pages via the API, putting them in a select box to choose from, which works fine:
FB.api('/me/accounts', function(response){
for (var i=0 ; i<response.data.length ; i++)
{
// now build a DOM node to allow selection of this page
var option_node = $("<option value='" +
response.data[i].id +
"'>" +
response.data[i].name + "</option>");
$('#facebook_page_list').append(option_node);
}
});
Selecting the option gets to the right place, where I use the page Id and access token to attach a page tab for my app:
var api_call = '/' + page_id + '/tabs/';
FB.api(api_call,
'post',
{
page_id: page_id,
tab: 'app_' + appId,
access_token: page_access_token,
custom_name: 'Joe Agent'
},
function(response){
console.log("Did this work?");
console.log(response);
});
but I get an error message:
Tab 'app_' does not exist on profile
Why does the "add this tab to this page" call return the error "that tab doesn't exist on that page"? What am I missing here?
THanks,
andy

Ok, so I needed to do more setup on my page in order to do this. going by this page: https://developers.facebook.com/docs/pages/tabs, I got past this issue. In case this trips someone else up.

get facebook user email and user first/last name with Phonegap FB Plugin for IOS app

Working on my first phonegap ios app.
Trying to incorporate this plugin https://github.com/Wizcorp/phonegap-facebook-plugin/tree/master/platforms/ios/www
Basically I just need to alert the users email and first/last name, although I'm a bit stuck on how to do so using this plugin.
What I wanted to do was retrieve that information, then pre populate some forms to create a new user to use with Parse.
I'm able to get a response from this function that displays a status and an authResponse with tokens and the user ID:
var login = function () {
if (!window.cordova) {
var appId = prompt("Enter FB Application ID", "");
facebookConnectPlugin.browserInit(appId);
}
facebookConnectPlugin.login( ["email"],
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
I'm just unsure in terms of next steps on how to go about retrieving the users email and first/lastname..and whther or not I have to dig deeper into facebooks API.
any help is appreciated.
* UPDATED *
Figured it out. I was missing a step that i found over at the facebook api page
var login = function() {
if (!window.cordova) {
facebookConnectPlugin.browserInit('APPID');
facebookConnectPlugin.browserInit(appId);
}
facebookConnectPlugin.login(["email"], function(response) {
if (response.authResponse) {
facebookConnectPlugin.api('/me', null,
function(response) {
alert('Good to see you, ' +
response.email + response.name + '.');
});
}
});
}

Try this plugin(http://plugins.cordova.io/#/package/com.ccsoft.plugin.cordovafacebook) this covers all of your needs.

Issue in Displaying facebook friends profile picture

I'm integrating facebook in my phonegap app, where facebook friends profile picture, names and birthday dates are displayed, now able to display name and birthday dates but not profile picture. i'm getting blue rectangular box question mark image in place of profile picture instead of profile picture.
Please help me.
function me() {
FB.api('/me/friends', {fields: 'id, name, picture,birthday' }, function(response) {
if (response.error) {
alert(JSON.stringify(response.error));
} else {
var data = document.getElementById('data');
fdata=response.data;
console.log("fdata: "+fdata);
response.data.forEach(function(item) {
var d = document.createElement('div');
d.innerHTML = "<img src="+item.picture+item.birthday+"/>"+item.name+"<br>"+item.birthday;
data.appendChild(d);
}
}

Replace the inner Html line code as below:
d.innerHTML = "<img src=" + item.picture + "/>" + item.name + item.birthday;