Facebook integration - tutorial for posting to a user's wall
StusApps
Member, PRO Posts: 1,352
Hi guys
As promised below is some information about adding a pseduo-facebook integration to your apps using the URL link feature on pro accounts. The result of these methods is a box posted to the users wall with links out to iTunes purchase pages for your app. Also a link to a Facebook fan page as well.
**Please note I have not included the dynamic script that detects the incoming URL and then changes some details for the post. You will need to use one of the methods below for each type of post you want to make to a users wall. The reason is that when chatting by email with the Facebook people they classed it as against their terms and also it didn't quite work right anyway.**
Also note that I did all this by reading and following info I found in lots of places. I am not an expert in these things, but if you are then you could probably improve these things :-)
Before I start though there is a limitation in that there is no way to automatically return to your app after the posting. The user will have to double tap the home button to return to your game. It's actually really really easy for GS to implement as it's just an entry in the info.plist to be able to launch (or return to) an app from a url. But we can't do this ourselves. I balance the fact that people are leaving your app with the fact that making a Facebook post potentially advertises your app to about 200 of their friends.
Both of these methods are simply a temporary way of doing this. If you want a really nice way then wait for GS to add the feature themselves. It will look far better and the user won't have to leave the app. But for now this is ok.
So… 2 different options below that I will post and explain the pros and cons of each.
Both begin though with setting up your app with Facebook. Visit this link to do that https://developers.facebook.com/setup/
Once set up you will be able to add a few details for your app. DO NOT put anything in the section for Facebook canvas. This is where you would put an iframe link to a Facebook app. You might be able to use the new gamesalad arcade embed code here (I've not tried). However is you activate this section and leave it blank then you get a rude email from Facebook accusing you of trying to use their graph api to steal user information.
Anyway, once set up if you go to the summary page you will see 3 important pieces of information.
-The appID
-The API key
-The app secret
We will only be using the appID though for this.
The next step is to choose how you want to integrate. The first option below is the simplest. This just uses your appID and a feed dialog URL to post a pre-set post (with links) to the users wall.
Here is the URL (it's kinda long)
http://www.facebook.com/dialog/feed?
app_id=INSERT APPID HERE&
link=INSERT A URL LINK TO YOUR APP IN ITUNES HERE&
picture=INSERT A URL TO A JPG ICON HERE&
name=INSERT%20TITLE%20HERE&
caption=INSERT%20SUBHEADING%20HERE&
description=THEN%20WRITE%20A%20COMMENT%20HERE%20THAT%20WILL%20BE%20SHOWN%20UNDER%20THE%20TITLE&
message=THIS%20IS%20TO%20PRE-WRITE%20THE%20USERS%20COMMENT&
redirect_uri=http://INSERT A URL LINK TO REDIRECT THE USER TO AFTER POSTING
This URL seems to be too long for putting straight into the URL link behavior in gamesalad so I use goo.gl url shortener to make things easier. Here is an example: http://goo.gl/kVpN9 . Give it a click and try (it is currently linked to an iTunes page that does not exist yet as the game is still in approval.
Now for me this top method is great. It's simple and clean and requires no page redirection (except at the end). It gives a nice box that links to your iTunes purchase page from both the icon and the title. Also at the bottom is a link to the Facebook fan page for your app (which is set up automatically when you registered your app with Facebook). What it doesn't do is authorize you to repost stuff to that users wall, and it doesn't collect any use information. If you want to get into authorization and stuff you will need use the option below.
To use this method you will need to create a php file that you link to from gamesalad.
Here is an example code:
<!-- stusapps.com -->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>MonkeyUp</title>
<style>
body {
background: url("INSERT A BACKGROUND JPG") no-repeat;
}</style>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {FB.init({appId: APPID GOES HERE, status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }());
</script>
<script>
function publish_to_wall(){
FB.ui(
{ method: 'stream.publish',
message: 'PRE-WRITTEN COMMENT GOES HERE',
attachment: {
name: 'INSERT TITLE HERE',
caption: 'INSERT SUBHEADING HERE',
description: (
'INSERT DESCRIPTION HERE'
),
media: [
{
type: 'image',
href: 'INSERT ITUNES URL LINK HERE',
src: 'INSERT URL TO JPG ICON'
}
]
,href: 'INSERT ITUNES URL LINK HERE'
},
action_links: [
{ text: 'other title', href: 'INSERT ITUNES URL LINK HERE' }
],
user_message_prompt: 'user_message_prompt'
});
}
function publish_authenticated(){
FB.login(function(response) {
if (response.perms) {
publish_to_wall();
}
}, {perms:'publish_stream'});
}
function publish_universal(){
FB.login(function(response) {
if (response.session) {
if (response.perms) {
publish_to_wall();
}else {
publish_to_wall();
}
}else {
publish_to_wall();
}
}, {perms:'user_checkins'});
}
</script>
<center><img src="INSERT A FB BUTTON GRAPHIC FOR PEOPLE TO CLICK ON HERE"></center>
</body>
</html>
Save all this in a php file and upload to your server somewhere, then direct the user to that url from a link in your app. This method will authorize the user to post anytime they click the link and the interface they see looks slightly nicer. However it bounces them between 2 different pages in safari. It does however give you access to post to their walls about updates and other stuff you would like to.
Up to you which you use but I went with the first option in the end. It's easy and doesn't ask the user to authorize anything. Whichever you choose the overall box posted to their wall is identical.
The video I posted last time (below) is the second method:
Hope that makes sense, let me know if you hit any problems.
As promised below is some information about adding a pseduo-facebook integration to your apps using the URL link feature on pro accounts. The result of these methods is a box posted to the users wall with links out to iTunes purchase pages for your app. Also a link to a Facebook fan page as well.
**Please note I have not included the dynamic script that detects the incoming URL and then changes some details for the post. You will need to use one of the methods below for each type of post you want to make to a users wall. The reason is that when chatting by email with the Facebook people they classed it as against their terms and also it didn't quite work right anyway.**
Also note that I did all this by reading and following info I found in lots of places. I am not an expert in these things, but if you are then you could probably improve these things :-)
Before I start though there is a limitation in that there is no way to automatically return to your app after the posting. The user will have to double tap the home button to return to your game. It's actually really really easy for GS to implement as it's just an entry in the info.plist to be able to launch (or return to) an app from a url. But we can't do this ourselves. I balance the fact that people are leaving your app with the fact that making a Facebook post potentially advertises your app to about 200 of their friends.
Both of these methods are simply a temporary way of doing this. If you want a really nice way then wait for GS to add the feature themselves. It will look far better and the user won't have to leave the app. But for now this is ok.
So… 2 different options below that I will post and explain the pros and cons of each.
Both begin though with setting up your app with Facebook. Visit this link to do that https://developers.facebook.com/setup/
Once set up you will be able to add a few details for your app. DO NOT put anything in the section for Facebook canvas. This is where you would put an iframe link to a Facebook app. You might be able to use the new gamesalad arcade embed code here (I've not tried). However is you activate this section and leave it blank then you get a rude email from Facebook accusing you of trying to use their graph api to steal user information.
Anyway, once set up if you go to the summary page you will see 3 important pieces of information.
-The appID
-The API key
-The app secret
We will only be using the appID though for this.
The next step is to choose how you want to integrate. The first option below is the simplest. This just uses your appID and a feed dialog URL to post a pre-set post (with links) to the users wall.
Here is the URL (it's kinda long)
http://www.facebook.com/dialog/feed?
app_id=INSERT APPID HERE&
link=INSERT A URL LINK TO YOUR APP IN ITUNES HERE&
picture=INSERT A URL TO A JPG ICON HERE&
name=INSERT%20TITLE%20HERE&
caption=INSERT%20SUBHEADING%20HERE&
description=THEN%20WRITE%20A%20COMMENT%20HERE%20THAT%20WILL%20BE%20SHOWN%20UNDER%20THE%20TITLE&
message=THIS%20IS%20TO%20PRE-WRITE%20THE%20USERS%20COMMENT&
redirect_uri=http://INSERT A URL LINK TO REDIRECT THE USER TO AFTER POSTING
This URL seems to be too long for putting straight into the URL link behavior in gamesalad so I use goo.gl url shortener to make things easier. Here is an example: http://goo.gl/kVpN9 . Give it a click and try (it is currently linked to an iTunes page that does not exist yet as the game is still in approval.
Now for me this top method is great. It's simple and clean and requires no page redirection (except at the end). It gives a nice box that links to your iTunes purchase page from both the icon and the title. Also at the bottom is a link to the Facebook fan page for your app (which is set up automatically when you registered your app with Facebook). What it doesn't do is authorize you to repost stuff to that users wall, and it doesn't collect any use information. If you want to get into authorization and stuff you will need use the option below.
To use this method you will need to create a php file that you link to from gamesalad.
Here is an example code:
<!-- stusapps.com -->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>MonkeyUp</title>
<style>
body {
background: url("INSERT A BACKGROUND JPG") no-repeat;
}</style>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {FB.init({appId: APPID GOES HERE, status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }());
</script>
<script>
function publish_to_wall(){
FB.ui(
{ method: 'stream.publish',
message: 'PRE-WRITTEN COMMENT GOES HERE',
attachment: {
name: 'INSERT TITLE HERE',
caption: 'INSERT SUBHEADING HERE',
description: (
'INSERT DESCRIPTION HERE'
),
media: [
{
type: 'image',
href: 'INSERT ITUNES URL LINK HERE',
src: 'INSERT URL TO JPG ICON'
}
]
,href: 'INSERT ITUNES URL LINK HERE'
},
action_links: [
{ text: 'other title', href: 'INSERT ITUNES URL LINK HERE' }
],
user_message_prompt: 'user_message_prompt'
});
}
function publish_authenticated(){
FB.login(function(response) {
if (response.perms) {
publish_to_wall();
}
}, {perms:'publish_stream'});
}
function publish_universal(){
FB.login(function(response) {
if (response.session) {
if (response.perms) {
publish_to_wall();
}else {
publish_to_wall();
}
}else {
publish_to_wall();
}
}, {perms:'user_checkins'});
}
</script>
<center><img src="INSERT A FB BUTTON GRAPHIC FOR PEOPLE TO CLICK ON HERE"></center>
</body>
</html>
Save all this in a php file and upload to your server somewhere, then direct the user to that url from a link in your app. This method will authorize the user to post anytime they click the link and the interface they see looks slightly nicer. However it bounces them between 2 different pages in safari. It does however give you access to post to their walls about updates and other stuff you would like to.
Up to you which you use but I went with the first option in the end. It's easy and doesn't ask the user to authorize anything. Whichever you choose the overall box posted to their wall is identical.
The video I posted last time (below) is the second method:
Hope that makes sense, let me know if you hit any problems.
Comments
Cheers
What this is is just a way of using the 'Open URL' behavior that pro users have to do something kinda cool.
Did I do this Correctly??
Regards,
BG
http://www.facebook.com/dialog/feed?
app_id=136972846374703&link=http://itunes.apple.com/us/app/balls-of-goo/id436707075?ls=1&mt=8&;
picture=http://i1231.photobucket.com/albums/ee514/Bo_Garza8/icon2.png&;
name=Balls%20of%20Goo&caption=For%20iPhone&
description=Congrats%20on%20Beating%20World%20one!%20If%20you%20think%20you%20can%20do%20better%20press%20the%20image%20to%20download.&
message=is%20playing%20Balls%20of%20Goo%20for%20iPhone%20&%20iPad&
redirect_uri=http://www.stusapps.com/monkeyup/bg.jpg
Copy and paste that into your browser (but don't use it in the final game as the links at the bottom advertise my game not yours :P
Stu
http://www.facebook.com/dialog/feed? app_id=170732836325837&link=http://itunes.apple.com/us/app/balls-of-goo/id436707075?ls=1&mt=8&; picture=http://i1231.photobucket.com/albums/ee514/Bo_Garza8/icon2.png&; name=Balls%20of%20Goo&caption=For%20iPhone& description=Congrats%20on%20Beating%20World%20one!%20If%20you%20think%20you%20can%20do%20better%20press%20the%20image%20to%20download.& message=is%20playing%20Balls%20of%20Goo%20for%20iPhone%20&%20iPad& redirect_uri=http://www.stusapps.com/monkeyup/bg.jpg
As my post above that shows, with my appID put in it works fine. So either something in your Facebook setup isn't quite right or something out of place in the URL. Do also make sure that TextEdit (if you are using that to write the URL) is set to plain text in the preferences.
The domain of your redirect_uri should be also set up in the Facebook end of things (for example http://stusapps.com/ is set up in mine, so any links to that domain are valid).
Roy.
Although it reads a bit long-winded, the first method is really just changing a few words and links.
"API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application."
Kind Regards,
BG