I want to use jquery/js to simulate the click on original fb share button when I click my custom button.
This is what I've got:
<script>
$(function(){
// initialize fb sdk
window.fbAsyncInit = function() {
FB.init({
appId : '830561340319450',
xfbml : true,
version : 'v2.2'
});
};
(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>
<div class="fb-share-button" data-href="www.myweb.com/topic/hello_world" data-layout="button"></div>
<button class="my_own">Lets share</button>
I want when I click on my_own, the facebook stock button also get clicked. Any idea how to do that?
Remove the Facebook share button. Trying to trigger a click on it is not the way to go; it might even trigger measures they have in place to prevent click-jacking, and as a result get your app blocked by FB.
Implement the call to the Share dialog when the user clicks your own button:
HTML:
<button class="my_own" type="button" onclick="share();">Lets share</button>
JavaScript:
function share() {
FB.ui({
method: 'share',
href: 'http://www.myweb.com/topic/hello_world',
}, function(response){});
}
Related
I am trying this for the sharing of post on the facebook:
<div id="shareBtn" class="btn btn-success clearfix">Share Dialog</div>
<p>The Share Dialog enables you to share links to a person's profile without them having to use Facebook Login. Read our Share Dialog guide to learn more about how it works.</p>
<script>
document.getElementById('shareBtn').onclick = function() {
FB.ui({
display: 'popup',
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){});
}
</script>
I want to know what is missing owing to which my application is not getting the sharing dialog.
Here is the console error I found:
(index):292 Uncaught ReferenceError: FB is not defined
at HTMLDivElement.document.getElementById.onclick ((index):292)
You have to load the JavaScript SDK:
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.10'
});
//now FB is available
};
//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'));
More information:
https://developers.facebook.com/docs/javascript/quickstart/
http://www.devils-heaven.com/facebook-javascript-sdk-login/
In a process of hiding piece of content for people who didn't like our page yet. Using Facebook SDK for the first time. The idea is to have a call to action text and button. Once button is clicked, if user already likes our page- it shows a piece of content. If not- shows a like button and shows piece of content after it's clicked.
Here is connecting SDK
window.fbAsyncInit = function() {
FB.init({
appId : '348511868693215',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(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'));
And here is actual code for checking
FB.api({
method: "pages.isFan",
page_id: page_id,
}, function(response) {
console.log(response);
if(response){
//if liked
$(".show-poll").click(function(){
$(".actualpoll").show();
});
} else {
$(".show-poll").click(function(){
$(".likepage").show();
});
}
}
);
Your code "for checking" is executed before the SDK is loaded, i.e. before FB is available. Move the code inside the window.fbAsyncInit function. That function is called once the SDK is available.
I need to get facebook like click button on a new window that my website will open.
When click on the like button I want to show a thank you message.
I try:
<script>
function openWin() {
myWindow = window.open("https://www.facebook.com/permalink.php?story_fbid=ID", "myWindow", "width=200, height=100");
}
FB.Event.subscribe('edge.create', function(response) {
alert("thank you for like");
});
</script>
<button onclick="openWin()">Open facebook to like post</button>
but it is not working. what is wrong?
Make sure the JavaScript SDK is loaded correctly BEFORE using FB.Event.subscribe: https://developers.facebook.com/docs/javascript/quickstart/v2.4
For example:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.4'
});
FB.Event.subscribe('edge.create', function(response) {
alert("thank you for like");
});
};
(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>
So I have the following code that implements a facebook button on a welcome page that redirects to a user page:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid',
xfbml : true,
version : 'v2.2'
});
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.status === 'connected') {
window.top.location = 'user url';
}
});
};
(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>
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true"></div>
The button works fine, and it redirects to the user page. My code for the user page is:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid',
xfbml : true,
version : 'v2.2'
});
FB.Event.subscribe('auth.logout', function(response) {
window.top.location = 'welcome page url';
});
};
(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>
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true"></div>
Which shows me a log out button on the user page after successfully logging in, which is awesome. However, clicking the facebook log out button does not redirect me back to the welcome page; it just stays at the user page, except the button now changes back to a log in button. However if I use the fb log in button while in the user page, then use the fb button to log out, now it redirects me back to the welcome page.
I'm not sure why the fb log out button redirects me only if I logged in on the user page, and not when I log in through the welcome page. Is there a different way to do a redirection after using the fb log out button? Subscribing to auth.StatusChange and auth.authResponseChange doesn't work either. I'm using Ruby on Rails, if it matters, thanks!
Adding
FB.getLoginStatus(function(response) {
...
});
after
FB.Event.subscribe('auth.logout', function(response) {
...
});
in the user view works, now the logout button redirects back to the welcome page. I'm not sure why this works, since the FB.getLoginStatus part doesn't do anything right now. I'm thinking that the getLoginStatus somehow notifies/triggers/allows the FB.Event.subscribe('auth.logout') to run/notice that the user isn't logged in.
I've got like button on page and I'm catching events edge.create and edge.remove.
I'm using this code from Facebook developers page:
<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 = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.Event.subscribe("edge.create", function(targetUrl) {
console.log("liked");
});
FB.Event.subscribe("edge.remove", function(targetUrl) {
console.log("removed");
});
}
</script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="false"></div>
But I can't find a way to catch events when user clicks "close" or "add a comment" button in popup.
I tried with "comment.create" and "message.send" and it didn't work.
Is there any way to catch these events?
See Marc Witteveen's answer and my answer at Catching the close or post to Facebook event of the Facebook comment box for polling for the height of the comment dialog. This is working for me.