I'm using facebook JS api and
FB.ui({
method: 'apprequests',
message: 'You should learn more about this awesome game.',
data: 'tracking information for the user'
});
but its not working on tab , the pop-up stats to load and then automatically become hidden .
http://developers.facebook.com/docs/reference/dialogs/
You can only use iframe in facebook apps, probably also on tab pages.
Related
I’m attempting to pass an API token for a user to grafana from our own internal website so that the main gui renders in an iframe. We don’t want the users to have to log into grafana after they have logged into our site, so we are creating their users in grafana, building an API token and attaching that to the user for our website. When the user goes to the page that has the grafana iframe, we are sending an ajax get request with the token so grafana renders the main dashboards with the users information.
If we do just a standard iframe everything works fine and we render inside the frame. We can get to the login page and do everything we need to. When I add the token so we don’t need to authenticate nothing renders and I see no errors/logs on either grafana or the website. If I send an invalid token I see the expected “401 invalid Api key” error on both the website and the grafana logs. This is what I’m sending from the website…
<div class="content">
<div class="container-fluid" id="container">
</div>
</div>
<script>
$.ajax({
url: "{{url}}",
type: "GET",
beforeSend: function(xhr){
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer {{token}}');
},
success: function(r) {
$('#container').html(r);
}
});
</script>
With the above nothing happens, I get no errors or logs. If I keep everything else the same and just adjust the token to make it invalid, grafana says it is invalid, so I know it is making it to the server. Why is nothing coming back to be rendered?
Thanks!
That' s an Error in Grafana-API, the generated API-Key. Use a Key that is generated inside Grafana
I have a Timeline App that creates a wall posting via the Graph API. The wall posting indicates that the posting was created by the App, which is fine. However, the link for the app points to the Canvas page: http://apps.facebook.com/app_name_space.
I need the link to point to the timeline version of the App: http://www.facebook.com/pages/PAGENAME/PAGEID?sk=app_APPID
I have tried the "actions" parameter on the Post call, but that didn't solve the problem.
Redirecting the Canvas page
Since you cannot use a 301 redirect for this purpose, here is what I did (asp.net):
1) Create a folder named 'canvas' under the website root.
2) Add a default.aspx file to the folder (can't use a static file as an app landing page)
3) Add the following javascript to the head tag:
<script type="text/javascript">
var parentPageName = '<%=ConfigurationSettings.AppSettings["ParentPageName"]%>';
var appID = '<%=ConfigurationSettings.AppSettings["AppID"]%>';
var myHREF = "http://www.facebook.com/" + parentPageName + "?sk=app_" + appID;
top.location.href = myHREF;
</script>
4) Change your App Canvas url to point to the 'canvas' folder.
That's how it works, the 'via' link goes to your app, not to an arbitrary page the app is installed on, because it could be installed on any Facebook page.
Redirect users that land on the canvas app to the page tab, if that's what you want
I have a facebook timeline page tab app that's running inside an IFRAME on a fan page.
On the main page of the app, we show 10 jobs and users can click through to the detail page of one single book.
We want to add a LIKE button on those detail pages, so that users on facebook can like and share that job in their stream.
The app is totally dynamic so different customers can install the app on their fan page and list their own jobs. (ex. coca-cola installs it on his coca-cola page and lists jobs within the company. then microsoft installs it as well and does the same)
The problem concerns og:metatags and redirection of the liked detail page link, right inside the right facebook company page and relative right detail page showing the job.
I can get these two things done and working but not at the same time:
A. Facebook gets correctly the og:metatags in the head section, with image, title, description when I use the following implementation of the like button (without "data-href" extra attribute)
<div class="fb-like"
data-send="false"
data-layout="button_count"
data-show-faces="false"
data-action="like"
data-font="arial">
</div>
The problem is that not specifying the data-href attribute (and the og:url meta is totally ignored) this is gonna create a link to the current page => intended current page inside an iframe => so the result will be that when you click the shared job on facebook you will be redirected NOT inside the facebook app -right page -right detail page, but to the detail page on the server that hostes the app.
B. If I instead specify the data-href attribute
<div class="fb-like"
data-href=<%= "http://www.facebook.com/pages/:page/#{session[:fb_page_id]}?v=app_XXXXXXX&app_data=#{#job_details.job_id}" %>
data-send="false"
data-layout="button_count"
data-show-faces="false"
data-action="like"
data-font="arial">
</div>
Doing this I can get the right link posted on facebook (so then using &app_data attribute) I can get the perfect redirection working.
BUT on the downside, the og:metatags are totally ignored and instead facebook picks the page tab metatags (top iframe that hostes the pagetab app) and so I get posted on facebook a crap link that tells about a page on facebook with the page app picture. And the even bigger downside is that when you like a job on the app, all the jobs appear to be liked as well (basically the iFrame app becomes the liked page... instead of being the job detail page picked as liked page)
Is out there any genius that knows how to sort this out? I need to get the A an B working at the same time to get the requested result!!!!
Please help!!! :(
I've found the solution myself.
Like button => use href and ref attributes, especially put on the ref the id of your facebook fan page. Passing the current page url will also load and share correctly the og:metatags.
<div class="fb-like"
data-send="false"
data-show-faces="false"
data-layout="button_count"
data-font="arial"
data-action="recommend"
href=<%= "https://app.com/jobs/job_details.job_id" %>
ref=<%= FB_PAGE_ID %>>
</div>
Once you pass the ref attribute to facebook, on your wall the link will be posted by facebook with an extra query string appended with in particular the "fb_ref" parameter:
for example a button with parameters:
href=<%= "https://app.com/jobs/job_details.job_id" %>
and
ref=<%= 332325142248470 %>
becomes:
https://app.com/jobs/a0Ed000000a54bkEAA?fb_ref=332325142248470&fb_source=profile_multiline
when the user clicks the link we want to be redirected back right inside the correct page tab app and right job details page. To achieve this we set up into the controller/show action (that in ruby corrisponds to controller_name/id) a new redirection, remembering that ref will put inside a query string after our href link:
if params[:fb_ref]
redirect_to "http://www.facebook.com/pages/:page/#{params[:fb_ref]}?v=app_xxxxx&app_data=#{params[:id]}"
end
As you can see we create a new dynamic url that will use the "app_data" parameter of the facebook "signed_riquest" (http://developers.facebook.com/docs/authentication/signed_request/) in order to pass to our application the right detail page to be visualized and also redirect us to the right facebook page.
once done this we have just to manage correctly the new app_data parameter that comes now with the signed_request. In my case in one of my main controller I've used:
if fb_signed_request[:app_data]
redirect_to "/jobs/#{session[:app_data]}"
end
And we will see our app loading the right page and the right job detail page!
Hope is gonna help other people!
How can I get the like count (new fans) of my Facebook fan page from a specific tab (application)?
Let us say my Facebook fan page has three tabs (hence three applications). How can I know how many likes was originated from each of these three tabs?
You will have to count them yourself as the "like" action is being performed for the same object (page object).
Use this method and the JavaScript SDK to detect when a user "likes" the page.
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
Taken from here : https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
Once you detect the "like" you can post to your server and include the app_id. Store this in your database and hey-presto - per tab like counts :P
I'm integrating FB social plugins - Like box and Like buttons (as iframes) - on a web page, but they don't work.
When I click on Like in "Like box", I get "Error" text with link, which displays a message dialog "The page at https://www.facebook.com/provocateur.eu could not be reached.".
JSON response is:
for (;;);{"__ar":1,"payload":{"requires_login":false,"success":false,"already_connected":false,"is_admin":false,"show_error":true,"error_info":{"brief":"Website Inaccessible","full":"The page at https:\/\/www.facebook.com\/provocateur.eu could not be reached.","errorUri":"\/connect\/connect_to_node_error.php?title=Website+Inaccessible&body=The+page+at+https\u00253A\u00252F\u00252Fwww.facebook.com\u00252Fprovocateur.eu+could+not+be+reached.&hash=AQARp73z7huT0Eiu"}}}
When I click on the Like button, the JSON response is:
for (;;);{"__ar":1,"payload":{"requires_login":false,"success":false,"already_connected":false,"is_admin":false,"show_error":true,"error_info":{"brief":"An error occurred.","full":"There was an error liking the page. If you are the page owner, please try running your page through the linter on the Facebook devsite (https:\/\/developers.facebook.com\/tools\/lint\/) and fixing any errors.","errorUri":"\/connect\/connect_to_node_error.php?title=An+error+occurred.&body=There+was+an+error+liking+the+page.+If+you+are+the+page+owner\u00252C+please+try+running+your+page+through+the+linter+on+the+Facebook+devsite+\u002528https\u00253A\u00252F\u00252Fdevelopers.facebook.com\u00252Ftools\u00252Flint\u00252F\u002529+and+fixing+any+errors.&hash=AQAFI_8ieMUGPPxS"}}}
This is the "Like box" iframe code:
<iframe frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:240px; height:70px;" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fprovocateur.eu&width=240&height=70&colorscheme=dark&show_faces=false&border_color&stream=false&header=true&appId=283499041689204"></iframe>
and this is the "Like button" iframe code:
<iframe frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:203px; height:21px;" src="//www.facebook.com/plugins/like.php?href&send=false&layout=button_count&width=203&show_faces=false&action=like&colorscheme=light&font=arial&height=21&appId=283499041689204"></iframe>
The behaviour is the same for admin and non-admin visitors and for any browser. I created application with the same name as FB page with appId 283499041689204. Web page is XHTML transitional valid, and it contains no errors according FB debugger/linter. Formely there was age restriction (17+), but I removed it and for the moment it is accessible for anyone (13+).
URL of web page: http://provocateur.eu/
URL of FB page: in the first error message
Any help appriciated. Thanks in advance.