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.
Related
I am working on sending info from the Plaid link button using this tutorial from Stripe.
I have added the following code to the onSuccess function:
onSuccess: function(public_token, metadata) {
// Send the public_token and account ID to your app server.
var form = $('#payment-form');
form.append("<input type='hidden' name='plaid_public_token' value='" + public_token + "'/>");
form.append("<input type='hidden' name='plaid_account_id' value='" + metadata.account_id + "'/>");
form.get(0).submit();
}
I thought this function would be called when the user successfully adds their bank using the Plaid link. Essentially, this would get called when the form closes.
However, the behavior appears that it submits the form when the user opens the Plaid link, sending blank data to my controller.
How can I send this information to my server when Plaid is complete? Currently, it's saying that the variables are empty, but I think it's because I can't even use the Plaid pop-up before this error is being thrown.
Plaid::InvalidRequestError (
Error Type : INVALID_REQUEST
Error Code : INVALID_FIELD
Error Message : public_token must be a non-empty string
Display Message :
Request ID : A1AXs
):
in regards to "public_token must be a non-empty string" and the link given from stripe.
when you create Plaid and give it a config it seems like possibly you're not giving it your link token as shown in example. Start by creating an object that contains all the needed props ie: onSuccess, onExits and token
based on what you have and what is given should look like the following:
const configs = {
// where linkData.link_token is data returned from the call to the link api.
token: linkData.link_token || '',
onLoad: function() {
// The Link module finished loading.
},
onSuccess: function(public_token, metadata) {
// Send the public_token and account ID to your app server.
var form = $('#payment-form');
form.append("<input type='hidden' name='plaid_public_token' value='" + public_token + "'/>");
form.append("<input type='hidden' name='plaid_account_id' value='" + metadata.account_id + "'/>");
form.get(0).submit();
},
onExit: async function(err, metadata) {
// The user exited the Link flow.
if (err != null) {
// The user encountered a Plaid API error
// prior to exiting.
}
// metadata contains information about the institution
// that the user selected and the most recent
// API request IDs.
// Storing this information can be helpful for support.
},
};
var linkHandler = Plaid.create(configs);
I'm trying to figure out how I can bypass the pop blocking issue when using window.open. Here is the code I'm working on.
The first script I've built a script uses bit.ly API in shortening a URL address. Basically it gets the parameters then passes it to the API.
Then the second script calls the get_short_url function in order to share the bit.ly url via twitter using an on-click event. Unfortunately window.open seems to be flagged as a pop up by the browser. Is there way to bypass this
<script>
var base_url = window.location.origin,
hash_bang = "/#/sign-up?referral=",
login = "login",
api_key = "api_key";
function get_short_url(login, api_key, func, value) {
var value = document.getElementById('input-refcode').value;
$.getJSON(
"https://api-ssl.bitly.com//v3/shorten?callback=?",
{
"format": "json",
"apiKey": api_key,
"login": login,
"longUrl": base_url + hash_bang + value
},
function(response)
{
func(response.data.url);
}
);
}
</script>
<script>
$('#twitter').on('click', function() {
get_short_url(login, api_key, function(short_url) {
win = window.open('https://twitter.com/intent/tweet?text=Get Free Rides at Electric Studio! Sign up ' + short_url + ' to purchase your first timer package! After your first ride, you get 1 ride on us!' + ' https://www.electricstudio.ph/', '_blank');
win.focus();
});
});
</script>
I've got this working on Firefox, Chrome & internet explorer.
var url = 'https://twitter.com/intent/tweet?text='+encodeURIComponent('Get Free Rides at Electric Studio! Sign up xx to purchase your first timer package! After your first ride, you get 1 ride on us! https://www.electricstudio.ph/');
console.log(url);
var win = window.open(url, '_blank');
win.focus();
I don't think you can bypass the popup alert as it is something which browser handles for safety. For your personal machine, you can change the security settings to mark this site as exception and then you won't be prompted again.
For your second part where you want to pass a value from on ajax call to another, you can create an object as below and pass it as a response
function(response)
{
func({'shortURL' : response.data.url, 'yourValue': customValue });
}
And access this in your other function as
get_short_url(login, api_key, function(result) {
var custVal = result.customValue; //Your custom value
win = window.open('https://twitter.com/intent/tweet?text=Get Free Rides at Electric Studio! Sign up ' + result.shortURL + ' to purchase your first timer package! After your first ride, you get 1 ride on us!' + ' https://www.electricstudio.ph/', '_blank');
win.focus();
});
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.
We have SharePoint online 2013 site which displays the reports for different departments. All departments have different groups and they have assigned permission that way so one group can not see other group files. I am using JAVA SCRIPT and AJAX to get the files from gallery. when I use JavaScript on my page I am unable to open the documents in client application, it opens in office online than users have to download. IS there anyway user can click on it and it will download the files. I went to library setting and changed the default to open in client application also changed in site collection and features but still SharePoint opens the file in online instead of client application. We are using office 2010 and SharePoint online 2013.
(function () {
// Create object that have the context information about the field that we want to change it's output render
var galleryContext = {};
galleryContext.Templates = {};
galleryContext.Templates.Header = "<div class='gallery'>";
galleryContext.Templates.Footer = "</div><div class='gallerydocs'></div>";
// This line of code tell TemplateManager that we want to change all HTML for item row render
galleryContext.Templates.Item = galleryTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(galleryContext);
})();
// This function provides the rendering logic
function galleryTemplate(ctx) {
var icon = ctx.CurrentItem["GalleryIcon"];
var src = ctx.CurrentItem["FileRef"];
var name = ctx.CurrentItem["Title"];
var subtitle =ctx.CurrentItem["SubTitle"];
var bgcolor = ctx.CurrentItem["BackgroundColor"];
var fontcolor = ctx.CurrentItem["FontColor"];
//var description = ctx.CurrentItem["Description"];
// console.log(JSON.stringify(ctx.CurrentItem["GalleryIcon"]));
// Return whole item html
return "<div onclick='javascript:getGalleryDocs("+'"'+ src + '"' +", "+'"'+ bgcolor + '"' +", "+'"'+ subtitle + '"' +", "+'"'+ fontcolor + '"' +", "+'"'+ name + '"' +" )'><div class='galleryblock' style='background-color:" + bgcolor + ";color:"+ fontcolor+"' >"+name +"<br/><br/><p>"+subtitle +"</p></div></div>";
}
function getGalleryDocs(folder , bgcolor, subtitle ,fontcolor , name)
{
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/GetFolderByServerRelativeUrl('"+folder+"')/files?$orderby=Title",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
var html="<div class='gallerynav'><span><a href='javascript:goback();'>BILLING REPORTS</a><span> <i class='fa fa-caret-right' ></i><span>"+name+"</span></div><div class='galleryblock' style='float:none;background-color:" + bgcolor + ";color:"+ fontcolor+"' >"+name +"<br/><br/><p>"+subtitle +"</p></div><span></span>";
var results = data.d.results;
//console.log(JSON.stringify(results.length));
html+= "<ul class='gallerylinks'>";
if(results.length > 0)
{
for( i=0 ; i< results.length ; i++)
{
var item = results[i];
html+= "<li><a href='" + item.LinkingUrl + "' target='_blank'>"+item.Title+" <i class='fa fa-external-link'></i></a></li>";
}
}
else
{
html+=" THERE ARE NO DOCUMENTS IN THIS GALLERY"
}
html+="<ul>"
//console.log(JSON.stringify(data));
$(".gallery").hide(500);
$(".gallerydocs").html(html);
},
error: function (data) {
$(".gallerydocs").html("You dont have permissions to view this folder!")
}
});
}
function goback(){
$(".gallery").show(500);
$(".gallerydocs").html("");
}
I've not got an environment to hand to test this on but it will be something to do with your href link. It's needs to be built differently. The solution below hopefully will open in the clients application.
Try
<a href=""
onclick="editDocumentWithProgID2('http://server/site/doclib/folder/Document.docx',
'',
'SharePoint.OpenDocuments', '0',
'http://server/site', '0')">
This will open the file in edit mode
</a>
A full post can be found here
THis post offers a solution to directly download
Sorry I can't test
Good luck
Cheers
Truez
I'm trying to get all facebook comments with profile pictures of commentators through fb.api() call. Currently all comments gets outputed i just can't get profile pictures to append to appropriate comment.
In for loop which loops through all comments is another FB.api call which gets the profile pic of user who commented on video and than append them into single comment block. With this code i get profile pictures of all users who commented in every single comment.
What am i doing wrong?? Thank you in advance!
var komentarji_length = response.comments.data.length;
for (var i = 0; i < komentarji_length; i++) {
var user_id = response.comments.data[i].from.id;
FB.api("/" + user_id + "/picture", {
access_token: access_token
}, function (response) {
var profile_pic_link = response.data.url;
$(".comments_profile_pic" + i).append("<img src=" + comments_profile_pic_link + ">");
});
var ime = response.comments.data[i].from.name;
var message = response.comments.data[i].message;
$(".fb_comments").append('<div class="single_comment"><div class="comments_profile_pic' + i + '"></div><div class="name">' + name + '  says:</div><div class="single_message">' + message + '</div></div>');
}
Issue 1: comments_profile_pic_link is not defined, the variable is: profile_pic_link.
But then also the problem will not be solved. When you call "/" + user_id + "/picture" it is redirected to the image url automatically. So you can directly use the image url as: https://graph.facebook.com/{user-id}/picture. No need to make the API call unnecessarily.
Example
Still if you wish to get the proper image url (not required though), use redirect=0 with your call-
FB.api("/" + user_id + "/picture?redirect=0", {
access_token: access_token
}, function (response) {
var profile_pic_link = response.data.url;
$(".comments_profile_pic" + i).append("<img src=" + comments_profile_pic_link + ">");
});