In my application I am displaying custom invite dialog. This is achived by using FB.XFBML.parse method which parses FBML fb:serverFbml with other content that is responsible for displaying multi-user list.
On the side of app all looks good, invites are delivered.
But users that switched already to timeline have problem with accepting requests done this way. They cannot click on it and enter the app or even remove it. Users that are not using timeline yet can use this method to access app.
Below screen with not working example and part of edited code I am using:
Link to image
This is code copied from browser:
<form method="POST" target="" action="http://application_link/index.php/player/invitedfriend" content="Some content <fb:req-choice label='Example label' url='http://apps.facebook.com/app_name/' /> " type="closer" invite="true" id="req_form_4f840...">
I know that FBML is deprecated and won't be supported starting June 1 but based documents facebook provides I should be able to use fb:serverFbml without any problems thanks to FB.XFBML.parse. Any idea what might be wrong / solution to this? I would rather not want to use standard facebook dialogs.
Thanks
You should enable Requests 2.0 for your application (if not already enabled) and use the new approach to send invites. The Requests Dialogs page can help you out. The code to use the new method is quite simple too:
FB.ui({method: 'apprequests',
message: 'My Great Request'
}, requestCallback);
The new approach has more advantages than the old FBML version. XFBML is the website version of FBML. Both will be removed in June so you should switch to the above method ASAP.
Related
We build website templates for multiple users, which are all hosted at a different URL. Some request a custom Facebook / Instagram feed of their profile. This used to be fixed really easy with some jQuery plugin or something else, but ever since Facebook's new data policies it requires us to go through App review.
My problem is, I don't have a 'app' with a login procedure, so I can't really implement Facebook login with OAuth nor can I go through the steps needed to get a permanent access token with the permissions I need. How do I access the Facebook and Instagram API for just a regular website? Does this still happen at all?
Update (June 2021)
jQuery plugin jQuery.instagramFeed has been archived due to Instagram updates rendering it inoperative.
I searched far and wide and came to the conclusion that (currently) there isn't any legitimate way to display an Instagram feed on a website without using the API. At this point in time all the workarounds that I found are leveraging proxy servers to circumvent the restrictions that Instagram have in place. Any of these "solutions" are ultimately hacks and (in my opinion) not suitable for production due to lack of stability.
Original Solution (April 2021)
Here is a solution for building an Instagram feed that doesn't involve use of the Instagram API. It's a jQuery plugin called jQuery.instagramFeed. I will update my answer if I find a viable alternative.
It doesn't require any authentication, simply the Instagram username.
The only potential drawback is that this plugin will only work with Instagram accounts which are set to public. Then again, for many use cases, this likely isn't a problem - because if someone is wanting to display their Instagram feed on their website, they are probably going to want their account to be public anyway.
Here's a jsFiddle. I would have preferred to just add a code snippet here but StackOverflow hasn't made it very feasible yet.
<div id="instagram-feed"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.sowecms.com/demos/jquery.instagramFeed/jquery.instagramFeed.min.js">
<script>
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'github',
'container': "#instagram-feed",
'display_profile': true,
'display_biography': true,
'display_gallery': true,
'display_captions': true,
'max_tries': 8,
'callback': null,
'styling': true,
'items': 8,
'items_per_row': 4,
'margin': 1,
'lazy_load': true,
'on_error': console.error
});
});
})(jQuery);
</script>
When going to the set up pages for all the Social Plugins, they now provide example code using an APP ID.
http://developers.facebook.com/docs/plugins/
Is an APP ID now required for the Like Button and other plugins? What happens if an APP ID is not included when using the plugins?
I've checked the Facebook developer blog and read about the Like Button Migration. I haven't been able to find a straight answer for this either there or in the FB Like Reference.
Notice:
This is an old dated information, the official facebook's behaviors are changed.
Simply, the answer is No, just look at the following official Facebook resource.
Notice: To do it without need to the app id, you have to visit the above page when you are signed out from Facebook. Look at the following screen shot.
As semsem said, the simple answer is "no it is not required"... there are ways to get around having an appId associated with the "like" button. Here's my experience working with this. I'm not a Facebook or Open Graph expert, so YMMV.
Why we avoided using the appId on the button:
We're providing an service where we have one website (the engine, as it were) that provides a service distributing online courses to students (customers). Instructors (also customers) who what to use our service to disseminate courses to students can brand the site how they wish, and map their domain to their section of our website that serves those course(s).
As a simplified example: we serve from http://courses.example.com/instructor_name, but we want students to access the content through http://www.instructors-domain.com/. Any courses would be sub-directories off the base URL.
Associating the "like" button with our Facebook App disallows any cross domain shenanigans. While there are valid reasons for doing so, it doesn't work for where we're at in our company and product evolution. So we needed to find a workaround.
We wanted to allow folks to "like" a course, have the "story" point to the appropriate places on the net, as well as get some customization (e.g. "NAME likes an online course on FBAppName"). We basically achieved this. We lost some functionality which we deemed acceptable at this point in our evolution.
The short of it
I used the iframe version of the Facebook "like" button as dictated by the appropriate Facebook developer's page (for the link see semesm's answer for the link, I got no rep). I took their code snippet and manually removed the appId query string in the iframe's src.
In the "liked" page itself (which was the same page that had the "like" button) I used the Open Graph meta tags including specifying the appId. (These tags were specified: fb:app_id, og:type, og:url, og:site_name, og:title, og:description, og:image.)
The og:type was our custom type of the form 'namespace:app_custom_object_name'.
A failed approach
My first attempt was to use what I understand as the preferred method, the "HTML5" tab in the "Get Code" section of the developer's "like-button" page. I tried their method stripping the appId from the appropriate places. This method proved ineffectual.
If the domain doesn't match that in the Facebook App, there will be no "like" button.
If the domain does match, the "like" button will appear. However, it takes 3 clicks to actually "like" something. The first click changes the "thumbs-up Like" icon to a normal anchor with one word that didn't make obvious sense (I forgot what the word was). The second click will brings up the login/authorization window for using our app. The third actually bring up the modern fancy "like" box where you can type in a comment. I didn't find a way around this behavior.
Note that when I specified the appId in this approach on the appropriate domain, it worked as one would expect (though inconsistent with our desired behavior).
I did not try the other two options in the "Get Code" section of the "like-button" page.
Informed speculation and rumor
In my research around this, my overall impression is that requiring an appId is the way of the future for Facebook. Who knows if the old way will be depreciated, probably never, though I didn't find anything in the docs talking about this "legacy" behavior. This makes sense to me with their newer offerings and the advanced tracking that becomes available with this method.
I've seen suggestions that the "likes" used in this manner are akin to second-class citizens... treated as inferior in some respects. In my own experimentation I found the behavior of the fully specified appId (in the "like" button itself) to be different and more accessible and predictable (in terms of Open Graph queries and visibility on my limited Facebook tests) than the partially specified appId. (Again, I've found no solid documentation on this, and did not endeavor to full grok the differences.)
May this info help someone else along. Good luck!
So, I just tried the sємsєм method, as comments say: Facebook want you to login to get the code, and if you have an app, you have to choose one.
But if you don't, it gives you a code without any app reference.
So when you get a code – no matter any app you choose –, you just need to remove the appId parameter in the .js URL (&appId=##############), and you got (for the latest HTML5 code, 6th line):
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
The code for the div element does not change.
I simply use the URL code inside an iframe tag without an appID and it seams to work,
here is an example:
<iframe src="http://www.facebook.com/plugins/like.php?href=<%=request.original_url%>&width&layout=button_count&action=like&show_faces=false&share=false&height=35&appId=" frameBorder="0" width="150" height="25">
</iframe>
According to Facebook's Social Plugins FAQ
Web: If you are using Social Plugins on the web, you do not need to create a Facebook app for integrating a Social Plugin.
iOS/Android: If you are using Social Plugins within a iOS or Android app, you need to create a Facebook app and tie it to your app identifier.
It seems that the official answer is that they are only required for iOS/Android.
I'm going to add the ability to comments the products trought the "Facebook comments plugin" on a dynamic web marketplace based on Yii framework .
So, today I created a new facebook app, I included the facebook sdk js file and I added this html code to the view that render a single product:
<div class="fb-comments" data-href="<?=$this->createAbsoluteUrl('site/courseDetail',array('id'=>$model->course_profile_id))?>" data-num-posts="10" data-width="470"></div>.
The comment is linked to the URL!!
Well, what happens if the domain change or if I decide to add an url rewrite engine to my web application?
I suppose that I loose all the comments....weird....it is a big limitation...
I read the documentation: https://developers.facebook.com/docs/reference/plugins/comments/
and I saw that now is strongly recommended to use the html5 code because the FBML has been deprecated. Starting June 1, 2012 FBML apps will no longer work as all FBML endpoints will be removed.
So, I can't use the xid parameter such as on <fb:comments...>
right?
I have a Facebook aplication on my site with multi friend selector which posts to selected friends.
When I test it on local host all works fine, but when I upload it to live server on the last step of sending when I click post to my selected friends, there is a pop-up warning saying :
Sorry, you have run out of requests to sent with this application.
Please try again tomorrow
But it was my first post on the live server... What options or something else should I change to avoid this warning?
Added from comments
<fb:serverfbml width= "740" height="407" >
<script type="text/fbml">
<fb:request-form action="%%POSTCARD_ACTION_URL%%?at=send_postcard" method="POST" type="POSTCARD" content='Click the View button to see the Postcard sent to you. <fb:req-choice url="%%FACEBOOK_ACTION_URL%%?view=%%hash%%" label="View">' invite="false">
<input type="hidden" name="mail_hash" id ="mail_hash" value="%%hash%%">
<fb:multi-friend-selector style="width:80%;" showborder="false" actiontext="Select the friends you want send postcard." rows="3" bypass="cancel" email_invite="false" />
</fb:request-form>
</script>
</fb:serverfbml>
I am using a multi-friend-selector wraped into serverfbml
If you were testing your application's invite feature, and deleted the requests when the application was not in sand box mode, then all the request rejections were calculated into the "user feedback" of your application....
Once facebook's systems have decided that your application has received enough negative feedback,they will start limiting your application's features. One such feature that they can limit is requests...
All limitations enforced on your application can be viewed in the Insights >> Diagnostics tab in your application's settings.
With regard to initial invite limitations, when you start developing your application, AFAIK, you have a limit of 50 requests per user, per day as shown below :
UPDATE
After some further discussion and updating the original question, It seems that you are using the old method of inviting friends - FBML. As you can see from the documentation pages of FBML, they are in the process of (and nearly finished) removing their support for it.
We are deprecating FBML. On Jan 1, 2012: FBML will no longer be
supported on Platform. June 1, 2012: FBML apps will no longer work.
All FBML endpoints are removed. If you are building a new application
on Facebook.com, please implement your application using HTML,
JavaScript and CSS. You can use our JavaScript SDK and Social Plugins
to embedded many of the same social features available in FBML.
You should seriously consider migrating to use the newer Requests Dialog. All the information you need is in link.
https://developers.facebook.com/docs/reference/dialogs/requests/
You'll need to use the Facebook JavaScript SDK and after setting it up and calling the FB.init() function, you'll want to make a call to the FB.ui() function and tell it to open the Requests Dialog.
Further Update
After filing a bug report to do with the incorrect displaying of Request 1.0 when the application from which the screenshot was taken was set to use Request 2.0, Facebook replied to the bug first by "confirming and assigning" (see older responses in the bug report) and then stating that this "by design" will be removed as soon as FBML is totally deprecated. Facebook also stated :
Request 2.0 does not have limits as 1.0 did.
Good to know :P
I am not sure, I am using a pretty standard piece of code for facebook. It sends requests for people regarding my application. All of a sudden I am receiving this error:
serverfbml form action must be within
the application's connect url
Have you been having problems with using either one of these:
fb:serverFbml
fb:request-form
fb:req-choice
fb:multi-friend-selector
thank you!
I don't know if you managed to find a solution yet, but I will tell you what my solution is. The action attribute of your forms should NOT be relative URLs, that is you should give the full URL of the website where the application is hosted:
fb:editor action="http://www.mydomain.com/myapp/index.php?params=1" labelwidth="100"
Use the canvas URL under Facebook Integration section in your application's edit mode.
If your canvas URL looks like this:
http://www.example.com/myfacebookapp/
then, in server fbml form action, the URL MUST be in the same directory of your canvas, like this:
(using the example of
<fb:request-form action="http://www.example.com/myfacebookapp/somepage.html"
Also, if the whole contains blank spaces i.e.
http://www.example.com/myfacebookapp new/
consider eliminate that blanks, or use %20 instead of the blank when you specify the URL canvas on Facebook and when you use that URL in form
<fb:request-form action="http://www.example.com/myfacebookapp%20new/somepage.html"
I solved it finally.
Dont get messed up with all type of setting.
Simply go to your facebook app
click edit app button
now copy Canvas URL
and paste it under
<fb:request-form action="CANVAS URL HERE"
method="POST">
Well, it worked for me.!
Thanks to "tsegaye"
i had the same issue.. i used the canvas url in the summary page and it worked. You can try it out aswell
This is not the solution. If you do this, when user clicks "skip" on the dialog, he would be send to http://www.mydomain.com/myapp/index.php?params=1" instead of your application.
The solution is:
action="http://apps.facebook.com/myapp/" -> this "/" at the end would help.
It could be also any other action inside your app for example:
action="http://apps.facebook.com/myapp/sendRequest"
This solution works if you use friend selectors outside the scope of sending requests. For eg. Selecting friends to collaborate with in your app.
Not an answer but this is what helped me. I have a iframe based application and i tried to use the facebook iframe based friend invite code. In my action, i put the app.facebook.com/myapp/ url which whould be give me this fbml error
serverfbml form action must be within the application's connect url
Also when i pressed "skip" it would take me to a 404 error. The solution was to use the canvas url under facebook integration, as suggested by #tsegaye