What I'm trying to do is to make a form field that counts checked radio buttons with a specific value(integer 7). If the number of checked radio button is more than 3, then the system populates "Facebook" sharing dialog.
It works well if nothing goes wrong, but when I close the popup dialog, and click more radio buttons, even if the count is higher than 3, the Facebook dialog doesn't popup. I suspect that this is the problem due to initialization but I have no clue how to fix the issue. ( And because I suspect, I am not sure this guess is also directing me to the right solution )
The below is my javascript code to work this out.
I really hope to share any thought!
Best
<script>
$(".evaluation").click(function(){
console.log('clicked');
var count = 0;
$(".evaluation").each(function(index,item){
if (item.value == 7){
if (item.checked == true){
count ++;
}
}
});
console.log('count:' + count);
if (count >= 3){
window.fbAsyncInit = function() {
FB.init({
appId : '####',
xfbml : true,
version : 'v2.5'
});
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object:'http://www.###.com',
})
}, function(response){
// Debug response (optional)
console.log(response);
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
}
);
</script>
You need to use window.fbAsyncInit and FB.init on Page load, one time. NOT on button click. Don't try to load and initialize the JavaScript SDK again, i assume the callback function will not get called because it is already initialized.
For example: http://www.devils-heaven.com/facebook-javascript-sdk-login/
Related
I have implemented Facebook Share dialog with javascript and I am having consistency issues.
I have a button to open the dialog and when I do so from the page it automatically appears in an iframe on the page which is great! Exactly what I want.
Now here's the issue, I have another page that redirects to this exact same page and it is set to call the exact same function for the facebook share dialog if a get variable is set. It calls it but now it opens in a new window instead of in an iframe and I have no idea why. I will literally close the window and click on the button and it will open it perfectly in an iframe.
$(document).ready(function() {
window.fbAsyncInit = function() {
FB.init({
appId : '######',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.2'
});
#if(isset($_GET['share']))
facebook_share();
#endif
};
(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/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$('.fb-share').click(function() {
facebook_share();
});
});
function facebook_share(){
FB.ui({
method: 'share',
mobile_iframe: true,
href: '######',
}, function(response){
if (response && !response.error_message) {
success.style.display = "block";
} else {
error.style.display = "block";
}
});
}
Figured this out myself, simply setting a timeout before making the call to the function caused it to act the same way. Everything must not have been fully loaded upon the original call.
setTimeout(facebook_share, 3000);
I have added Facebook Login for my website. The login procedures all function normally. Although, the Login Window seems to expand itself vertically and flickers a lot. You cannot double click on a field to see the saved logins from the browser even, as the window seems to flicker and resize.
The code I have for the init is as below.
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'my-app-id',
autoLogAppEvents : true,
status : true,
xfbml : true,
version : 'v2.9'
});
};
//load the JavaScript SDK
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//add event listener to login button
function facebookLogin(url) {
//do the login
FB.login(function(response) {
if (response.authResponse) {
//user just authorized your app
myLogin(response.authResponse.accessToken, url);
} else {
console.log("Error")
}
}, {scope: 'email,public_profile', return_scopes: true});
}
Why is this happening? What's the workaround? TIA.
So far, I have the Facebook Checkbox Plugin/Widget (attached/from to Chatfuel) inside of an HTML widget in a Gravity Form. It works. Everything looks good. However, it has no effect on the actual messenger platform.
<script> window.fbMessengerPlugins = window.fbMessengerPlugins || { init : function() { FB.init({ appId: "1678638095724206", xfbml: true, version: "v2.6" }); }, callable : [] }; window.fbMessengerPlugins.callable.push( function() { var ruuid, fbPluginElements = document.querySelectorAll(".fb-messenger-checkbox[page_id='288534304507180']"); if (fbPluginElements) { for( i = 0; i < fbPluginElements.length; i++ ) { ruuid = 'cf_' + (new Array(16).join().replace(/(.|$)/g, function(){return ((Math.random()*36)|0).toString(36)[Math.random()<.5?"toString":"toUpperCase"]();})); fbPluginElements[i].setAttribute('user_ref', ruuid) ; fbPluginElements[i].setAttribute('origin', window.location.href); window.confirmOptIn = function() { FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, { app_id:"1678638095724206", page_id:"288534304507180", ref:"b64:Z2l2ZWF3YXk=", user_ref: ruuid }); }; } } }); window.fbAsyncInit = window.fbAsyncInit || function() { window.fbMessengerPlugins.callable.forEach( function( item ) { item(); } ); window.fbMessengerPlugins.init(); }; setTimeout( function() { (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/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }, 0); </script> <div class="fb-messenger-checkbox" origin="" page_id="288534304507180" messenger_app_id="1678638095724206" user_ref="" prechecked="true" allow_login="true" size="standard"></div>
After viewing the Facebook documentation (https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin) I stumbled upon this code:
<html>
<head>
<script>
function confirmOptIn() {
FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, {
'app_id':'APP_ID',
'page_id':'PAGE_ID',
'ref':'PASS_THROUGH_PARAM',
'user_ref':'UNIQUE_REF_PARAM'
});
}
</script>
</head>
<body>
<input type="button" onclick="confirmOptIn()" value="Confirm Opt-in"/>
</body>
</html>
This code is the confirmation code necessary for the message to actually fire off. When I took the code and just tested it inline on my page (rather than inside the Gravity Form) it produced a button with, as you could guess. When that button is pressed, the message fires. Keep in mind, the Gravity form with the other code is still on that same page.
Now what I need is to be able to apply this effect upon the successful submission of a Gravity Form. I'm struggling with the implementation.
I am not skilled with Javascript whatsoever. But if I had to guess, I need to put the above code for the Facebook Confirmation into the below code for it to be connected to the Gravity Forms Submission:
<script type="text/javascript">
jQuery(document).bind('gform_confirmation_loaded', function(event, formId){
// code to be trigger when confirmation page is loaded
});
</script>
https://docs.gravityforms.com/gform_confirmation_loaded/#source-code
I've also tested the following code to see if I can get it to work with just the click of the submit button, though even with this final product, I have been unable to successfully manage to trigger the Facebook message.
<script type="text/javascript">
$(document).ready(function() {
$('#gform_25 input[type=submit]').click(function () {
function confirmOptIn() {
FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, {
'app_id':'APP_ID',
'page_id':'PAGE_ID',
'ref':'PASS_THROUGH_PARAM',
'user_ref':'UNIQUE_REF_PARAM'
});
}
confirmOptIn();
});
});
</script>
I realize how confusing this post might be. I really hope it's not though, and that there's an answer somewhere out there. The main goal is to trigger a Facebook message after a Gravity Forms Submission. Thanks!
I am using facebook comments plugin in my site and it seems to me, that the plugin loads up when the page is loaded completely which I do not desire.
I have a lot of pictures on my page, and page is taking some time to fully load up. So i want the facebook comments to load even the page is still in progress.
Added this right after 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.async = true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Added that where i want to comments to appear.
<div class="fb-comments" data-href="{{ blog.share_url }}"
data-version="v2.3"
data-width="100%" data-numposts="5"></div>
Tried
Setting js.async = false;
Again, when the page load is complete, the comments plugin is visible after that.
Thoughts?
After months of research I am able to find the solution.
FB.XFBML.parse();
Will load your comments even if the page loading has not been completed.
<script>
window.fbAsyncInit = function () {
FB.init({appId: '1422501874658917', version: 2.4, xfbml: true});
// *** here is my code ***
if (typeof facebookInit == 'function') {
facebookInit();
}
};
(function () {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function facebookInit() {
console.log('Found FB: Loading comments.');
FB.XFBML.parse();
}
</script>
You should be able to just set async = false. This makes it blocking which will keep the pictures from loading until the comments have loaded. It also depends how you call the js file which loads the images. I prefer placing it at the bottom to make sure all html elements have loaded first.
I have the following JavaScript on a canvas app, which gets called if the user is NOT logged in (checked via php).
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '(appid)',
xfbml : true,
version : 'v2.0'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
}
else {
FB.Event.subscribe('auth.statusChange',function(response) {
if (response.authResponse) {
setTimeout('window.location.reload()',0);
};
});
FB.login(function(){}, {scope: 'email,user_birthday,user_friends'});
}
});
};
(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/sdk.js\";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
The problem is that the Window doesn't reload even though I tell it to do so. I know the function is called after pressing "login" and accepting permissions, because if I include and alert it shows at that point.
As you can see I already tried wrapping it in a setTimeout, but that doesn't work.
If I press F5 after this, the page reloads and I'm logged in.
Help!
It turns out, all I had to do was change to:
top.location.href="https://apps.facebook.com/appname";
instead of window.location.reload()
This also prevents the browser from asking if it should resubmit the data.