I have been working with development of Blackberry Playbook Application, i.e.. HTML5/Webworks, I would like to implement a feature of Facebook Login for my application, but for some reasons I couldn't do that.
For testing I have been using Ripple Emulator
Code for facebook login button -
Button - Facebook Developers
I have added this code just below the body tag
<div id="fb-root"></div>
<script>(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="//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>
With this code I am able to see the login button, but when I click on the button it does not generate the popup like we get on web application.
Please suggest any ideas for the same.
Regards
js.src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=**APP_ID**";
APP_ID is your app_id, you've got to replace it.
Related
I am using a Facebook like button in my webpage and it appears on my website, but after clicking to the previous page and returning to the original page it disappears. To prevent it, I should go to the previous page, reload it and click the exact page where the like button appears.
Here is my like button code. I fixed it by using $window.reload in angular, but I am looking for another solution (if one exists).
Please help.
#fb-root
script.
(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/ru_RU/sdk.js#xfbml=1&version=v3.2';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
.fb-like( data-layout='box_count', data-action='like', data-show-faces='true', data-share='false')
The JS SDK goes through your document once on initialization and looks for elements to replace with social plugins.
In a system where you switch out content dynamically via AJAX, you need to call the method the SDK provides to re-iterate the current state of the document:
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
I created a Coming Soon page with a "Share on Facebook" button but when it's clicked it'll open up Facebook on the "Say something about this" page but the actual content it's shows is nothing but a 403: Forbidden. When I end up sharing it anyway it still appears on my wall as the 403: Forbidden but the link as it should works though, i.e. by clicking on it on my wall it'll take me to my site just fine. Also when I go to my site normally it also works. I'm using Nginx as my server and from what I've seen 403s are quite common for Nginx and I've found multiple articles dealing with 403s but none of them talk about solving it for FB share buttons (only for when you get a 403 trying to access the site normally).
In my HTML I have the following meta tags in the head, the following script and the following share button:
<!-- Meta Tags: -->
<meta property="og:url" content="http://www.example.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="exampleName" />
<meta property="og:description" content="exampleSlogan" />
<!-- FB Script -->
<div id="fb-root"></div>
<script>(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/i/suspect/i/should/maybe/keep/this/part/secret';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Share button -->
<div class="social-btn btn-fb" data-href="http://example.com" data-layout="button" data-mobile-iframe="false">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=example.com;src=sdkpreparse"><i class="fa fa-facebook"></i></a>
</div>
I'm sure you'll be able to tell where I censored urls, values, etc. but if you're not sure whether or not something is wrong or if it's censored, feel free to ask
As far as Nginx goes my skills are still pretty limited so I don't really know what to include here to help solve the issue so If you want me to post something Nginx related let me know and I'll do it. Also let me know if I need to supply any other information.
Edit I don't know if this is relevant to my issue but when I open the my web page it gives my js error: FB.NativeExtensions.onready only works when the page is rendered in a WebView of the native Facebook app. Test if this is the case calling FB.UA.nativeApp()
To figure out what goes wrong in such a case, re-scrape the URL using the Facebook debug tool, and then check the server logs around this time.
If scraping alone solved the issue, then your server for some reason blocked the request the last time the Facebook scraper did try to gather data, but doesn't any more now. If this wasn't a one-off occurrence, but turns out to be a more systematic issue with new articles, then check if you maybe have a like button embedded in a preview of the URL that is only available to the logged-in admin, or something like that, that could trigger a scrape by Facebook before your system is willing to answer the request "properly" to outsiders.
If you need to correct this issue for more than a few URLs now, you can also trigger a re-scrape via the API.
I am working with a money management online portal that allows for customization of the login page, but doesnt allow submitting a full sheet of code. I have zero access to the header portion of the code. I am wondering if there is a way to override their title and favicon and replace it with my company's instead. Their company blocks javascript from being entered, as well, so it would have to be something I could write in html or css. Any thoughts?
use the js, check this
(function() {
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'http://www.stackoverflow.com/favicon.ico';
document.getElementsByTagName('head')[0].appendChild(link);
}());
Changing website favicon dynamically
I really hope someone can get me started on this one.
I generated the HTML5 integration code for the Facebook like and share buttons using the facebook developer form. After integrating the code on a client's website, the buttons are only shown using Chrome, but they are not rendering in Firefox or IE.
Looking at the generated code it seems that the Facebook API does not create the code needed to show the buttons when using the latter.
I searched quite a lot and experimented with all kind of initializations (synchronous vs asynchronous loading, different integration methods like iFrames, xml declarations, app publishing, etc...) - with no change in behaviour at all.
I also thought I might have trouble with other scripts running on the page, but when creating a new website only holding the like button codes the problem remains.
By now I am running out of ideas and I cannot find anyone having the same problem. Seems to be some stupid error I cannot see myself. Would someone help me out having a look at:
http://www.berliner-bueroverzeichnis.de
http://www.berliner-bueroverzeichnis.de/debug.html
CODE:
Insert title here
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '470372866398003', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/de_DE/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-like" data-href="https://www.facebook.com/berlinbueros.de" data-width="250" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>
</body>
</html>`
I've got the basic comment box on my site. NOT attached to an app or part of one (as I don't develop apps).
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://www.-----.com/tech" data-num-posts="3" data-width="500" data-colorscheme="dark"></div>
In the head tag:
<meta property="fb:admins" content="My User ID"/>
Now, when someone comments on a friend's comment, I don't want that to show on my site. How the heck can I remove the comments from my site!? This is driving me insane.
So other than this https://developers.facebook.com/tools/comments, what can I do to remove some of these comments?
Ensure that you have replaced the code with your user_id from facebook
You can find out your user id by going to the following address:
http://graph.facebook.com/[YOUR USERNAME]
For example, mine is http://graph.facebook.com/coulton resulting in the following.
<meta property="fb:admins" content="543270572"/>
This must be in the tag of the page which contains the Comments plugin
Now when you're logged in to Facebook with this account, you will see a "moderator view" button appear at the top of the comments window.
You should now see the interface to edit the comments from your site.
Also when you don't develop an app on FB, you can use the comments-tool from facebook and it's what I strongly recommend, because it's the easiest one. The comment-box itself can be registered to an app and you don't need to write a real app to use it, that's just what Facebook calls it.
So therefore you just create an 'app', which is only responsible for comment administration. Create an app and register it in your meta-tags with fb:app_id on your page with the comment box! Instantly you can use it to moderate all your comments.
The other solution is to be logged in with the user defined in the fb:admins tag and go to the comment box and choose moderation view. Use the tips mentioned by Coulton. Use the debugger to see if everything is set up right.