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.
Related
Having a problem setting up the moderation toolkit on my facebook comments plug-in. I am trialling this on one page at the moment until I copy it to all pages to each have their own individual comments boxes.
Site Page: http://gp2aus.com/why-go.html
I have inserted the following after my head tag:
<!-- Facebook Comments Box App ID -->
<meta property="fb:admins" content="{100016298409099}"/>
<meta property="fb:app_id" content="{1321908721223176}" />
The following comes after the opening of the body tag:
<!-- Facebook Comments Box 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_GB/sdk.js#xfbml=1&version=v2.9&appId=1321908721223176";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And the following is in the correct location on my page within the body tag:
<!-- Facebook Comments Box -->
<div class="fb-comments" data-href="http://gp2aus.com/why-go.html" data-width="100%" data-numposts="100" data-order-by="reverse_time"></div>
I have tried all of the applicable solves I have found on SO.
My AppID is correct
AppID's match in the script and AppID pages
I am listed as a moderator in the Settings in the 'Tools & Support' section
I am not in the banned or blacklisted sections!
One thing that I wonder is the problem, but don't know how to fix, is that when I open the 'Facebook for Developers' site and click on the 'Tools & Support' it says that there are no comments for review. Which is odd given that I have just tried making some example comments from myself and another profile and nothing seems to come up.
Can't quite see what I'm doing wrong here but would much appreciate your collective wisdom!
S.
{} are used in the documentation to show that you need to insert a value at this point; they are not part of that value.
If you see f.e. {app-id} in there, it means you need to replace the whole placeholder {app-id} with the actual app id, not just put it inside the curly braces.
Fix that, and then use https://developers.facebook.com/tools/debug to refresh the cache and check for further errors.
I am trying to use the Facebook Javascript SDK feed dialogue to create a share button on my app.
I am using the php sdk on my app which is a codeigniter build deployed on Facebook.
I used the following on my php page.
<script type="text/javascript">
function share(){
FB.ui({
method: 'feed',
link: 'https://apps.facebook.com/myapp',
caption: 'An example caption',
}, function(response){});
}
</script>
<button onclick="share()">Share this Video</button>
When I attempt to run this on my canvnas page, (when button is clicked), I get a pop up with error:
An error occurred. Please try later
.
On localhost, when I try this I get a pop up with error:
API Error Code: 191 API Error Description: The specified URL is not
owned by the application Error Message: redirect_uri is not owned by
the application.
I've been looking at other question with similar problems but now luck in getting this working.
How can I fix my code to work so that when the button is clicked, I get a prompt to publlish to my wall, and enter a message.
Can this be done with the php?
EDIT:
Did some checking, does this fb.ui need to be used with this, or can it be used?
Try this. It working fine form me.
Script:
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/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_GB/all.js#xfbml=1&appId=1234567890";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
FB Button:
<div class="fb-share-button" id="fb-root" data-href="<?php echo $yourlink; ?>" data-type="button_count"></div>
Put this after body tag or before script.
<div id="fb-root"></div>
This async code goes in the header and allows to show a FB like button:
<script type="text/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.async=true; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=XXXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
This code goes where the FB like button is shown (together with Google Analytics tracking code)
<div id="fb-root"></div>
<script type="text/javascript">_ga.trackFacebook();</script>
<div class="fb-like" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
Everything works good but on a single (a guestbook, actually) page where I have a FB login button ( Link to the page ) positioned at the bottom of the page. The FB login button uses Facebook SDK for PHP.
if (!$user): ?>
<div id="fb-root" style="display:none"></div>
<script language="javascript" type="text/javascript"> //modifica per validazione w3c
//<![CDATA[
document.write('<fb:login-button size="medium" scope="email">Login with/Accedi con Facebook</fb:login-button>');
//]]>
</script>
It won't appear unless I delete
<div id="fb-root"></div>
from the FB like button code. The problem is that FB login button needs that fb-root div, too.
It seems that deleting
<div id="fb-root"></div>
from the FB like button doesn't cause any harm to the button itself. I can still click on LIKE button and add comments. Also, FB login button works again.
Why is that? Is fb-root div useless for FB like buttons? (Actually, quite a few answers on stackoverflow state the opposite)
How do I make the FB login button work good without having to remove fb-root div from FB like button? Any hints?
Thanks in advance
I don't know if things have changed greatly since the question was asked, but I just had the same problem, and solved it by using the FB.init setting: xfbml:true .
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
status : true,
cookie : true,
xfbml : true // if 'false', Login button won't show.
});
...
};
Hope this helps!
I have this basic HTML page with a Facebook login button. The ID below is the ID of an app I created in my developer portal. When I run this page, it only shows the text “Login with Facebook” and not the actual button. I know it’s not succeeding to initialize the SDK but I can’t tell what is going on. Any ideas?
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '232894623452511',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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 class="fb-login-button">Login with Facebook</div>
</body>
</html>
Your code seems to work. See example of your code running here: http://jsfiddle.net/dmcs/HXRUv/3/
You might want to check your browser plugins. My Chrome is only displaying text, but it has do not track me plugin, Firefox works fine.
I'm currently working with Facebook Comments on a Squarespace.com website. Squarespace gives us the ability to add HTML code blocks, so implementing the code for FB Comments is easy.
The problem is Squarespace displays this code on the Blog Home Page and Category/Tag Pages, as well as the Full Blog Post. I only want the Comments to appear on the Full Blog Post.
I can use the following code to tell Squarespace to look for the Post's PERMALINK and display only when on that page, but the Script no longer works with Facebook's Comments (it used to).
Works:
<script type="text/javascript">
<!--
var docURL = document.URL;
if (docURL == "%PERMALINK%")
{
document.write('<p>This is test text.</p>');
}
-->
</script>
Does Not Work:
<script type="text/javascript">
<!--
var docURL = document.URL;
if (docURL == "%PERMALINK%")
{
document.write('<div id="fb-root"></div>
<sc'+'ript>(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#appId=153773241379548&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</sc'+'ript>
<div class="fb-like" data-href="%PERMALINK%" data-send="false" data-layout="button_count" data-width="200" data-show-faces="false"></div>');
}
-->
</script>
Using the Facebook code, nothing shows up at all.
Thanks for your help!
Try this:
<script type="text/javascript">
document.getElementsByTagName("HTML")[0].setAttribute("xmlns:fb", "http://www.facebook.com/2008/fbml");
</script>
You need to place this before the javascript that loads the facebook stuff.
Since you define where the cross domain document is located you don't have to load into root. Just supply the path info for wherever you place the cross domain file
This question was only relevant to the Squarespace Version 5 system. Since Squarespace Version 6/7, Facebook Comments can now be implemented seamlessly by using the Squarespace Developer Platform.
To display Facebook Comments on a blog post page itself, but not the blog index, you'll want to place the Facebook markup into your blog.item template file and do not place it anywhere else.