hello im having a small issue of where to exactly place the appID from facebook for the share function to work. I get the error. "The parameter app_id is required"
edit: sorry i forgot to mention how i want it to work. i need it to grab to the current url to share on facebook for multiple products.
EDIT2: reupdated the code but still am getting an error
<h4>SHARE THIS!</h4>
<div class="addthis_sharing_toolbox"></div>
<a class="social gp" href="#">google+</a>
<a class="social pt" href="#">pintrest</a>
<a class="social fb" id="fb" href="#" >facebook</a>
<script>
window.fbAsyncInit = function() {
FB.init({appId:'2**************', status: true, cookie: true, xfbml: true,});
};
</script>
<script>
document.getElementById('fb').onclick = function() {
FB.ui({
display: 'popup',
method: 'share',
href: 'window.location.href',
}, function(response){});
}
</script>
<a class="social tw" href="#">twitter</a>
<a class="social ig" href="#">instagram</a>
If you are just looking for the basic JavaScript SDK setup, it should go directly under the opening body tag (along with the snippet to asynchronously load the SDK) like so:
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
xfbml : true,
version : 'v2.0'
});
};
(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>
<!-- Your code here -->
</body>
Here's where it's described in their quickstart guide: https://developers.facebook.com/docs/javascript/quickstart/v2.1.
Then, later, you should just be able to use the share dialogue wherever you need it:
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){});
Here's where that's described: https://developers.facebook.com/docs/sharing/reference/share-dialog
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/
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){});
}
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 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!