August 16, 2009 | 
Author Hi there!
Quite a while ago, I started writing my first and own facebook application. I got stuck while trying to publish content to my own profile page and also to my friends’ newsfeeds. I stumbled upon several problems. Either there was no content displayed, it was formatted in a wrong way, it was not published on my friends’ newsfeeds or it even was published on behalf of my friends’ username. It was quite strange to me and I could not find an easy documentation on how to do it the right way.
I played around with Stream.publish, Feed.publishUserAction or Notifications.send – none of those functions did what I wanted them to do. This may be so, because I did not fully understand their purposes.
So, this is my way to do it. I am using the FBJS (FaceBook JavaScript) popup call Facebook.showFeedDialog. This is truely (as far as I’m concerned) the best and easiest way.
First of all, I assume you are familiar with how to build an facebook application from scratch. If not, please read the developer’s documentation.
Step 1: build and register your Feed Template Bundle
- go to the Feed Template Console
- choose your application and hit “Next”
- create a template for your “One Line Story” and hit “Next”
- create a template for your “Short Story” and hit “Next”
- create Action Links and hit “Next”
- hit “Register Template Bundle”
- copy and save the Template Bundle ID given in the popup (you will have to paste it into your application’s code later)
When doing this, you may enter any text or even HyperText in the fields for the One Line or Short Story. You also may enter predefined tags such as {*actor*} or your own defined tags such as {*foobar*}. In the Sample Template Data, you may enter the tag definitions and display a preview. What you enter there and at this very moment has no effect on the content displayed within your application later! That’s just for previewing purposes. The real content will be defined later in your application’s script. Remember that! Some Examples for your Sample Template Data at this point may be:
{"foobar": "This is a foobar text"}
Or a bit more complex:
{"foolink": "<a href="http://www.google.com/">Google</a>",</p>
<p>"images":[{"src":"http://domain.com/image1.jpg", "href":"<a href="http://www.facebook.com/">http://www.facebook.com</a>"},</p>
<p>{"src": "http://anotherdomain.com/image2.jpg", "href":"<a href="http://www.facebook.com/">http://www.facebook.com</a>"}]}
You see, e.g . the {*images*} tag is defined as some sort of array consisting of multiple SRC and HREF values. Attention: the special tag {*images*} is displayed automatically on Short Stories, you don’t need to call them!
2. write your application’s content
<?PHP</p>
<p>require_once 'facebook-platform/php/facebook.php';</p>
<p>$appid = 'xxxxxxxxx'; // your app ID</p>
<p>$appapikey = 'XXXXXXXXXXXXXXXX; // your app key</p>
<p>$appsecret = 'XXXXXXXXXXXXXXXX'; // your app secret</p>
<p>$template_bundle_id = 'xxxxxxxxxxxxxxxx'; // the ID you got in Step 1</p>
<p>$facebook = new Facebook($appapikey, $appsecret);</p>
<p>$user_id = $facebook->require_login();</p>
<p>echo "<p>Hello, <fb:name uid=\"$user_id\" useyou=\"false\" />!</p>";</p>
<p>?></p>
<p><script type="text/javascript"><!--</p>
<p> var template_bundle_id ="";</p>
<p> var url="http://www.google.com/";</p>
<p> var user_message_prompt = "Share this URL with your friends?";</p>
<p> var user_message = {value: "wants to share a greate website."};</p>
<p> var image ="http://www.google.com/intl/en_ALL/images/logo.gif";</p>
<p> var template_data = {"url": url,</p>
<p> "images": [{'href': url, 'src' : image}]};</p>
<p> Facebook.showFeedDialog(template_bundle_id, template_data, '', '', '', user_message_prompt, user_message);</p>
<p>// --></script></p>
<p>
This is it.
Every time you call your application’s page, you’ll get a facebook popup asking you to display the content on your profile and even in your friends’ newsfeeds. Of course, it does not make any sense to share some data every time you call your application’s canvas page, so you may want to add some more code to your application.
The text to be shared is the text you entered when registering the Template Bundle in Step 1. If you get an error, please make sure the defined variables (such as “url” or “images”) are valid and do exist. In other words: whatever you call in your Template Bundle, it has to be defined in your script.
Of course, you may generate the content dynamically from a database or any other source.
I hope this HOWTO helped.
Bye, T.
Hat’s gefallen?
Wenn der Artikel gefallen hat oder hilfreich war, bitte folgende Funktionen benutzen:
Posted in 
Tags: Leave a Reply
very very thnx 🙂
Hai Thomas,
Thanks for your help. I am a developer. I got the result from you.
Hi, how to pass a php varible to js script? I’m try this, but not work
var template_bundle_id =”145999893899″;
var mensaje=” “;
var friends = “” ;
var user_message_prompt = “Agrega un mensaje a tus ~ Buenas Ondas ~”;
var user_message = {value: “Te envio ~ Buenas Ondas ~”};
var image =”http://photos-d.ak.fbcdn.net/photos-ak-sf2p/v43/219/78750778899/app_1_78750778899_4373.gif”;
var template_data = {“mensaje”: mensaje, “friends”: friends,
“images”: [{‘href’: “http://apps.facebook.com/buenasondas/”, ‘src’ : image}]};
Facebook.showFeedDialog(template_bundle_id, template_data, ”, ”, ”, user_message_prompt, user_message);
tnxs in advance
regards
PaulM
ho.. filter php, again
var friends = ” \\” ;
Man, first off, you rock. I have been looking everywhere on how to do this. I am far from a developer and your summed it all up with fantastic example. Thank you!!!!!!
I do have a question i hope you can answer. I am trying to make a very basic quiz and am so close to finishing, however, how can i get my results to show up in the pop up feed publisher. Here is the code i am using on the results page. Any help would be awesome.
Cheers
adrian
My TestKill Quiz Results
Thank you,
.
Question 1 Results
Your answer was:
<?php
if ($question1 == “answer1.1”)
{
echo (“Correct“);
}
else
{
echo (“Incorrect“);
}
?>
Question 2 Results
Your answer was:
<?php
if ($question2 == “answer2.2”)
{
echo (“Correct“);
}
else
{
echo (“Incorrect“);
}
?>
Total score:You answered question
correctly.
var tpl_data ={“images”:[{“src”:”http://mysite.com/facebook_apps/generic.jpg”,”href”:”http://apps.facebook.com/mytstestingapp/”}],”yourtag”:”tag content”};
var user_msg = {“value”:””};
var share_msg = “share with your friends”;
Facebook.showFeedDialog(162600624111, tpl_data, “”, “”, null, share_msg, user_msg);
Hi Paul!
I don’t yet understand your problem. You want to pass a PHP variable in your JavaScript part, correct?
Well, you can do this like:
var url="";Something else: did you define “mensaje” in your template bundle? What error message did you receive from facebook?
Thomas
Hi Adrian! You are far away from being a developer? Well, so am I! 🙂
But thanks a lot for your comment on this.
There may be several problems with your application. I do not get the point yet. Did you receive any error message from facebook? Which one?
Have you defined a template bundle? How does it look like? There also might be a problem, because the value of “user_msg” is NULL.
Best regards, Thomas
Hey Thomas, no there is no error message, the feed dialogue works just great, but it doesn’t display the results from the quiz. I can’t seem to figure out where in the javascript to place that variable. I went through the template bundle steps, but did really customize it, just hit next until it gave me my bundle id. i wasn’t sure how to tweak it. When you say the “user message is still null”, what else can it be?
Again, i am newbie slowly finding my way, thanks to sites like yours.
Any help would be great
cheers
adrian
Adrian,
okay, well. It seems you haven’t set up your template bundle correctly. Let me explain once again:
Within the template bundle, you define the text, which will be displayed in the feed dialog. Again: the text for the feed dialog is defined in your template bundle! But you may pass variables to your template bundle. For example, you want your feed dialog to look like:
"John Doe just completed the quiz and scored 42 points!"with the heading"John Doe played a quiz.".Then, Primary Short Story Template Title in the template bundle should look like:
"{*actor*} played a quiz.", which will be the header line.And, Primary Short Story Template Body in the template bundle should look like:
"{*actor*} just completed the quiz and scored {*points*} points!", which will be the feed dialog’s body.In your script, you then need to define “points” and pass it to the feed dialog. Just like:
var points = "";
var tpl_data = {"points": points};
var user_msg = {”value”:”did a quiz..."};
var share_msg = “share with your friends”;
Facebook.showFeedDialog (162600624111, tpl_data, "", "", "", share_msg, user_msg);
The code above is the JavaScript part. Of course, you need to define the value of $points earlier in your PHP part.
Hope that helps.
Thomas
arg, so close. when i try adjusting the template, i keep getting this message (link)
http://digitaladrian.com/pictures/errormessage.jpg
This is driving me crazy, i am so close…all thanks to you. Hopefully you can bear with me for a little longer.
thanks
adrian
Hi Adrian,
I know, it drove me crazy, too! 🙂
The problem is, you probably did not define “points” in the Feed Template Console. It is the text area box below the Template Body and it is called: “Sample Template Data”. Please see: http://minuten.de/feedConsole.png
Remember: you don’t define actual data in this Sample Data box. It’s just to verify your syntax is correct and you have understood how this template thing works.
In other words: whatever you define in your Template Body (“
{*points*}“) has to be given in the Sample box (for testing purposes) and definitely has to be passed to theFacebook.showFeedDialogin your script.I did define
var tpl_data = {”points”: points};in my last comment. In the screenshot you will see, I defined that part in the Sample Data box and it worked.Hope that helps, Thomas
Dude, you rock!!! I am so stoked, everything worked!!
My last thing is how do I get back the image? Unfortunately you can’t edit in the feed console, so I started over, but when I trying to add the “custom” tokens to the existing sample code for having an image, i keep getting the error message again.
Adrian, congratulations!
First of all, the
{* images*}-tag is predefined. You don’t need to define it in your template, you just have to pass it to theFacebook.showFeedDialog. Try this:var url = "http://apps.facebook.com/mytstestingapp/";
var image = "";
var points = "";
var tpl_data = {"points": points
"images":[{'href': url, 'src': image}]};
var user_msg = {"value":"did a quiz…"};
var share_msg = "share with your friends";
Facebook.showFeedDialog (162600624111, tpl_data, "", "", "", share_msg, user_msg);
Of course,
$feedimagehas to be defined earlier in PHP syntax, just like:$feedimage = "http://mysite.com/facebook_apps/generic.jpg";I’ve taken the values for url and src from your comment #5. Please take care of the syntax when passing an image to the Feed Dialog; it’s like some sort of array.
Once again: do NOT define
{*images*}anywhere in the Template Bundle. Just pass it to the dialog.Let me know, whether or not it worked for ya. If not, please provide the whole Template Bundle and the whole PHP and JavaScript part.
Thomas
arg, so close. Thought it was going to get it. Now no dialogue at all comes up?
Here is my code, i have revised a few changes from earlier posts :
My TestKill Quiz Results
Thank you,
.
Question 1 Results
Your answer was:
<?php
if ($question1 == “answer1.1”)
{
echo (“Correct“);
}
else
{
echo (“Incorrect“);
}
?>
Question 2 Results
Your answer was:
<?php
if ($question2 == “answer2.2”)
{
echo (“Correct“);
}
else
{
echo (“Incorrect“);
}
?>
Total correct:You answered question
correctly.
var url = “http://apps.facebook.com/testkill/”;
var image = “”;
var correct = “”;
var tpl_data = {“correct”: correct “images”:[{‘href’: url, ‘src’: image}]};};
var user_msg = {“value”:”did a quiz…”};
var share_msg = “share with your friends”;
Facebook.showFeedDialog (163318469113, tpl_data, “”, “”, “”, share_msg, user_msg);
the screen grab for my feed console is:
http://digitaladrian.com/pictures/feedconsole.png
thanks a bunch man
oops, i think wordpress killed all the php code. The code above is only half the file. I did created a variable like you explained above:
$feedimage = “http://mysite.com/facebook_apps/generic.jpg”;
Not sure if this was the problem though. I think its the way i am combining the code for the “var tpl_data”
If you need the full code, i post a txt file
thanks again.
Your code is either wrong or WordPress killed some parts of it.
Please post the code into a text file and provide the URL to it.
Hey Thomas, thanks again. Here is the link for the txt file:
http://digitaladrian.com/pictures/samplefile.txt
ah, I figured it out. There was an extra cury brace…
fixed line :
var tpl_data = {“correct”: correct, “images”:[{‘href’: url, ‘src’: image}]};
dude, thomas you are the man. I am most grateful for your help and look forward to your future post.
Again, you rock, thanks 🙂
For people following this post, here is the modified code:
var url = “http://apps.facebook.com/mytestapp/”;
var image = ““;
var correct = ““;
var tpl_data = {“correct”: correct, “images”:[{‘href’: url, ‘src’: image}]};
var user_msg = {“value”:”did a quiz…”};
var share_msg = “share with your friends”;
Facebook.showFeedDialog (163318469111, tpl_data, “”, “”, “”, share_msg, user_msg);
Excellent tutorial. I just made my first Facebook application today and was trying to figure out how to post onto walls. Your example worked flawlessly.
My first Facebook app:
http://apps.facebook.com/ezfootballpicks
Thanks!
-George
Adrian, I’m glad you made it and I could help.
Thanks for your compliments… 🙂
Hi, i’m making an apps for a quiz, and i’m using your example as a guide. Could you publish the whole app source to see how it works? I know you have a link for a text version, but i try and i cant make it work.
Thanks,
Chris,
please describe your problem and post the error message you get from facebook.
Thomas
Hi Thomas, here is my script based on the one in this page. I think i have problems with some library not correctly linked or something like that. I’m working in iframe mode.
its a text file on http://www.clinicaluisrazetti.com/test/codigo.zip
I have a screenshot of my template: http://www.clinicaluisrazetti.com/test/screenshot.jpg
I appreciate any help my friend, thank you very much
The error console in firefox says that Facebook is not defined. How do i define it?
Thanks
Chris
Chris,
1. is the path to the Facebook library correct (
require_once 'facebook/php/facebook.php';)?2. have you tried to remove the
BODY-tags from your application, since Facebook sends its own body and includes your page?Thomas
Checked the path and it’s correct. I removed the body tags too, but i still get the same result. The only thing i see is Hello,(but no name appears). When i open the error console it says Facebook is not defined on line 17, which is exactly the line calling Facebook.showFeedDialog. When i check the source code of the rendered page, i see
Hello, !, but the name does not appear.
Could I be missing some server side include? Do i have to define the function showFeedDialog before?
I’m lost!
Chris
Chris,
you don’t need Server Side Includes and you don’t have to define
showFeedDialog. The function comes from the Facebook API.You have two problems:
1. FBML does not work (the
fb:name ...part)2. FBJS does not work (the JavaScript part cannot connect to Facebook)
To me, it looks like the Facebook library is either not loaded, not loaded correctly or is way out of date.
Please make sure, you have the following structure within your webspace:
codigo.php
facebook/php/facebookapi_php5_restlib.php
facebook/php/facebook_desktop.php
facebook/php/facebook.php
facebook/php/jsonwrapper/
facebook/php/jsonwrapper/...
...
If that’s all correct, I have no more ideas without looking at your source and application and filesystem.
Thomas
Hi.
Things are very confusing. I decided to go with a minimalistic apprach and started with the example code from facebook.
require_login();
// Greet the currently logged-in user!
echo “Hello, !”;
// Print out at most 25 of the logged-in user’s friends,
// using the friends.get API method
echo “Friends:”;
$friends = $facebook->api_client->friends_get();
$friends = array_slice($friends, 0, 25);
foreach ($friends as $friend) {
echo “$friend”;
}
echo “”;
?>
And this is what i get:
Hello, !
Friends:
501427072
501454411
506495935
506639336
513344192
519204533
520399790
524432914
535622067
576044789
583818838
584582664
587674861
588016195
590395293
593546462
594800095
597817709
600388703
602638519
606752084
606785424
609680246
623558933
625192212
I think it should say names, at least mine!
What do you think? The libraries are in the correct place, and as you can see it is connecting with the php part, but not with FBML fb:name.
Any ideas?
Do i actually need to include de featureloader? Because nothing changes if it is there.
Please.
On the other example, i still get the same. Facebook.showFeedDialog is not executed, says it’s not defined.
Chris,
it seems, WordPress cut off some parts of the code. At least some PHP parts. Can you please (again) upload it as a txt file?
Thomas
Fixed it!
I had to activate FBML and not IFRAME in the applications settings. You dont know how much i appreciate your help and the base code. I’m going to use it as my base framework for future works.
Thanks again, yours is the only example i found that really worked as it should!
Chris Carias
Love from Venezuela
No problem, glad you made it! 🙂
Good luck with your app.
Thomas
Hi, would you please take a look see if there’s anything wrong with my setting or code. The result does nothing..no error message…
Bundle 138635988225
Primary One Line Template
{*actor*} likes The PolyglotPrimary Short Story Template Title
{*actor*} likes the polyglot
Primary Short Story Template Body
{*actor*} has been discussing short story templates with {*target*}.
Thank you.
Jean
Hi Thomas..
Thanks SO much for this.. It really helped me over come some boundaries. Is this possible without making it into an app that the user has to grant permissions?
Can a user just be presented with the feed form from any website providing it has the fb libraries – or is facebook connect capability required?
thanks again
jon
Jean,
I cannot see any code in your posting. WordPress maybe cut it off. Please provide your code as a text file and post the link here.
Thomas
Jon,
thanks for your comment.
The above example works as an application which only the user, who wants to post something, has to accept. The newsfeed will be presented on all friends’ walls of the user posting it.
No facebook connect is required. But you must have a valid and registered facebook application. And your application must use facebook’s API/libraries.
Thomas
Hi Thomas,
This is a wonder tutorial but I’m a bit still stuck. I had lately just completed an application and had been playing around, testing with feeds, which I banged into problems
I’m not sure where i’m missing but the popup just dun appear. Is it because I’m not using Fb Connect? or I’m not using FBML? I’m totally cluesless here
This is the page to my test feed. nothing appearing:
http://apps.facebook.com/fusionflea//publishtest.php
Dear Thomas
Since now news Feed Template Bundle is deprecated so it’s not possible to use.
I have a Quiz Application in the facebook Platform, I want to publish my quiz result in the news feed from a quiz application after complete the quiz.The application is developed in IFRAME base.
Please give this code or instruction to me which is good for me.
best regards
bashir