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)
Related
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 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
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 using the facebook javascript sdk to embed a like button in my page.
What is fb_xd_fragment? I see it appends to the end of my url like http://www.example.com/controller/?fb_xd_fragment, and this is causing some nasty recursive reload of the page.
After many weeks of trying to find a solution it looks like what is needed is a custom channel url as mentioned here:
http://developers.facebook.com/docs/reference/javascript/FB.init
All I did was create the channel.html file containing this single line:
<script src="http://connect.facebook.net/en_US/all.js"></script>
Then I added the channelUrl : line so the final result looks like this:
<div id="fb-root"></div> <script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://www.example.com/channel.html' // custom channel
}); };
(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>
Make sure to add a comma after xfbml : true if it was your last line. I'm not familiar with Javascript so I don't know if I'm taking full advantage of this but I know it prevents the fb_xd_fragment issue and allows FB comments in IE. As far as I can tell, this is the ONLY solution available online. Any further tweaks are welcome.
Solved with the iframe like button.
The fix for this bug can be found here:
http://wiki.github.com/facebook/connect-js/custom-channel-url
a1anm's link is good for cleaning up the mess that this causes, but there's a way to prevent it from happening.
Set 'channelUrl' to a locally hosted channel page. See http://threebrothers.org/brendan/blog/facebook-connect-ie-fb_xd_fragment-iframe/ for details.
The bug and the fix are now documented at http://developers.facebook.com/docs/reference/javascript/fb.init/
I used the approach within script to define the channelUrl to a page on my site, but I still got multiple hits back to that page.
After watching the resulting traffic with WireShark, I noticed they (Facebook) use a channelUrl for some of their own internal calls, also passing fb_xd_fragment - I instead used that URL for the channelUrl, redirecting it away from my site.
I have multiple Like buttons on my site using fbml instead of frames, and on IE7, I no longer get a hit back from Facebook with the fb_xd_fragment parameter.
Not sure if this is best practice but it seems to work.
I set this value for the channelUrl:
'http://static.ak.fbcdn.net/connect/xd_proxy.php'
Hope this helps.
Although the answer above from github seems like an answer to another question, it does work well.
UPDATE: link is broken - try http://blog.colnect.com/2010/10/fbxdfragment-bug-workaround.html
affer few days research and expriment with all solution on internet at last i come up with combine of this
Change your head of your page:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en-US">
here the cocde put this where you want likeit button is:
<div class="yourclass" style="z-index: 10;">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" ></script>
<script>FB.init({appId: '1234yourappidhere', status: true, cookie: true, xfbml: true});</script>
<fb:like href="http..yourencodedurlswillputhere" layout="button_count" width="150" action="recommend" colorscheme="light"></fb:like></div>
<script> document.getElementsByTagName('html')[0].style.display='block';</script>
credit wellcome : http://www.xaluan.com
The Channel hack did not work for me.
So I just added above all other content in my PHP file some code that 301 redirects to the URL without the fb_xd_fragment addition:
$url = "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
if (isset($_GET['fb_xd_fragment'])) {
$url = str_replace("?fb_xd_fragment=","",$url);
header( "HTTP/1.1 301 Moved Permanently" );
header("Location: {$url}");
exit();
}