Posting custom Facebook Stories in javascript - javascript

I've been through the jungle of Facebook's antiquated documentation, looked all over google and all over stack overflow. There just seems to be something I'm not getting about posting a custom story using graph objects. I have an app which just a basic quiz i built in flash builder, it asks you 4 questions and gives you a score based on how many you got right. In the future i want to be able to publish a story on behalf of the user that indicates their score and directs them to the app.
However, I'm stuck on square one, which is publishing a custom story at all. Once i get over that hurdle i should be able to figure it out from there.
So, here's what I've got. I'm using flash builder to build a web app, which im hosting on my domain (an https domain). In the hmtl template, I'm setting meta-tag information for an object "Quiz", which is hosted on the domain as an index.html page. Here is my meta-tag information
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# gqt_test: http://ogp.me/ns/fb/gqt_test#">
<meta property="fb:app_id" content="my app id" />
<meta property="og:type" content="getquiztool_test:quiz" />
<meta property="og:url" content="https://my domain.com/getquiztool/" />
<meta property="og:title" content="Sample Quiz" />
<meta property="og:image" content="https://my domain.com/getquiztool/game.png" />
<meta property="gqt_test:score" content="Sample score" />
I am also loading the facebook SDK like this, which has worked for some of the simple code tests before, such as posting a like action.
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&appId=258148224385655&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I've also created the custom story from the app page "Open Graph" section, using the action "Take" and the object "Quiz".
Here is what is working for me. These two buttons. The first allows the user to share the website as a link. The second was an attempt to do "feed-gaming", which I stopped working towards because I believe they've mostly stopped supporting it. It works as far as it lets you share a link to the site with the swf embedded in the post (but unable to be run).
<div class="fb-share-button" data-href="mydomain.com/app_namespace"></div>
<button onclick="var obj = {
method: 'feed',
title: 'Test',
link: 'mydomain.com/app_namespace'
};
function callback(response) {
console.log(response);
}
FB.ui(obj, callback);"
>Share me, please</button>
So the Facebook SDK is working on my domain. Here's what isnt working. Using the sample code they provided. I've changed this about a dozen times to like 5 different sets of code, so im not even sure what isn't working about each one.
function shareStatus()
{
FB.ui(
{
method: 'share_open_graph',
action_type: 'getquiztool_test.quiz',
action_properties: JSON.stringify(
{
object:'https://mydomain.com/app_namespace/',
})
}, function(response){});
}
When I call this function, i get that the action type isnt valid from the facebook popup. Which, really, makes sense because thats an object and not an action. But I'm not sure what i should be calling in this function.
I have tried the code generated for me from Facebook, like so
FB.api(
'me/gqt_test:take',
'post',
{
quiz: "http://samples.ogp.me/258211017712709"
},
function(response) {
// handle the response
}
);
inside the shareStatus() function, but when i do that, i get nothing. No response, no error.
I'm sorry for the wall of text, but I just want it known that I'm not coming here after 5 minutes of frustration. This is about 3 days, probably 10 hours, of fiddling around with this, trying to learn the documentation and trying to get results. I have learned a lot, but none of it seems connected to me. Am i missing something?
The least I can ask for is a detailed tutorial you might know of, just a link. Like, step by step by tedious step. Because the facebook documentation just assumes you know how other parts of it works, and links bring you in circles and never explain things clearly or give examples.

So I figured it out. It was something super dumb, as I suspected. And, as always when I ask a question anywhere, it happened a few hours after. Although, the app namespace i needed to use was an abbreviation of my app's name, which i dont really remember setting myself (instead of something like "myappnamespace_test" it was "man_test", so my app namespace was abbreviated to M-A-N)
Here is the call that worked for me given that everything else was in place.
function shareStatus()
{
FB.ui(
{
method: 'share_open_graph',
action_type: 'man_test:take',
action_properties: JSON.stringify(
{
quiz:'https://mydomain.com/whereTheObjectWithMetaTagsIs',
})
}, function(response){});
}

Related

how to display a rally "custom board" dashboard in confluence wiki

I have been digging in the this site and others for several days and the answer to my problem still escapes me.
I have read all of these pages:
http://pastebin.com/cbagkw8h
but none of them exactly answers this question:
I am trying to get a Rally Dashboard (custom board) to appear in HTML/Javascript in a confluence wiki. I have gotten a simple Standard Report working using a read-only account and AppSDK1.32 with loginKey by embedding the following HTML/Javascript into the Confluence wiki page:
{html}
<meta name="Name" content="App Example: Rally Application" />
<meta name="Version" content="2011.04" />
<meta name="Vendor" content="Rally Software" />
<script type="text/javascript"
src="https://rally1.rallydev.com/apps/1.32/sdk.js?loginKey=loginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkey">
</script>
<script type="text/javascript">
function onLoad() {
var rallyDataSource = new rally.sdk.data.RallyDataSource(
'__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
rally.sdk.ui.AppHeader.destroy();
var reportConfig = {report: rally.sdk.ui.StandardReport.IterationBurndown,
width : 400, height: 300};
var report = new rally.sdk.ui.StandardReport(reportConfig);
report.display("reportDiv");
}
rally.addOnLoad(onLoad);
</script>
<div id="reportDiv" style="width: 400px; margin-left:20px"></div>
<br/>
{html}
I am trying to expand this success to an entire dashboard with App SDK2.x using the new apiKey - by using the following code:
{html}
<meta name="Name" content="App Example: Rally Application" />
<meta name="Version" content="2015.04" />
<meta name="Vendor" content="eBay Enterprise" />
<script type="text/javascript"
src="https://loginapirally1.rallydev.com/apps/1.32/sdk.js?loginKey=loginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkey">
</script>
<script type="text/javascript">
function onLoad() {
rally.sdk.ui.AppHeader.destroy();
document.getElementById("iframeA").width = screen.width - 60 ;
document.getElementById("iframeA").height = (screen.width - 60 ) * 3;
}
rally.addOnLoad(onLoad);
</script>
<iframe id="iframeA" src="https://loginapirally1.rallydev.com/#/111111111d/custom/222222222?expandApp=333333333&apiKey=_apikeyapikeyapikeyapikeyapikeyapikeyapikey" width="1024" height="1024">
</iframe>
<br/>
{html}
I am noticing a few things:
1) it almost works - I get the dashboard/report title but not the cards
2) the apiKey seems to have no affect at all - I still get prompted for a login and password (which I could stand if I could see the cards).
3) it doesn't seem to matter if I put the apiKey before or after the hash symbol
Citation A suggested using the "full screen" dashboard/report but didn't cover the apiKey.
Citaton B says that the AppSDK2 uses the apiKey as of Apr 14 2014 but doesn't say how to use it exactly with AppSDK2.
I have gotten the apiKey to work with the Ruby API but it is unclear how to access the dashboard/reports from there.
Citation C says that the AppSDK1 is based on the Javascript dojo framework and the AppSDK2 is based on the Javascript Sencha's ExtJS but avoids giving any kind of rosetta stone from one to the other.
The only other options I can think of is to 1) copy the entire HTML page-source from the "Custom Board" and then start debugging the Javascript with ExtJS (but I cannot find an example of where to put the apiKey for ExtJS) or 2) bypass all of the APIs and use Ruby Watir-Webdriver (which uses
Selenium) and VNCServer to clip an image of the "Custom Board" page and show THAT in confluence.
Citations: http://pastebin.com/YMUEPjSF
The issue seems to be specific to the canned Custom Board that cannot be loaded externally. It should work if you write a js source code to build a similar Board and compile that into a deployment html. That is similar to option (1) you mentioned in the end of your post if I understand it correctly.
Here is my test where I compared Custom Board and Custom HTML side by side.
Below is a screenshot from Rally. This custom dashboard has Custom Board on the left and Custom HTML on the right. The Custom HTML is using a code example of filterable board from AppSDK2 documentation.
Next I use this code:
<html>
<head>
<title>Custom Grid</title>
<meta name="Name" content="App: Custom Dashboard"/>
<meta name="Version" content="2011.08.31"/>
<meta name="Vendor" content="Rally Labs, NickM"/>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.32/sdk.js?loginKey=c33e83...."></script>
<script type="text/javascript">
rally.addOnLoad(function() {
var iframe = document.createElement("iframe");
iframe.src = "https://loginapirally1.rallydev.com/#/14018981229/custom/34207853894"
iframe.width = 2000;
iframe.height = 1000;
document.getElementById("storyboard").appendChild(iframe);
});
</script>
</head>
<body>
<div id="storyboard"></div>
</body>
</html>
Here is the dashboard loaded externally on localhost:3000. The left column of the dashboard where Custom Board is expected to load is empty, but the right column with a custom html code of a board loads successfully:
It looks like the canned Custom Board cannot be loaded externally but a custom html code written in AppSDK2 can be displayed externally.
A couple of observations:
There is really no upgrade path from AppSDK1 to AppSDK2. The underlying frameworks and the class structures are very different and the code cannot be simply refactored. There is no translation from one to the other.
LoginKey is intended to work with AppSDK1. Both are legacy. Both predate AppSDK2 and ApiKey. To use ApiKey with custom html apps written with AppSDK2 see "Use API Key with AppSDK2" article.
AppSDK2 does not support LoginKey usage for authentication. The reason it seems to work in this example is that we load the entire page. Loading the entire page using iframe's src property is possible with LoginKey. In this example there is no reason to use ApiKey and LoginKey together. You are right that ApiKey makes no difference in this use case.
The way LoginKey works is that it "tricks" the browser into thinking that there is this different server, loginapirally1.rallydev.com. If you look in Network tab of your browser and see that request comes from there it means that LoginKey is working. ApiKey works differently. There is no equivalent to loginapirally1 server with ApiKey.
If you are being prompted to supply login credentials when using LoginKey it means that LoginKey is not working. See "LoginKey Troublshooting" article.
Embedding custom AppSDK2 apps in 3rd party portals (running custom apps externally) is possible with ApiKey, and the supported scenario described in this guide is similar to the option (1) you mentioned in the end of your post. Loading entire Rally page or entire Rallynavigation is not a supported use case even though it is possible with LoginKey.

Options to store data on desktop, using webpage

Goal:
To sum it up, I'm trying to replace an excel spreadsheet. I'm creating an application that will run in IE9, but does not connect to the internet or an intranet (I know, I know. Just bear with me. If you're curious read more below). It needs to use CRUD (create, read, update, and delete) methods on a set of data that changes daily. The dataset must persist even when the browser is closed.
Question:
What options are available, using javascript and html, for storing data on the local computer the web page is accessed on? I'm doing this at work, so there will be no server-side to this. I also will not be able to install any software on the computer, although I can download javascript plugins. The webpage will be loaded from a file on the computer, using Win 7 and IE9.
Background:
This deserves an explanation. I use an excel spreadsheet to track a set of data that changes daily. I'm learning HTML and javascript, and I can create a much better (and easier to use) solution as a webpage. I can create the UI / UX, but I'm having a difficult time figuring out how to store the data on the local computer. Any good suggestions?
Attempts:
Unfortunately, it seems localStorage is not an option. I'm attempting to use jStorage, but I've been running into problems there, also. A similar set of problems has been encountered using simpleStorage.
Thank you for considering, please let me know if any more info is needed, or if I need to clarify something.
Addendum:
Localstorage, and other forms of HTML5 storage, do not work. Officially it does, unofficially it is very buggy. See blog post here, and SO answer here. Either way, with the following simple code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Backlog Tracker</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="backlog_localstorage.js"></script>
</head>
<body>
</body>
</html>
and javascript (ref as "backlog_localstorage.js" above):
$(document).ready(function(){
$("body").append("<button>Try It</button>");
$("button").click(function(){
localStorage.setItem("key1", "Hello");
console.log(localStorage.getItem("key1"));
});
});
... I get the following error: "SCRIPT5007: Unable to get value of the property 'setItem': object is null or undefined" on the line localStorage.setItem("key1", "Hello");
HTA (which is really just an html file with one extra tag and a different file extension) is one possible solution for windows users:
Important: Save as demo.hta to run on windows as an app
<!DOCTYPE html>
<html> <!-- some parts lifted from
http://msdn.microsoft.com/en-us/library/ms536496(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ms536473(v=vs.85).aspx
-->
<head>
<title>State Saving Demo</title>
<hta:application id="App"
application="yes"
applicationname="demo"
icon="calc.exe"
border="thin"
caption="yes"
sysmenu="yes"
showintaskbar="yes"
singleinstance="yes"
sysmenu="no"
maximizeButton="yes"
minimizeButton="yes"
navigable="no"
scroll="yes"
contextmenu="no"
selection="no"
windowstate="normal" >
<!-- Use Internet Explorer 10 Standards mode (to use JSON, CSS3, etc...) -->
<meta http-equiv="x-ua-compatible" content="IE=10">
</head>
<body onload=loadMe() >
<h1 id=h1>Command-line args: </h1>
<h3>Persisted Text</h3>
<textarea rows=20 cols=100 id=mydata onchange=saveMe() >
You can change me and i won't forget!
</textarea>
<script>
document.title+=" - Today is " + Date(); // task/title bar demo
h1.innerHTML+= JSON.stringify( App.commandLine ); // optional invocation info here (much like a real app)
// app-specific custom code:
FILENAME="state.txt";
function saveMe(){save(FILENAME, mydata.value); }
function loadMe(){mydata.value=load(FILENAME) || mydata.value;}
// generic utils:
function load(filename) { //IE FSO file Loader
var file,
text="",
fso= new ActiveXObject('Scripting.FileSystemObject');
try{
file = fso.OpenTextFile(filename, 1, false);
text = file.readAll();
file.Close();
}catch(y){}
return text;
}
function save(filename, sData){ //IE FSO file Saver
var file,
fso = new ActiveXObject('Scripting.FileSystemObject');
file = fso.CreateTextFile(filename, 2, false);
file.write(sData);
file.Close();
return file;
}
</script>
</body>
</html>
I recently re-discovered HTAs, and they are not half bad. I don't think I would want to distribute and maintain them, but HTA's are an easy way to make simple desktop app using HTML, CSS, and JS. Its nice not to have to build anything to "recompile" the app after changes are made. saves a few steps compared to node-webkit, packaged apps, air, cordova, etc, but HTA's have a major downside: they only work on windows afaik...
Looks to me like you can use LocalStorage, the big question is how are you trying to store it? You can easily store an object/array into LocalStorage, and that object/array can be your data, then JS can output this into a table. If you're looking to store actual files then you're looking at something more like an ActiveX plugin.
http://caniuse.com/#search=localstorage
Alternatively if you have internet access through a desktop or a phone you can put this on Google Drive. This would be far easier than reinventing the wheel.

Share This API Facebook Share Image not showing

I have the trio button social media share using Share This API. Everything is ok. They are all sharing right contents. But except for the facebook share image, it cannot be registered as part of the og properties. No image is shown when the facebook popup share shows up. Can someone help please? Thanks in advance!
I actually just followed the template given by client and I dont want to change API/plugin as much as possible. And I cant find any documentation of this kind of service in the API's site http://developer.sharethis.com/.
This is the code.
<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=71dfd17f-04ad-4bd7-acfc-7a47e609cc6f&type=website&post_services=email%2Cfacebook%2Ctwitter&button=false"></script>
<script type="text/javascript">
var BASE_URL = "http://mydemosite.com/";
var shared_object1 = SHARETHIS.addEntry({
title:"My Site | This is showing in fb debugger",
url: BASE_URL,
summary:'My summary. This is showing in fb debugger.',
content:'My Content. This is showing in fb debugger.',
image: BASE_URL + 'share.png'
});
console.log(BASE_URL + 'share.png'); //This returns exactly the url of the image
shared_object1.attachChicklet("email", document.getElementById("share_email"));
shared_object1.attachChicklet("facebook", document.getElementById("share_fb"));
shared_object1.attachChicklet("twitter", document.getElementById("share_twitter"));
</script>
I also checked in facebook's debugger. No image was listed under og: properties.
https://developers.facebook.com/tools/debug
It now worked when I hardcoded also in my <head> tag:
<meta property="og:image" content="<?php echo $base_url; ?>share.png"/>

Can I pass some parameters with fb.api call in open graph

Please see these below code which I am using for Facebook Open Graph:
<meta property="fb:app_id" content="XXXXX" />
<meta property="og:type" content="collection" />
<meta property="og:url" content="http://XXXXXXXXXXXXX/" />
<meta property="og:title" content="" />
<meta property="og:image" content="http://XXXXXXXXXXXXXXXXXXXXXXXXXX.jpeg"/>
<script type="text/javascript">
function postCook() {
var parameters = new Array();
parameters["og:title"] = "some_text";
FB.api(
'me/<namespace>:<wwwww>',
'post', {
collection: 'http://XXXXXXXXXXXXXXXXX/'
},
function(response) {
//alert(response.responseText);
console.log(response);
if (!response || response.error) {
alert('Error occured');
} else {
alert('Other22 was successful! Action ID: ' + response.id);
}
});
}
</script>
Here I want to pass og:title and some other also as parameter instead of using in the meta tag. Is there any way to pass some more parameters in FB.api?
Thanks.
While I could be wrong about this (as Facebook shifts their API around mercilessly), they don't allow you to pass in any custom tag information, possibly as it could be used to misrepresent information.
Instead, once the publish action hits Facebook, Facebook will immediatelly scrape the url passed in, and grab all the meta data it can find, prioritising any open graph tags first before falling back to other traditional methods of meta information retrieval (title tags, scraping the body text, etc).
One possible "workaround" would be to pass an "echo" url to Facebook instead of the target url itself. This relies on you using a server-side solution, however, as I don't believe you can do this with the JS SDK.
i.e. Instead of passing http://www.foobar.com to facebook, pass http://www.barbaz.com/echo.php?title=your%20custom%2otitle&description=etcetc&url=myurl
Tailor the url parameters as necessary, and they will be readable in echo.php through $_GET. echo.php would then contain the open graph tags to be read by Facebook, and then redirect the user via javascript to the proper URL. Facebook's scraper won't follow the javascript redirect.
echo.php:
<html>
<head>
<meta property="og:title" value="<?=$_GET['title']?>">
</head>
<body>
<script>
window.location.href = '<?=$_GET['url']?>';
</script>
</body>
</html>
Alternatively, you could check for facebook's user-agent string at the top of echo.php and redirect any non-hits to the proper url using header();, and only render the bounce page for the facebook bot.
Here I want to pass og:title and some other also as parameter instead of using in the meta tag.
This is not how Open Graph objects work.
The URL identifies the object, and any data has to be in the HTML code that this URL delivers.

Facebook app submit action type

I've been reading about this on StackOverflow and facebook doc, yet I dont seem to be able to submit my action type.
I have the following code from the FB doc
<script type="text/javascript">
console.log("Function begins");
function postForm()
{
console.log(FB);
FB.api(
'/me/concoursvelirium:form',
'post',
{ recipe: 'http://concours.gestev.com/fbvel2012/form.php' },
function(response) {
console.log("Stay");
if (!response || response.error) {
console.log("error: " + response);
} else {
console.log('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
I have added my values from FB autogenerated values, it now looks like this:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# concoursvelirium: http://ogp.me/ns/fb/concoursvelirium#">
<meta property="fb:app_id" content="194081877384051" />
<meta property="og:type" content="concoursvelirium:form" />
<meta property="og:title" content="Concours Vélirium" />
<meta property="og:image" content="http://www.velirium.com/++resource++snowjamboree.theme.images/velirium-avatar-128x128.png" />
<meta property="og:description" content="Concours Vidéotron au Vélirium" />
<meta property="og:url" content="http://concours.gestev.com/fbvel2012/form.php" />
And yet I see no output in the console past the console.log(FB);
I have no idea what I'm doing wrong. I'm also getting the Unsafe JavaScript attempt to access frame with URL error, but I have read here that I should just ignore it.
Ty, Axel
I think you have two problems here:
og:url should have a valid url.
og:image can't refer to an image hosted on Facebook's servers.
I finally found the issue, and it's not that hard, provided you don't read too much facebook's doc. Even tough they give you a POST command and a JS code to validate your action, I wasn't able to validate mine. Tough there's an easier way to submit actions for approval:
Head to your app settings In the open graph section go to dashboard
Next to the action type you want to submit click the "get code"
link(remember.. action type, not the object type "get code" button)
Copy the code inside the "Create a new Complete action:" box in a
linux terminal If you got an output like: {"id":"[YOUR-ID-NUMBER]"}
congratulations, you can now submit your action!
GL HF everyone

Categories