I'm trying to שמ IFRAME TAB on the Facebook page with fans gate page
The TAB works with link directly to the server, i put the button like plugin to when users clicked on the like the gate dropped and fans will place in the page. The problem is that when you click on the Like (of the Flagain), page does not get the command to refresh itself and nothing happens ... after searching several places on the net I found this function
<body class="body">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId :'208195102528120',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://www.drinkin.co.il/ginger/coupon/coupon_ginger.html', // channel.html file
oauth : true // enable OAuth 2.0
});
</script>
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
window.location.reload();
if (top.location!= self.location) {
top.window.location.href = "https://www.facebook.com/gingereilat/app_208195102528120";
}
});
</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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<img src="https://www.drinkin.co.il/ginger/coupon/coupon_ginger_gate.jpg" width= "810" height= "1200" />
<div id="fb">
<div class="fb-like"><fb:like href="https://www.facebook.com/gingereilat" send="false" layout="button_count" width="200" show_faces="false"></fb:like></div>
</div>
</body>
</html>
It's good I think but it just does not work on FF & Chrome...
Try this:
window.top.location.replace("URL");
update:
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
window.location.reload(); //Remove it
if (top.location!= self.location) {
window.top.location.replace("https://www.facebook.com/gingereilat/app_208195102528120");
}
});
</script>
Related
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 have to put facebook comment social plugin in my father's personal website.
Main problem is that website is in html (no asp or php).
Problem: I had to find a way to put the current page url in facebook plugin. i solved reading many solutions with jquery, but it seems to work only after the second page refresh (the first time comment box is loaded... but comments are not published on author timeline..)
this is my code:
in the head section:
<script>
$(document).ready(function() {
$('.fb-comments').attr("data-href", document.URL);
});
</script>
in body:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID',
xfbml : true,
version : 'v2.1'
});
};
<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/it_IT/sdk.js#xfbml=1&appId=MY_APP_ID&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
FB.Event.subscribe('comment.create', function(response) {
alert('comment created: ' + response);
$(document).load('mail.php?response='+response);
});
</script>
at the end of the page, the comments box (it has not data-href because is pushed by jquery):
<div class="fb-comments" id="fb-comments" data-numposts="5" data-colorscheme="light"></div>
Why it's not working every time?
is code for async loading correct?
example url: http://www.lemiecime.it/cime/fancy.htm (it's a demo page.. you can put comments)
many thanks
i am working on a web application and i have added fb like button and share button. like button is woring fine but i have read the hyperarts tutorial from this SE question http://www.hyperarts.com/blog/tutorial-add-share-button-iframe-tab-applications/ . but i have done the same procedure for sharing a particular div but i dono where i make a mistake . can anybody help me or can give suggestions. i have even fiddle it but does not work in my app . http://jsfiddle.net/EZyaF/
Here is the like code:
<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_GB/all.js#xfbml=1&appId=425369200906567";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like"
data-href="https://www.facebook.com/weatherappproj" data-width="450"
data-show-faces="false" data-send="false"></div>
and here is the Share a particular div code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '4x5x6x2x0x0x5x7',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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);
}());
</script>
<script type="text/javascript">>
$(document).load(function(){
$('#shareonfb').live('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'Weather App',
picture: 'images/weatherapp.jpg',
caption: 'My current position and its weather',
description: 'Weather App Facebook',
message: ''
});
});
});
</script>
<img src="images/share-on-facebook-button.gif" id="shareonfb">
This is making me crazy - I can't get the facebook comment.create event to fire on mobile devices (not that I tested work). login event is working fine (auth.authResponseChange)
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPPID', // App ID
channelUrl : '//WWW.MYAPPURL.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('comment.create', function(response) { alert("1"); });
// FB.Event.subscribe('auth.authResponseChange', function(response) {alert("1"); });
};
// 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 = "http://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
comments
<div class="fb-comments" data-notify="true" data-href="http://test/test.htm" data-width="470" data-num-posts="10"></div>
</body>
</html>
Please note that this is still an ongoing FB bug
I am looking on the Facebook Developers Documentation to locate some sample code that would allow me to capture a click event on the "Like" button. It states:
If you are using the XFBML version of the button, you can subscribe to
the 'edge.create' event through FB.Event.subscribe.
I am not using XFBML however, this is my code:
<div class="social_net_button facebook_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";
fjs.parentNode.insertBefore(js, fjs);
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.facebook.com/pages/Ayrshire-Minis/160330240663397" data-send="false" data-layout="button_count" data-width="70" data-show-faces="false" data-action="recommend"></div>
</div>
Can a click of the 'Like' button be captured by jQuery?
You could try this.
http://jsfiddle.net/qkyAe/
Docs: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
FB.Event.subscribe('edge.create', function(response) {
console.log('clicked');
});
I think this one only counts if user clicks AND it increaes the like count (logged in users only) Since I don't have an FB-Account I couldn't try it.
Please tell me, if it works :)
Update:
The FB object comes from the script you're already embedding.
The solution, it would appear, is sending the request asynchronously. This code below works when placed after my fb-like div class:
<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
});
};
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create',
function(response) {
_gaq.push(['_trackSocial', 'facebook', 'like', document.location.href]);
}
);
};
</script>
This code REALLY works :)
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
window.fbAsyncInit = function() {
FB.init({
appId: '42424242424242',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
};
(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>
<div id="fb-root"></div>
<div class="box">
<p>First a Like Box of a facebook page</p>
<p class="info">edge.create is not called</p>
<div class="fb-like-box" data-href="http://www.facebook.com/jsfiddle" data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>
</div>
<div class="box">
<p>Like Button of a website</p>
<p class="info">here you can see the edge.create fire</p>
<div class="fb-like" data-href="http://jsfiddle.net" data-send="false" data-width="150" data-show-faces="true"></div>
</div>
<div class="box">
<p>Like Button of a Facebook Page</p>
<p class="info">here you can see the edge.create fire</p>
<div class="fb-like" data-href="http://www.facebook.com/jsfiddle" data-send="false" data-width="150" data-show-faces="true"></div>
</div>
<div style="clear:both;"></div>
Make sure the FB.Event.subscribe('edge.create') call is right after the init (within the window.fbAsyncInit function and not outside of it)
Example
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
xfbml : true // parse XFBML
});
/* Additional initialization code here
******************************************************/
};
...then load the SDK Asynchronously!