I am not using the Javascript SDK because that is client-side whereas I'm making a server-side call.
I want to make a page post so that I can make an ad creative with it. I can do the call perfectly fine in the Graph API Explorer tool, but I cannot make the same call (with the same long-lived access tokens that continue to work in the Graph Explorer) from Javascript. Here is my code:
tok = <valid and never expiring user token>;
var pg_tok = <valid and never expiring page token>;
var act_id = <account_id>;
var pg_id = <page_id>;
var call_to_action = 'INSTALL_MOBILE_APP';
var fb_app_url = 'https://itunes.apple.com/us/app/id284882215';
var msg = 'Test creative, ya see';
var pic_url = 'https://s3.amazonaws.com/<path_to_my_image>';
var ROOT = 'https://graph.facebook.com/';
var pagepost_endpoint = ROOT+pg_id+'/feed';
console.log(pagepost_endpoint);
var pagepost_params = {
access_token: pg_tok,
call_to_action: {
type: call_to_action,
value: {link: fb_app_url}
},
message: msg,
picture: pic_url,
published: false
};
console.log(pagepost_params);
var pagepost_res = HTTP.post(pagepost_endpoint, {params: pagepost_params});
console.log(pagepost_res);
I have played around a bunch with params vs. data for where pagepost_params goes in the HTTP.post that is giving the error (that is Meteor's HTTP btw).
-Putting everything in params gives the error: {"error":{"type":"Exception","message":"No Call To Action Type was parseable. Please refer to the call to action api documentation","code":1373054,"is_transient":false}}.
-Putting everything in data gives the error: {"error":{"message":"(#200) This API call requires a valid app_id.","type":"OAuthException","code":200}}.
-Putting access_token in params and everything else in data gives the error: {"error":{"message":"Invalid parameter","type":"FacebookApiException","code":100,"error_subcode":1349125}}.
One more clue for everyone, if I change the HTTP.post to HTTP.get, and just put access_token in params and include no other parameters (in params or in data), the call succeeds and I see past posts I have made on this page through the Graph Explorer (only the ones with published: true, though), so the access token and endpoint do work, just something is faulty about POST-ing instead of GET-ing and the specific parameters I'm using.
Have you tried posting to /photos instead of /feed? The error subcode is the same as mentioned here Posting to facebook wall using graph api
Hope this helps
Turned out to be an issue with Meteor's HTTP. It does not handle nested JSON very well, and we're going to submit a pull request for that. But for those seeing this, the important thing to take away is that the call_to_action may not be a valid JSON object, and even if it is, it may not be being stringified/parsed as expected. My fix was using request.post instead of HTTP.post. (then instead of params or data, you use form. look up node's request https://github.com/mikeal/request)
Related
I'm trying to fetch featured image from my published post but it seems impossible! I get
an error :( that's the code:
function fetchSlideShow(){
let endpoint = "http://loreleiheckmann.com/wordpress/wordpress/wp-json/wp/v2/Vinyls?_embed";
fetch(endpoint)
.then(e => e.json())
.then(showSlideShow);
}
function showSlideShow(data){
console.log(data);
data.forEach(showSingleSlide);
showSlides();
}
function showSingleSlide(aSlide) {
let template = document.querySelector(".slide_template").content;
let clone = template.cloneNode(true);
console.log(aSlide);
clone.querySelector("img").setAttribute("src", aSlide._embedded["wp:featuredmedia"]
[0].media_details.source_url);
let SlideList = document.querySelector("#SlideList");
SlideList.appendChild(clone);
}
While going to the array I see error 401 :( and moreover: Cannot read property 'source_url' of undefined" I don't know what I'm doing wrong .. any insights?
HERE ARE THE ERRORS -> 401 ON CONSOLE + PROBLEM WITH URL.:
Please try changing your url in the endpoint variable:
let endpoint = "http://loreleiheckmann.com/wordpress/wordpress/wp-json/wp/v2/posts?per_page=20&_embed=wp:featuredmedia
If you need more data you can add them with a comma:
wp-json/wp/v2/posts?per_page=20&_embed=wp:term,wp:featuredmedia
Post per page is optional, but I would prefer having that set.
And you should write what image size you need. That way rest api will give you the right source url:
_embedded['wp:featuredmedia']['0'].media_details.sizes.medium_large.source_url
I think it would also be better practice if you use an ssl certificate, there are free by "Let's encrypt".
EDIT:
Your screenshot shows the rest api message:
wp:featuredmedia: Array(1)
0:
code: "rest_forbidden"
data: {status: 401}
message: "Sorry, you are not allowed to do that."
So the 401 status code means: unauthorised
Seems like you are not allowed to access the data via rest api.
There could be multiple reasons for that:
The image is attached to an unpublished post. The post may have the status "private" or "draft", and therefore is not public available.
Your post (and attached image) is not available for not logged in users. If there is a restriction to view your code, this also applies to rest api.
Maybe you are using some kind of membership plugin that restricts the wp rest-api. Try deactivating all plugins if one of them affects the behaviour.
You have added some custom code to restrict access rest api access.
If nothing works for you, you should look into your database and check the medias post_status.
I think it is working fine, but you do not have access to view the posts data. This is what the 401 error indicates.
To whom it may concern - In the end, I added image in WP by custom post type ( I gave up wp:featured media - I wasn't able to fetch it.) Afterward I added a code to JS -> b.querySelector(".img").setAttribute("src", a.acf.image.url); so it works:)
I'm trying to fix one mistake which one of the previous developer has did. Currently in project we have half-bookmarkable pages. Why half? Because if token has expired user will be redirect to resourse where he has to provide his credentials and on success he will be redirect to previous resource which he has used before. Sounds good for now. The problem here is next, some of resources have server side filtering and highly complicated logic which comes in the end to the one object like this:
param = {
limit: 10,
offset: 0,
orderBy: 'value',
query: 'string query can include 10 more filters'
};
then thru the service it sends a request to the end point
var custom = {};
function data(param) {
custom.params = param;
return $http.get('/data_endpoint', custom)
.then(function (response) {
return response.data;
});
From this part request works fine and response is correct but url isn't. User cannot store current url with search params because url doesn't have it and if user will try to get back to previous page with applied filters he won't be able to do that.
Also there is interceptor in this application, which add one more query param to every api request, because every api request requires some specific validation. This param is always the same.
I have tried to add $location.search(param) exactly to this data service but it breaks the app with infinity loop of login / logout looping, because interceptor stops working and all other request are sending without special query param
Then I thought to add this params inside interceptor like this:
config.params.hasOwnProperty('query') ? $location.search(config.params) : $location.search();
But it still breaks app to infinity loop.
This method adds query to url but doesn't allow to modify it, so if user applied additional filtering, it doesn't send new modified request but sends old one.
if (config.params.hasOwnProperty('query')){
for (var key in config.params){
$location.search(key, config.params[key])
}
}
That's why I decided to ask question here, probably somebody gives an advice how to solve this problem. Thanks in advance.
I am a complete newbie to Node.js, Express, and Angular. I have a Node/Express app running on my localhost. I am trying to make this into a Twitter search application, using the Twitter API, so that I can enter a search term and the API returns the search results for this search term. For this, I am using the twitter package. In index.js, I have filled in my Twitter keys and secrets at the Xs as follows:
var Twitter = require('twitter');
var client = new Twitter({
consumer_key: 'X',
consumer_secret: 'X',
access_token_key: 'X',
access_token_secret: 'X'
});
When I then put the following code into index.js, the search results for keyword "awesome" are logged to the console:
var tmpSearch = 'awesome';
client.get('search/tweets', {q: tmpSearch}, function(error, tweets, response){
if (error) throw error;
console.log(tweets);
});
This works. My home page uses a controller myCtrl, which makes sure that when the user presses the Search button (with property ng-click="search(searchTerm)"), the entered search term is assigned to the variable searchTerm (using ng-model="searchTerm" for the input area). The code for the controller is as follows:
app.controller('myCtrl', ['$scope',
function($scope){
$scope.search = function(searchTerm){
console.log("Searching for " + searchTerm);
// Search here...
console.log("Search finished.");
};
}
]);
It logs the search term to the console, but I don't know how to proceed from here. Where it says // Search here... I want to execute the client.get code from above, but I cannot use the client variable from routes/index.js in my public/javascript.js. What do I need to add to my code in order to perform the search?
I have the feeling that I am not understanding a very important part of Node/Express, but I don't know which part that is, so my search for solutions hasn't been very succesful. I have never used APIs before either, and I have spent many hours going through documentation and tutorials both for Node.js and for the Twitter API, but it's only a week ago that I started learning it so most of it isn't making a lot of sense to me yet. I have found a few examples of Node apps using the Twitter API on GitHub (most of them using different packages), of which I tried to understand the code, but I couldn't figure out what I should do. I hope someone will be patient enough to explain to me what I am missing.
You need to think about where each step is happening. The Twitter code you're showing is running in Node, on your server. The myCtrl code is AngularJS code, running in the browser. As you've sensed, there's something missing to connect them.
The flow of control will be like this:
user types in a term and clicks the Search button
your controller sends an HTTP request to your Node.js
your Node.js server makes a call to Twitter
Node.js hands the results back to the client (myCtrl)
the results are displayed to your user
You have pieces of this in place. What's missing is the HTTP request and response. Here's what you do:
add an endpoint, say, /api/twittersearch. You'll do this with Node.js and Express
the implementation of that endpoint will be a function with parameters req and res (request and response; those names are not required but are frequently used); this function will do the new Twitter and client.get code that you have above
the client.get call has a callback function, which you have currently implemented; in your callback, you'll send the tweets back to the client (something like res.send(tweets)
in your controller, your "search here" code will be something like $http.get('/api/twittersearch?term=' + searchTerm)
That last call to $http.get() returns a Promise. You'll follow that up with .then(function(tweets){ ... }).catch(function(errors){ ... }). In the function you pass to then, you'll take the results from your call and update your model.
I am making a web app that pulls the latest posts from our Facebook page and processes them.
This is all working fine with a hard-coded access token generated from this page.
The problem is that this token expires, so i am looking for a solution to generate a new token every time the page loads or a non-expiring token - (i have read somewhere that non expiring tokens don't exist anymore).
So of course i did some research, here, here and here.
But non of these examples seem to be working.
Before any complaints of some code that i have tried so far, this is my working example - with an expiring access token:
var Facebook = function () {
this.token = 'MYTOKEN';
this.lastPost = parseInt((new Date().getTime()) / 1000);
this.posts = [];
};
Facebook.prototype.GetPosts = function () {
var self = this;
var deffered = $q.defer();
var url = 'https://graph.facebook.com/fql?q=SELECT created_time, message, attachment FROM stream WHERE created_time < ' + self.lastPost + ' AND source_id = 437526302958567 ORDER BY created_time desc LIMIT 5&?access_token=' + this.token + '';
$http.get(url)
.success(function (response) {
angular.forEach(response.data, function (post) {
self.posts.push(new Post(post.message, post.attachment.media, post.attachment.media[0].src, post.created_time, 'facebook'));
});
self.lastPost = response.data[response.data.length -1].created_time;
deffered.resolve(self.posts);
self.posts = [];
});
return deffered.promise;
};
return Facebook;
Any help / suggestion will be greatly appreciated.
First off, it is important to remember that Facebook has just launched the Version 2 of the Graph API. From April 2014 on, if you have issues with your app, you need to tell us when you created it on Facebook Developers (new apps use the Version 2 by default).
In order manage pages, your app needs to have manage_pages permission. Make sure that the user you want to manage fan pages for has authorized you. If your app uses the Version 2, make sure that Facebook (the Facebook staff) has authorized you to ask users that kind of permission, otherwise your app won't work.
Once you get your token, exchange it for a permanent token (or a token with long expiry date). Make sure you use the token of the fan page, not the token of the user.
If instead you want to read the stream of public fan pages, you need an access token with read_stream permissions. This permission needs to be approved by Facebook (see above) and this specific type of permission takes time to approve, if you're using the Version 2 of the Graph API. If you're using the old API (Version 1), you can still do that without pre-approval on Facebook's side.
The URL to ask for the permission to read the stream is as follows: https://www.facebook.com/dialog/oauth?client_id=$YOUR_APP_ID&redirect_uri=$YOUR_URL&scope=read_stream,manage_pages (i've added manage_pages in this case, you may not need it).
That url will prompt for authorization. Once the user has authorized the app, you'll be recirected to the URL you chose, with a code= variable.
At that point, call this other url:
https://graph.facebook.com/oauth/access_token?client_id={$app_id}&redirect_uri=$someurl&client_secret={$app_secret}&code={$code}
You'll get a response that has the access_token=variable in it. Grab that access token, exchange it for a long one, with the following URL:
https://graph.facebook.com/oauth/access_token?grant_type=fb_exchange_token&client_id={$app_id}&client_secret={$app_secret}&fb_exchange_token={$token_you_have_just_grabbed}
The response will give you a token that lasts for some time. Previously, Facebook had decided to have these "long duration tokens" expire after one month. I have found out, though, that they may have changed their mind: if you put a user token in the debugger, you'll see it never expires.
This is the authorization flow for users who visit with a browser. There's the app authorization flow too. If all you need is a stream from your own Fan page, you want to do the following (with Graph API V.1):
make an HTTP GET request using the following URL:
https://graph.facebook.com/oauth/access_token?type=client_cred&client_id={$app_id}&client_secret={$app_secret}
Use the resulting token to make another HTTP GET call, like so:
https://graph.facebook.com/{$your_page_id}/feed?{$authToken}&limit=10
//ten posts
Decode the json object
You're done.
Here is the problem, I have a Google Chrome extension and I want to use the BOSS API in it. The problem is that I do not know if it is possible to use the API without a webserver running.
The documentation does not provide any example using JavaScript. Thus my question:
Is it possible to use the Yahoo BOSS OAuth with JavaScript only?
Probably not...
All the examples Yahoo provides are using server side languages
http://developer.yahoo.com/boss/search/boss_api_guide/codeexamples.html
First you'd have to figure out how to use OAuth with JavaScript, and how will you obscure your API keys from users in a JS File? If you don't have to worry about that, say you are just using this for personal use. Maybe check out the code sample for Node.JS and modify it for your own uses.
http://developer.yahoo.com/boss/search/boss_api_guide/codeexamples.html#oauth_js
function yahooSearch(consumerKey, consumerSecret, query, count,
callback_error_data_response){
var webSearchUrl = 'https://yboss.yahooapis.com/ysearch/web';
var finalUrl = webSearchUrl + '?' + qs.stringify({
q: query, //search keywords
format: 'json',
count: count,
});
var oa = new OAuth(webSearchUrl, webSearchUrl, consumerKey, consumerSecret, "1.0", null, "HMAC-SHA1");
oa.setClientOptions({ requestTokenHttpMethod: 'GET' });
oa.getProtectedResource(finalUrl, "GET", '','', callback_error_data_response);
}
// Use this function to make a call back. Make sure to provide the right key, secret and query for this to work correctly yahooSearch('YAHOO CONSUMER KEY GOES HERE', 'YAHOO CONSUMER SECRET GOES HERE', 'SEARCH QUERY', 10, function(error, data, response){
// enter some code here and access the results from the "data" variable in JSON format
});
You can go to YQL Console and then enter your request, you can select Json or XML, after your result is fetched, look at the bottom of the page and then copy the url. You will be able to use that url inside script tags in an html doc and run it with your browser without a server.