I only want one js link and one div on the html page.
Inside the js file I'm loading scripts and divs for twitter button, Google +1 and the buttons are displaying and working correctly.
The facebook like button script alerts that it's loaded, but the button doesn't display - any ideas why? It's a text/ecmascript, should this make a difference?
$.getScript("http://connect.facebook.net/en_US/all.js#appId=211332918913418&xfbml=1", function() {
alert ("script executed");
});
$("#social-media").append('<div id="fb-root"></div><fb:like href="http://ourworldlive.tv/index.html" send="false" layout="box_count" width="55" show_faces="false" font=""></fb:like>');
If script is in head of document, button renders.
On our docs we have a little snippet about how to load the JS sdk asynchronously.
https://developers.facebook.com/docs/reference/javascript/
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', 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>
Do you have and the FB:like button so it can actually create it? Those things need to be on the page as well
Related
Hi i want to load comments from google plus. what people are posted on google plus from my website.
i actually just installed this code in WordPress blog post. if a user wants to reply to post by clicking on Google+ button to load code from Google plus and load comments.
<button onClick="showGoogle();">Google+</button>
<div style="max-width:100%" id="loading">
<div id="gpcomments" style="max-width:100%"></div>
</div>
<script>
gapi.comments.render('gpcomments', {
href:'http://findsgood.com/?p=43224',
width: '682',
first_party_property:'BLOGGER',
view_type: 'FILTERED_POSTMOD','callback' : function showGoogle() {src='https://apis.google.com/js/plusone.js';}});
</script>
plusone.js is being loaded asynchronously but gapi is being called synchronously. gapi isn't available until plusone.js is finished loading. You can use an onload event to wait until gapi is ready for use.
<button onClick="showGoogle();">Google+</button>
<div style="max-width:100%" id="loading"><div id="gpcomments" style="max-width:100%"></div></div>
<script>
function showGoogle() {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://apis.google.com/js/plusone.js';
script.onload = function() {
gapi.comments.render('gpcomments', {
href:'http://findsgood.com/?p=43224',
width: '682',
first_party_property:'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
}
head.appendChild(script);
}
</script>
finally found code working but i have to click button twice. i don't know why i need to click two times?. please someone help?
<button onClick="showGoogle();">Google+</button>
<div style="max-width:100%" id="loading"><div id="gpcomments" style="max-width:100%"></div></div>
<script>function showGoogle() {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'https://apis.google.com/js/plusone.js';
head.appendChild(script);
gapi.comments.render('gpcomments', {
href:'http://findsgood.com/?p=43224',
width: '682',
first_party_property:'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});}
</script>
you can run test here a on blog post http://findsgood.com/?p=43224
First click generates an error in the console, for the sake of testing try to include plusone.js in theme header manually. (this feels more like a comment, just can't add them yet).
The following codes have worked before but not now. Since FB added the confirm box when liking a page, the edge.create was no more fired after confirming.
<div class="fb-page" data-href="{{ $fbPageUrl }}" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>
<script>
$(document).ready(function() {
$.getScript('//connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId : 'xxxxxxxxxxxxxx',
xfbml : true,
version : 'v2.9'
});
FB.Event.subscribe('edge.create', function(response) {
alert('Fired!');
});
});
});
</script>
You can no longer subscribe to edge.create. At this time (04/2018) it is still in the documentation, but it is deprecated and to be fully removed in the near future.
By design, there is no way for a third party application to know when the Like button is clicked.
You will need to design your app in a way that does not require you to know when the Facebook Like button provided in the iframe is clicked.
Referencing this bug report:
The edge.create event is deprecated (https://developers.facebook.com/docs/plugins/faqs/), so the engineers have decided not to fix it for this case since it will be taken out completely in the future api release.
And from this one:
I understand that it's important to you, but unfortunately we did the deprecate on purpose due to policy issue.
Developers are not supposed to check the user press any more.
I suspect this is a bug from the new Facebook's update. You can search for the issue here https://developers.facebook.com/bugs, also can post a new bug if it hasn't been reported yet
These Events will no longer be accessible. As an alternative, you can use our Webhooks and be notified every time someone likes one of your Facebook Pages.
This is the webhooks endpoint
Source
Working solution until now:
<!doctype html>
<html lang="en" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta charset="utf-8">
<title>Facebook Like Button</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
FB.init({appId: '1906177386133148', status: true, cookie: true, xfbml: true});
FB.Event.subscribe("edge.create", function (targetUrl) {
console.log('edge.create');
});
FB.Event.subscribe("edge.remove", function (targetUrl) {
console.log('edge.remove');
});
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/es_ES/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like></fb:like>
</body>
</html>
I am getting an error in Chrome when using a few Facebook plugins, including LIKE button and LIKE Box. This is the error I get:
Unsafe JavaScript attempt to access frame with URL http://samplewebsite.com/ from frame with URL http://static.ak.facebook.com/connect/xd_arbiter.php?version=18#channel=f3c….com&channel_path=%2Fchannel.html%3Ffb_xd_fragment%23xd_sig%3Df105c9419%26. The frame requesting access set 'document.domain' to 'facebook.com', but the frame being accessed did not. Both must set 'document.domain' to the same value to allow access.
*I replaced the site domain for a different one
I tried different variations of the buttons, including XFBML, iframe, HTML5 but nothing seems to solves this. I also use a channel.html file.
My Javascript code initialization:
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: 'some_app_id',
status: true,
cookie: true,
channelUrl: '//samplewebsite.com/channel.html',
xfbml: true
});
};
(function (d) {
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>
The fb-root div exists on the page right above the script.
My doctype is for HTML5:
<!DOCTYPE html>
<html
lang="en"
prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"
xmlns="http://www.w3.org/1999/xhtml">
I also tried with the regular attributes without the prefix, but still get the same error.
Is there a solution for that. I can provide any information needed. Thanks!
I am not using any Flash at my application. The code that cause the issue is the simplest one that you can find at the end.
I configured my application to work in IFrame exactly as it mentioned at the facebook developer site.
The problem is that when I add the init option the page doesn't stop to do ajax call (infinite loop) to the server in IE8 and if I am playing with it for a while and moving up & down after I am clicking on the button to submit the form I see those kind of errors:
Error #2044: Unhandled
SecurityErrorEvent:. text=Error #2047:
Security sandbox violation:
LocalConnection.send: ak.fbcdn.net
cannot access
http://static.ak.fbcdn.net/rsrc.php/v1/yF/r/Y7YCBKX-HZn.swf.
or
Error #2044: Unhandled StatusEvent:.
level=error, code=
Again I am not using any Flash/Flex/SWF in my facebook application and I am using the most simple code that contain just JS without any changes.
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<!-- stylesheets for the UI -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
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>
<form>
<button type="submit"> WOW</button>
</form>
</body>
</html>
Check your app settings in the Facebook Developer app: I've noticed similar problems if you have the Site Domain field set incorrectly. The page simply keeps refreshing over and over and over again.
I couldn't figure out what value to put there to make it stop doing that so I simply cleared that field and the problem went away.
I am trying to add "Become-a-Fan" button to my 2008 asp.net website (vb)
Here is an example i have followed http://www.docstoc.com/docs/9646635/Add-a-Facebook-Fan-Button-to-your-Website/
posted this following script to my website:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/connect.php/en_US"></script><div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId: "253787057811", 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> <fb:fan profile_id="253787057811" stream="0" connections="0" logobar="1" width="300"></fb:fan> <div style="font-size:8px; padding-left:10px"> WebClip on Facebook </div>
But Not able to see the Image button "Become-a-Fan"
Please Let me know.
You can create Facebook fan badges on this page: http://www.facebook.com/facebook-widgets/fanbadges.php
i just had this in my master page and is working good.
<fb:fan profile_id="253787057811" stream="0" connections="0" width="300"></fb:fan>
You are missing an API key. The code you have is generic code that needs APIkey replaced in it.
Here is more information: FanBox Wiki
It sounds like you just need a badge on your site. Try just doing something like facebook recommends like using a hyperlink to your facebook page with this image inside it.
(source: fbcdn.net)
(Right-click, save as and host in your web app)