In my app, I have a facebook field that can refer to a facebook user or to a facebook user fanpage.
I want to render the facebook fan page like box only if the fanpage exists in Facebook. Is there a way to do this with the Javascript SDK?
If you use jQuery and can figure out the pattern for the URL of those pages, you can use jQuery.get to check whether they exist or not. If you don't use jQuery, you can do the same thing with raw XmlHttpRequests.
For example, if the URL is "www.facebook.com/fanpage/{{username}}", you can do:
function startCheckForFanPage(username) {
$.get("www.facebook.com/fanpage/" + username, function(response) {
// if response.showsThere'sAPageThere, do X
// otherwise, do Y
}
}
if you use the Facebook JS SDK you can do this after initializing the FB object
FB.api('/the_fanpage_path', function(response) {
if(response.is_published) {
// it is a Fan Page!
}
});
If you don't want to load the FB SDK, you can do an AJAX get request to eg. http://graph.facebook.com/facebook. This works with the cross origin policy because graph.facebook.com allows different domains.
The response is in JSON so something like this would work:
function startCheckForFanPage(username) {
$.get("graph.facebook.com/" + username, function(response) {
if (response)
// otherwise, do Y
}, function() {
// Handle 404 or other failures here
})
}
EDIT: This no longer works
Related
Is there a way to load the first post from a facebook page into my website?
I know .load() does the trick, but not for other websites. Maybe .get() can be used somehow, but I don't know if there's a way to use just a part of the page.
You can use the Facebook API to fetch the latest post id:
FB.api(
"/{page-id}/feed",
function (response) {
if (response && !response.error) {
var latestPostId = response.data[0].id.split('_')[1];
}
}
);
Then you can embed the post dynamically like this:
// Create an element, you could use jQuery for this as well.
var embed = document.createElement('div');
embed.className = 'fb-post';
embed.setAttribute('data-href', 'https://www.facebook.com/{page_id}/posts/{post_id}/');
// Place it on the page somewhere.
document.body.appendChild(embed);
// You might have to let FB parse your page again.
FB.XFBML.parse();
I would like to show all the instagram pictures with a specific tag in my wedding site, indipendently of the user that has posted it and without asking to my site users to login into Instagram (they could not have an Instagram account!). What is the best and correct way?
What I'm doing now:
1) I've configured a new client "Wedding" in my personal instagram "Manage Clients" section.
2) I've got a token calling MANUALLY (I mean copy and past ONCE the url in my personal browser) the following URL:
https://api.instagram.com/oauth/authorize/?client_id=client_id_of_my_client_wedding&redirect_uri=redirect_uri_of_my_client_wedding&response_type=token
and logging into Instagram with my personal account once asked by the Instagram login popup window
3) I add in my html page the following javascript:
<script>
function myinstagramfunction (json_object)
{
// I fetch here the json object that contains the info of all the pictures returned
}
</script>
<script type="text/javascript" src="https://api.instagram.com/v1/tags/<my_wedding_tag>/media/recent?access_token=<token_retrieved_in_step_2>&callback=myinstagramfunction"/>
The second script performs a cross-domain call to instagram api using JSONP (JSON with Padding) and calling my local function "myinstagramfunction".
Questions:
a) Is this the correct method and the one officially suggested/allowed by instagram?
b) currently the client Wedding is configured in "Sandbox Mode". Do you suggest to submit it to the approval of instagram or is there something not allowed in my procedure?
please let me know!
thank you
Davide
A solution like https://lightwidget.com/ doesn't fit your needs?
No coding skills needed, just copy and paste.. I think this should work ok for a weeding website.
EDIT:
Okay, so try this way:
function myinstagramfunction (json_object)
{
// I fetch here the json object that contains the info of all the pictures returned
console.log("OK");
}
$.ajax({
type: "GET",
dataType: "jsonp",
url: 'https://api.instagram.com/v1/tags/YOUR_HASHTAG/media/recent?access_token=YOUR_ACCESS_TOKEN_HERE&callback=myinstagramfunction',
success: function (result) {
console.log(result);
}
});
Remember that Instagram api calls has rate limits.
I'm feeling scared about a solution i'm using in one of my app.
Basically, i use this snippet :
var username = ...;
$.ajax({
type: "POST",
url: "getFeed.php",
data: "username="+username,
success: function(html) {
// do the stuff
}
});
My question is : is this hackable ? If you use the chrome/firefox/... build-in code editor and replace var username = ... by var username = 'user1';, would it work ?
Thanks
Yes, anyone with a javascript debugger will be able to change the variable to whatever username they want. JavaScript is always open to the user and can be modified easily.
Typically you would have a login page to authenticate the user (often cookie based), and then on every subsequent request (Ajax or otherwise) you would be able authenticate the cookie and make sure the user is who he says he is. This will however require a server side solution to the authentication.
My web app was previously using the following function to check the existence of a twitter account:
var checkTwitter = function(username){
$.ajax({
url: 'http://twitter.com/statuses/user_timeline.json?screen_name='+username+'&count=1&suppress_response_codes=true&callback=?',
dataType: 'json',
success: function(data, success){
if(data.error){
//gone bad code
} else {
//gone good code
}
}});
}
Which has been happily working for a month or two. Now the url returns:
{"error":"Not found","request":"\/statuses\/user_timeline.json?screen_name=mildfuzz&count=1&suppress_response_codes=true&callback=?"}
when checking for my own twitter account (#mildfuzz).
What's gone wrong?
Twitter recently changed their API rules maybe it is coz of that?
Try changing to https.
According to Twitter Dev use HTTPS
And you must have an authentication context.
https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=twitterapi&count=2
You should also change your success function to :
if(data="[]" || data.error || data.errors){
//gone bad code
} else {
//gone good code
}
error (when not authorised) : https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=test&count=2
errors (when user does not exist): https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=qsdsqdq&count=2
Also when the user does not exist, it can return an empty array (although i have no idea why) : https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=dsf&count=2
https://dev.twitter.com/docs/api/1/get/users/lookup
this link fixes it. Twitter now have a function for simply looking a user up, which does not require authentication.
I would like to know when user shares my site on Facebook or Tweets about it after clicking on buttons provided by me - is there ay way to do so using Javascript?
You can just use a service like AddThis or ShareThis?
They both have reporting tools to see how many times a page has been shared.
You can use FB.Event.subscribe for facebook.
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
// you can make an ajax request to save this "Like", it's up to you.
}
);