I have seen many questions on here that are relatively similar, but most recommend a solution involving an APPID. However, I simply want to solve the error being outputted from the like button, no APPID necessary, the like button is working but producing irritating output in the console.
I am getting the following error in my Guard output: http://connect.facebook.net/en_US/all.js|54|FB.getLoginStatus() called before calling FB.init().
With a similar error in my web console: FB.getLoginStatus() called before calling FB.init().
I have this block in my app.js file:
(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'));
And the following in my markup right inside the <body>:
.facebook-like#fb-root
.fb-like(data-href="https://www.facebook.com/MYAPP" data-send="false" data-layout="button_count" data-width="90" data-show-faces="true")
I think your issue is that facebook.net is currently down.
Related
I'm sending the user from the messenger chat to a payment page in my application.
Messenger opens the page in a webview.
Now I'd like to close the webview and send the user back to Messenger while also sending something to the webhook in order to notify it that the user has finished the payment page.
What is the best way to accomplish this?
You can only achieve this if the payment page is controlled(developed by you), if it is a third party payment gateway there is nothing you can do. if the payment page is controlled by you, you can pass the sender ID as a parameter via web_url or get the sender ID via
<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.com/en_US/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "Messenger"));
window.extAsyncInit = function () {
// the Messenger Extensions JS SDK is done loading
MessengerExtensions.getUserID(function success(uids) {
var psid = uids.psid;//This is your page scoped sender_id
alert(psid);
}, function error(err) {
alert("Messenger Extension Error: " + err);
});
};
</script>
using the sender ID you can then send a message text back to the bot.
to close the webview after all of this include this script after sending the
text to the bot
<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.com/en_US/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "Messenger"));
window.extAsyncInit = function () {
// the Messenger Extensions JS SDK is done loading
//close the webview
MessengerExtensions.requestCloseBrowser(function success() {
}, function error(err) {
});
};
</script>
Just like from within your Bot you have to ensure that the page access token is available before you send the text, also ensure that you whitelist the domain used in you webview and you set "messenger_extensions": true, in your web_url button or you won't be able to get the Sender ID using messenger Extension
references
url button
messenger extension
I know that there are various CTA cards that Facebook bot can use as seen here.
What I really need is a datepicker card that can be sent to the user where they can choose a date and send it back. Is this possible using Facebook bots?
Facebook messenger has not launched date and time picker in its templates.
But you can make you own with webview and Extensions help.
Follow these steps.
Create Button or Generic Template and put a button with
"buttons":[
{
"type":"web_url",
"url":"http://my_url_which_open_date_picker",
"title":"Select date",
"messenger_extensions": true,
"webview_height_ratio": "compact"
}
]
replace a url with your url.
NOTE: url should be in whitelist Your Domain
Now in that web page you can get userId of that particular user and couls easily map his actions for date picking.
On your page
<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.com/en_US/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));
</script>
When the Messenger Extensions JS SDK is done loading, it will call window.extAsyncInit and you will get userId in that function.
<script>
window.extAsyncInit = function() {
// the Messenger Extensions JS SDK is done loading
MessengerExtensions.getUserID(function success(uids) {
var psid = uids.psid;
}, function error(err) {
});
};
</script>
uids is Object containing user ids
psid Page-scoped user ID
You may also want to close your calander page when user picks date.
This can be done via:
<script>
MessengerExtensions.requestCloseBrowser(function success() {
}, function error(err) {
});
</script>
I have a website which is available in 8 languages. I want the like button's text like You like this.... etc to be in locale language.
I googled a lot, the only solution seems to be to change this js.src
js.src = "//connect.facebook.net/en_US/sdk.js";
to
js.src = "//connect.facebook.net/de_DE/sdk.js";
if I want german text. but cannot it load it dynamically? Do I have to give all 8 versions of js.src?
So, this is the code that I use on my joomla site:
<script>(function(d, s, id) {
var lang = "<?php echo JFactory::getLanguage()->getTag();?>";
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
if (lang !="en-GB"){
js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.8";
} else {
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
}
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I set a language variable and then have the script react to the language that is set at the time. You could easily apply the same logic to your situation. I'm pulling the variable out of php so the language is reset on page reload, but you could just as easily do this with a js variable. There's probably a more sophisticated way to do this with regex, but this works. I only have two languages so the logic isn't complicated, so regex might be a better solution for you to dynamically change the language part of the url depending on the active language.
I am building facebook iframe app. My application is loaded once (I receive signed_request once) and then I navigate through the pages in the iframe using internal domain links. I noticed that I see these strange messages both in Chrome and Firefox
FB.init has already been called - this could indicate a problem
I am pretty sure that this method is called only once and it seems Facebook wants me to call it once per application load (not once per page).
window.fbAsyncInit = function() {
FB.init({
appId: param('facebook_app_id'),
frictionlessRequests: true,
oauth: true,
channelUrl: site_url('/channel.html')
})
}
What error (if any) am I making here?
From the moment you pass parameters to the js.src like #xfbml=1&appId=X, FB SDK will auto init itself and thus FB.init will try to reinit..
So in your code, you don't have to remove the FB.init function, just make sure you don't pass parameters in the code that loads asynchronously the JS SDK.
Replace this:
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=X";
With :
js.src = "//connect.facebook.net/en_US/sdk.js";
If you really need to call init more than once you can do this:
FB._initialized = false;
FB.init();
but it makes no sense to me, I have a little bit different problem, but it is also related to FB.init has already been called - this could indicate a problem message.
I have AJAX-based website where after each page load I need to render XFBML from HTML that I get from AJAX request (comments, like button and other):
<div class="fb-comments" data-href="{REMOVED}" data-num-posts="5" data-width="760" colorscheme="dark"></div>
To do this, you can run this when you need to render XFBML:
FB.XFBML.parse();
I've also had this problem. I simply removed FB.init({...}) part and it started to work with following code:
window.fbAsyncInit = function () {
FB.Event.subscribe('auth.logout', function () {
// subscribe parts
});
// here is where fb.init() code was
};
(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=X";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I guess it now auto inits code, so there is no need to do it manually. Now my code works again. I hope this helps.
I am linking to a page that has 100 likes already. I just started testing it and its now showing:
Be the first of your friends to like this
instead of:
100 people like this
does anyone know why facebook would show that message above versus showing the number of likes the page have? Is that configurable or a bug ?
I believe that shows when a user who has not liked the page and has no friends who have liked it is logged in. According to this question (How to remove the "Be the first of your friends to like this" part of the standard iframe Facebook Like button?), this is not configurable.
please check your URL and put this in body tag
<!--FB SDK-->
<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>
<!--FB SDK-->