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>
Related
i have a problem with posting the messenger plugin on the website.
I generate code using the Facebook function in the menu Settings-> Messenger Platform on the company profile.
I added the domain of my website to 'White List'.
The following code is generated, which we place immediately after opening the < BODY > tag in the HTML code of the site:
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.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 = 'https://connect.facebook.net/pl_PL/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="267615313329074"
logged_in_greeting="My message"
logged_out_greeting="My message">
</div>
An error appears in the console:
##########################
# The CustomerChat plugin is no longer part of the main Facebook SDK.
# To continue using it please use the correct SDK URL,
# meaning replace sdk.js with sdk/xfbml.customerchat.js.
# For more details see https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk
##########################
The link seems to have the form that they recommend on https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk
Does anyone know how to improve the code pasted on the website?
i am starting a website which provides ayurvedic home made solutions to treat the diseases on which i have different pages with different home based remedies.
i have a piece of code which has a button of "this tip was helpful for me" which opens admin fb messenger where user can send direct message to fb page / web page admin..so i want to load a default message when the facebook messenger opens which says "thanks for this tip and it was really helpful for me " along with "current page url " and then user needs only to click send button without writing anything and it directly goes to admin messenger.
here is the code
<html>
<head>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '95100348886',
xfbml : true,
version : 'v2.6'
});
};
(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>
</head>
<body>
<div class="fb-messengermessageus"
messenger_app_id="95100348886"
page_id="xyz"
color="blue"
size="large">
</div>
<a href="https://m.me/xyz">
Message us on Facebook
</a>
</body>
</html>
replace xyz with facebook page name .
thanks in advance ..
TLDR:- JS amateur here. Call to Graph API, FB.INIT() did not work from my local machine. But worked from my Github static website. Why?
Detail:
I am learning (or trying to learn) web app development on my own, after going thru some tutorials thought of creating webpage with JS which calls FB graph API.
Copied FB provided code to load SDK and logic to show like buttons.
Nothing happened when i opened HTML thru browser, but when I pushed it on GitHub it worked! Not sure why?
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxx',
xfbml : true,
version : 'v2.6'
});
};
(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>
-----------------------------------------
**Code to show like/share buttons:-**
<div
class="fb-like"
data-share="true"
data-width="45"
data-show-faces="true">
</div>
_____________________________________-
Thank you for taking time reading thru this.
It is because the url that you have specified for you Facebook app as callback url is that of github. You can change it for a while and test and see, it will work for "localhost" but not for "127.0.0.1".
Or you can create two apps.
I cut and paste the code generated by FB into my app as directed.
</head>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MyId',
xfbml : true,
version : 'v2.5'
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-share-button" data-href={{webAddress}} data-layout="button_count"></div>
<div class="fb-comments" data-href={{webAddress}} data-numposts="10"></div>
I tried putting the JS in the head as well as in different parts of my index.html but the share button and comments would appear without an additional refresh.
I had a similar problem with my LinkedIn button not showing up until after a refresh and I switched
<script src="https://platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
to
<script>
delete IN;
$.getScript("https://platform.linkedin.com/in.js")
</script>
and the problem is solved. Would a similar thing work for FB? If so how do I implement it?
I looked at this post, http://stackoverflow.com/questions/29133563/facebook-social-plug-in-not-showing-up-when-added-dynamically
focused on FB.XFBML.parse() but given the info on
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
I don't know how to implement it and I don't think it's what will fix my problem because no information is coming from my server.
The code generated from the Twitter and FB share buttons belongs in the index.js file at the top of the <body> in an Angular Fullstack application. Then in the appropriate controller.js file put:
angular.element(document).ready(function() {
twttr.widgets.load();
FB.XFBML.parse();
});
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!