Instead of the default usage of the following script in div I would like to call the script on button click
<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1">
</div>
<script language="javascript" type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: 'xxxxxxxxxxx',
status: true,
cookie: true,
xfbml: true
});
};
(function (d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
} (document));
</script>
Can some one help me how can I call or execute this script on asp button click event.
Edit
Your code is not complete, I updated the code, this works on my domain, so, it must works also on your
Put this js code in the a.js file, it will be called when the button is pushed:
window.fbAsyncInit = function() {
FB.init({
appId : 'your_app_id', // App ID
channelUrl : 'your_app_domain', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// logged into the app
alert('logged');
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app
alert('non logged');
FB.login();
} else {
// not logged into Facebook
alert('non logged everywhere');
FB.login();
}
});
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
Then put this code to the page where you want to call it, remeber the fb-root div and all the other stuff that fb need:
<div id="fb-root"></div>
<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1">
</div>
<button onClick="loadit()">ZzZzz</button>
<script type="text/javascript">
function loadit(){
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'a.js';
head.appendChild(script);
}
End edit
You can load a script (for example we call the file a.js), from javascript in this way:
You will put the js code in the file a.js
Checks if it works or it needs some refinement
<button onClick="loadit()">ZzZzz</button>
<script type="text/javascript">
function loadit(){
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'a.js';
head.appendChild(script);
}
</script>
(You don't need to hide the app id, it's visible through js and no one else, except you, can use it out of the domain specified.)
Related
I have a Facebook Button on my page. It calls a share popup.
The problem is that button works just on the first click. The second, third clicks don't do nothing. I always need to refresh the page.
I'm a newbie. Could you help me with this code?
Thank you.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'zzzzzzzzzz',
status : true,
cookie : true,
xfbml : true
});
FB.ui(
{
method: 'feed',
name: 'Bitcoin Catcher Faucet & Rotator',
link: 'http://bitcoin-catcher.com',
picture: 'http://bitcoin-catcher.com/wp-content/uploads/2015/08/icon.png',
caption: 'Only 1000+ Rewards Faucet & Rotator',
description: 'Earn FREE Bitcoins Easier & Faster! Only 1000+ Rewards per Claim!'
},
function(response) {
if (response && response.post_id) {
unhide('claim', '');
} else {
}
}
);
};
function fb_callout() {
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
}
</script>
<img alt="Share on Facebook" src="http://bitcoin-catcher.com/wp-content/uploads/2015/09/facebook-share-button.png" width="180" onclick="fb_callout();" style="cursor: pointer;" />
The call to FB.ui should be outside fbAsyncInit. Place it in the click event handler of the Share button.
In your code sample, the FB JS SDK is loaded with every click. This is not what you want.
Even though it works the first time because the SDK calls fbAsyncInit once it's loaded which in turn - in your example, mistakenly again - displays the feed dialog through an FB.ui call, reloading the SDK breaks the API for subsequent calls. The SDK should not be loaded every time.
What you want instead is to load the SDK only once when the page loads (it's asynchronous so it wont block the browser) and then assign a click handler to the button which calls FB.ui.
It'd look something similar to the below
<body>
<img alt="Share on Facebook" onclick="fb_callout();" />
<script>
// Handler for click event
function fb_callout() {
FB.ui({...}, function(response) {});
}
// This is called when the SDK js file is loaded by the browser
window.fbAsyncInit = function() {
FB.init({
appId : 'zzzzzzzzzz',
status : true,
cookie : true,
xfbml : true
});
}
// This loads the FB SDK js
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
I did this way and nothing happens...
<img alt="Share on Facebook" src="http://bitcoin-catcher.com/wp-content/uploads/2015/09/facebook-share-button.png" width="180" onclick="fb_callout();" style="cursor: pointer;" />
<div id="fb-root"></div>
<script>
function fb_callout() {
FB.ui(
{
method: 'feed',
name: 'Bitcoin Catcher Faucet & Rotator',
link: 'http://bitcoin-catcher.com',
picture: 'http://bitcoin-catcher.com/wp-content/uploads/2015/08/icon.png',
caption: 'Only 1000+ Rewards Faucet & Rotator',
description: 'Earn FREE Bitcoins Easier & Faster! Only 1000+ Rewards per Claim!'
},
function(response) {
if (response && response.post_id) {
unhide('claim', '');
} else {
}
}
);
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxx',
status : true,
cookie : true,
xfbml : true
});
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
}
};
</script>
I have placed FB like button using iframe code...
Here is the code for Like Button:
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fmadamebridal.com%2Fdev%2Fcheckout%2Fonepage%2F&send=false&layout=standard&width=450&show_faces=true&font&colorscheme=light&action=like&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
And I am using this code to capture the FB like event...
Here is the code:
window.fbAsyncInit = 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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Additional initialization code here
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked THISSS Yeaa');
}
);
};
But... it is not working.
Your question is not clear at all, when you go to the doctor you don't say, I feel pain and expect him to cure you. Are you loading javascript sdk properly?
This code should work for you, unless you have other scripts firing errors and prevent facebook sdk of working normally.
Put this code next to the your <body> tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.Event.subscribe('edge.create', function(response) {alert('You liked THISSS Yeaa'); });
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
I am currently using the following code to get the email id of the user using my app
function get_id(cb){
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.login(function(response) {
if (response.authResponse) {
var token = response.authResponse.accessToken;
alert(token);
accessToken = token;
FB.api('/me?access_token=' + token + '', function (response) {
cb(response.email);
});
}
},{scope: 'email'});
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
}; // ending of get_id()
get_id(function (email) {
userID=email;
alert(email);
});
the current code is in a separate javascript file and this function is called when a button is pressed , I have also included <script src="http://connect.facebook.net/en_US/all.js"></script> in the HTML file . my browser (google chrome) gives me the following error each time I try and access it
"Uncaught ReferenceError: FB is not defined "
I am relatively new to developing Facebook apps , so all the reference I have is the developers page at facebook , I am sure it is a small error but I just cant wrap my head around it , appreciate it if anybody could point out where I could be going wrong
Your code will not load correctly. This part:
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
Should not be inside any function, put this in a script tag, after the body opening. It can't be in a separate file. This only does a async-load of all.js, that is the Facebook's JS SDK. If you are using the async-load, you should not put <script src="http://connect.facebook.net/en_US/all.js"></script> in your document, because this will do a sync-load.
This other part of your code:
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
Also should not be inside the function. This fragment is responsible for starting the FB JS SDK in your page, with your app information, it only have to be called one time for each page, otherwise you will be starting the engine multiple times and it will have a caotic behavior. The "FB" object will only be created after the FB JS SDK loads. You don't know when it's going to happen, because of the async load. So you must assign the FB.init to this window event:
window.fbAsyncInit = function() {
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
You want to create a get_id function that uses the Facebook information. You have to be careful with that. With you are sure that this function will be called after the complete load of FB JS SDK, you can create it in any part of your page. BUT I think the most safe way is to create it inside the window.fbAsyncInit. Don't worry about the token, the SDK does it for you:
window.fbAsyncInit = function() {
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
function get_id(cb){
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function (response) {
cb(response.email);
});
}
},{scope: 'email'});
}
};
But when you do that, you will be not sure if your function was already created or not. So when you call it, you will have to test for it's existence:
if(get_id && typeof get_id == 'function') {
// It's safe to call your function, go ahead
get_id(function (email) {
userID=email;
alert(email);
});
} else {
// Your function does not exists yet, do other stuff
}
Good luck!
You need to put:
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
out of get_id function. So it was called before you press the button
PS: you don't need to pass ?access_token= manually - FB JS SDK does that for you
To explain, I'd like for a link to only become available for clicking once visitors have 'Liked' my website (not my Facebook page - the actual website). I've been trying to do it using this code:
<script>
FB.Event.subscribe('edge.create', //FB.event.subscribe attaches a handler to an event and invokes your callback when the event fires.
function(response) { //This is where the response function is inserted, I used document.write for this example
document.write(';This is the HTML I want to display');
}
);
</script>
But even after I like my website the link doesn't display. I hope I've been as clear as possible, any help would be greatly appreciated.
I managed to get it working after some thinking and playing around:
<!-- FB Javascript SDK -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'APP-ID',
channelUrl : '//WWW.WBESITE.COM/channel.html', // Channel File
status: true,
cookie: true,
xfbml: true,
oauth: true,
});
// Additional initialization code here
FB.Event.subscribe('edge.create', function() {
window.location.href = "http://WEBSITE.COM/";
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<!-- More FB Javascript SDK (Like Button) -->
<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>
<script src="//connect.facebook.net/en_US/all.js#xfbml=1">
</script>
The FB.Event.subscribe needed to be placed within the window.fbAsyncInit function. I then made it so that instead of having the HTML appear after the 'Like' button had been pressed it simply redirected it using the window.location.href = "http://WEBSITE.COM/"; to a page that has the new link included on it. The document.write function wasn't working because it would get rid of all the HTML on the page other than what was included in the function.
The code above needs to be placed just after the opening tag and then you can place the code for the 'Like' button:
<div class="fb-like" data-href="http://WEBSITE.COM" data-send="send" data-layout="button_count" data-width="450" data-show-faces="true"></div>
Anywhere that you would like on the page!
According to Facebook: "The best place to put this code is right after the opening tag"
Example:
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelURL : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// 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/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
But I would like like to add this in the jquery block $(document).ready(function() { }
How can that be done?
Include jQuery, and then...
$(document).ready(function(){
callFB();
loginClick(); // Call function
});
function callFB(){
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelURL : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// 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/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
}
function loginClick(){
// your click handling code in here
}
This is more what you're looking for I think...
https://developers.facebook.com/docs/javascript/howto/jquery/
You can try this jQuery plugin i made too.. :]
jQuery.fbInit = function(app_id) {
window.fbAsyncInit = function() {
FB.init({
appId : app_id, // 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/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
$('<div />').attr('id','fb-root').appendTo('body');
};
$(document).ready(function(){
$.fbInit('12345678901234');
});