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">
Related
I have configured Facebook comment in website.
<script>
window.fbAsyncInit = function() {
FB.init({appId: '****************', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div id="fb-root"></div>
<div class="fb-comment"><fb:comments href="http://XX.YY.ZZ/website" num_posts="8" width="610"></fb:comments>/div>
Whenever someone login and comment, they got error
Sorry, this feature isn't available right now.
Please let me know if it is because I have used IP address rather domain name, or there are settings in Facebook app for comment or anything else.
include js-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_GB/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-comments" data-href="http://developers.facebook.com/docs/plugins/comments/" data-numposts="5"></div>
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'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>
I just begin the facebook development, and I try to make the first app with javascript SDK.
However, when I go the page where I install the code, I have an error message saying that "does not work , try again later."
My application is in development mode and it's the good Appdata
In facebook dashboard I entered as domain: http://yofitness.fr
Someone have an idea ?
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{624205284323943}',
status : true,
xfbml : true
});
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html',
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
Change appId:'{624205284323943}', to appId: '624205284323943',
I have code like this.
$(document).ready(function() {
var highestCol = Math.max($('#main').children().height(),$('#main').children().height());
$('#main').children().height(highestCol);
});
But this doesn't work when I have Like box in some column. It seems this called before Facebook like box called.
How to fix this problem?
Basically I need to call this process after facebook loads Like box and Recommendations blocks (both).
To execute code after the facebook plugin has rendered, you can subscribe to xfbml.render. Here is my working code:
window.fbAsyncInit = function () {
FB.init({ status: true, cookie: true, xfbml: true });
FB.Event.subscribe("xfbml.render", function () {
fbexecute();
});
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
} ());
var fbexecute = function () {
//-- re-calculate heights here
}
I think you can just put the like-button in a fix-height container.
For example:
<div style="height: 62px;">
<fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="false" stream="false" header="false"></fb:like-box>
</div>
Then you won't worried about exactly how height it will be.
Another possible solution.
I suppose that you using the method of load facebook javascrpt sdk asynchronously. Then you can execute your code after FB.init()
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
if (jQuery.isFunction(window.fbexecute)) {
window.fbexecute();
}
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
var fbexecute = function() {
var highestCol = Math.max($('#main').children().height(),$('#main').children().height());
$('#main').children().height(highestCol);
}
As per the FB.Event.subscribe, there is a loading event which will be triggered automatically when the page will finish rendering plugins
Step-1: In the HTML (put it where you want the social box to be shown):
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook">Facebook</blockquote></div></div>
Step-2: In the footer (just before ending the <body> tag):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
//FB.init({ status: false, cookie: true, xfbml: true });
FB.Event.subscribe("xfbml.render", function(){
columnHeightFixer();
});
};
(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#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function columnHeightFixer(){
//...Height Fixing Code...
}
</script>
$(document).ready(function()
{
var highestCol = Math.max($('#main').children().height(),$('#main').children().height());
$('#main').children().height(highestCol);
});