I have the following js from facebook which simply loads either a feed or send dialog depending on method setting.
It loads it on page load. Can it be instead loaded on click? Meaning when a user wants it rather than when the page loads?
Example js
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script>
// assume we are already logged in
FB.init({appId: '123456', xfbml: true, cookie: true});
FB.ui({
method: 'feed',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html',
});
</script>
Sure, why not! Serve the API inside a function and execute the function on click of an anchor tag.
Here's the demo: http://jsfiddle.net/kayen/N9jhL/
Related
I'm having an issue here when trying to display data or get the data to work or at least be displayed in the console - I currently have a TypeScript React project where I want to display a Facebook page posts, which include the pictures and message/description.
By following other resources and else, I've found that Ad blocker blocks the API on loca host at least, thus I added js.src to the connect Facebook link, that has been the most noticeable change I've done to the code given by Facebook in https://developers.facebook.com/docs/javascript/quickstart and I've replaced some of the appId digits with **** just in case.
And this is line of code in the index.html:
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script>
function init() {
FB.api(
"/me",
"GET",
{ fields: "id,name,about,posts{full_picture,message}" },
function (response) {
console.log(response.name);
}
);
}
window.fbAsyncInit = function () {
FB.init({
appId: "713461583720****",
autoLogAppEvents: true,
xfbml: true,
version: "v16.0",
});
init();
};
</script>
<script
async
defer
crossorigin="anonymous"
js.src="https://connect.facebook.net/en_US/sdk.js"
></script>
</body>
I'm open to answering any questions, I'm super thankful for any respond this thread gets, thanks!
I have already included this in my page html:
<div id="fb-root"></div>
<script type="text/javascript" language="javascript">
(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>
And that I have facebook-like box in my page already, however I need to do now a way to send messages to email using the Facebook Javascript API. Is this configuration enough to call a "send message"?
I have a custom HTML form in which when I click send I like it to send a message on my Facebook page's behalf. I have my page up in Facebook.
I need to send message without any server side component (pure Javascript)
I have a existing Facebook page (which I will use to send messages with)
I have a custom form in which will be used to type in message.
The message will be sent to some specific email address
I can send to any email with Facebook so I assume this will work
I will answer your questions separately:
I need to send message without any server side component (pure
Javascript)
If it can be a simple message to a facebook user, you have to use the FB.ui send dialog: https://developers.facebook.com/docs/reference/dialogs/send/
That´s pretty much the only way for you, you can just try putting in an email address in the popup. According to the documentation, it should work.
I have a custom form in which will be used to type in message.
That´s where even the send dialog will not work anymore. You cannot prefill the message parameter, what you want would only be possible with the PHP SDK of Facebook. But then again: Why would you program the textfield on your own, if Facebook already offers everything in that dialog?
Without that dialog, there is no way to just send a message in the background without a server side language like PHP.
Use this: here is the source Facebook send message
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script>
// assume we are already logged in
FB.init({appId: '123050457758183', xfbml: true, cookie: 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',
});
</script>
</body>
</html>
Adding to the above answers. You might want to make a function.
<div class="facebook-invite">
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root">
Invite Facebook Friends
</div>
<script>
FB.init({appId: 'XXXXXXXX', xfbml: true, cookie: true});
function FBInvite(){
FB.ui({
method: 'send',
name: 'Join This website it is cool',
link: 'rishabhjainiitbhu.ac.in',
});
}
</script>
</div>
This will make a link, clickin on which the dialog box will pop up.
I'm trying to get the user to login using their Facebook account on the page but for some reason the button on the page does nothing. What the heck am I doing wrong? Link: http://friendsconnect.org/Main.php.
Pasting the FB.init call into my JavaScript console and then hitting the "connect" button got me the usual Facebook Connect window so you're probably having timing issues. Try changing your FB.init call to this:
<script type="text/javascript">
$(document).ready(function() {
FB.init({appId: '168032083219061', status: true, cookie: true, xfbml: true});
});
</script>
That way it won't be called until everything is all set up. Also, you don't need all three of these:
<script src="http://friendsconnect.org/jquery_custom/jquery.curvycorners.source.js" type="text/javascript"></script>
<script src="http://friendsconnect.org/jquery_custom/jquery.curvycorners.packed.js" type="text/javascript"></script>
<script src="http://friendsconnect.org/jquery_custom/jquery.curvycorners.min.js" type="text/javascript"></script>
You only need one of them, probably the jquery.curvycorners.min.js version.
I hava a Facebook Canvas Application and I need to use FQL in it.
I try to use FQL by using the following code (Facebook JavaScript SDK)
Output-<span id='temp'></span>
<script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
document.getElementById('temp').setTextValue('First');
FB.init({ apiKey: 'my api key' });
document.getElementById('temp').setTextValue('Second');
FB.api(
{
method: 'fql.query',
query: 'SELECT name FROM profile WHERE id=me()'
},
function (response) {
document.getElementById('temp').setTextValue(response[0]);
}
);
</script>
But it doesn't work! It makes an error after document.getElementById('temp').setTextValue('First');
What's wrong with this code?
I have solved this one. You can't use Facebook JavaScript SDK inside of FBML Canvas pages, it is possible only for iFrame Canvas pages.
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();
}