I tried the following code for facebook share
<p>
<a rel="nofollow" target="_blank" class=" icon_facebook ">Share</a>
</p>
jQuery(document).ready(function($) {
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.5'
});
};
//load the JavaScript SDK
(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'));
jQuery('.icon_facebook').click(
function(){
FB.ui(
{
method: 'share',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
)
});
}
);
then it showing error .
Given URL is not allowed by the Application configuration: One or more
of the given URLs is not allowed by the App's settings. It must match
the Website URL or Canvas URL, or the domain must be a subdomain of
one of the App's domains.
And the share url in both facebook all ready logined and logout condition is like https://www.facebook.com/v2.5/dialog/share?app_id=MY APP ID ,.....
But in other websites the working share page url format is different . When not login then it shows like
https://www.facebook.com/login.php?skip_api_login=1&api_key=..
when some one already login to the faccebook it shows like https://www.facebook.com/v2.3/dialog/share?redirect_uri=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Freturn%2Fclose&display=popup&href=
Why my facebook share url is different ? is am missing any code part ?
Is there any mistake in my code ? please help .
From the comments:
Make sure you have the correct appId in FB init; and
The shared URL must be listed in the App Domains input under App Settings on your Dveloper console in Facebook.
Related
Is there a parameter to change the bold black text (text "Google" in the example below) in Facebook's sharing dialog? If yes, which one?
My code:
window.fbAsyncInit = function() {
var locationArray = window.location.href.split("/");
FB.init({
channelUrl: locationArray[0] + '//' + locationArray[2] + '/channel.php', //custom channel
xfbml : true,
version : 'v2.6'
});
}
function test(){
alert("test");
FB.ui(
{
method: 'share',
name: 'Sharing Test Name',
caption: 'Sharing Test Caption',
//picture: 'http://4.bp.blogspot.com/-8BR3- K0b_lI/VlZ6b3WCM5I/AAAAAAAARmA/ATbes06U8oU/s1600/mustache-smiley.jpg',
description: "Post to test the sharing funtion available via Facebook's js sdk",
href: 'https://google.de',
},
// callback
function(response) {
if (response && !response.error_message) {
alert('Posting completed.');
} else {
alert('Error while posting.');
}
}
);
}
<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/de_DE/sdk.js#xfbml=1&appId={{ fbAppId }}&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div onclick="test()">share</div>
Research didn't return anything for me (Facebook's docs, here, Google). Is Facebook not allowing to change that part of the dialog text?
There used to be parameters to control this, I may be mistaken however currently I think the only way to do this is using the Open Graph meta tags.
I want to get URL of users who share from my links, I have got the post_id but when I try to get full post URL, facebook asking for my access token, can I have the access token after users share?
This is my Code [UPDATED]:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPPID',
xfbml : true,
status : true,
cookie : true,
version : 'v2.3'
});
};
(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#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
function shareonfacebook(){
FB.ui(
{
method: 'feed',
name: 'Example',
link: 'https://www.example.com',
picture: 'Example.jpg',
caption: 'Example',
description: 'Example',
},
function (response) {
if (response && response.post_id) {
alert('Thanks!');
console.log( response );
} else {
alert('Oops!');
}
}
);
};
</script>
The post ID will only be there if you authorize a user with the publish_actions permission:
Only available if the user is logged into your app using Facebook and
has granted publish_actions. If present, this is the ID of the
published Open Graph story.
Side Note: If you need help with the Login part, here's an article about that: http://www.devils-heaven.com/facebook-javascript-sdk-login/
I was just about to test something so I made 2 buttons with 2 links:
1.) using the facebook sharer.php functionality which works fine
2.) triggering the send ui using the URL redirect I took from the FB developers homepage:
http://www.facebook.com/dialog/send?app_id=123050457758183&link=http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html&redirect_uri=https://www.bancsabadell.com/cs/Satellite/SabAtl/
I replaced the app id and both links with my own. My app is set up so it point to the links, since I know I had it running once before, where that was the problem.
Now as said the share button works perfectly fine but when I click one the other button I just see a white screen. The URL is in the address bar. Firebug shows no console errors and an empty head and body tag.
Any suggestions?
Thanks,
Gerd
UPDATE: I also implemented the regular javascript ui.send method. The window popsup. I am connected with facebook as the ssl seal shows but again nothing but white.
As far as the URL is concerned the URL is fine it is just a matter of time until Facebook allows to share a URL it has not indexed before. When I changed the link to my main domain instead of subfolder it worked.
As far as the JS SDK is concerned I forgot to check whether the user is logged in or not so this is how it works:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YourId',
xfbml : true,
version : 'v2.0'
});
};
(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>
<button onclick="sendFb()">Recommend JS</button>
<script type="text/javascript">
function sendFb(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.ui({
method: 'send',
link: 'yourlink.com',
});
}
else {
FB.login(function(response) {
if (response.authResponse) {
FB.ui({
method: 'send',
link: 'yourlink.com',
});
}
else
alert('Not Authenticated!');
});
}
});
}
</script>
</body>
</html>
I have been struggling to get a facebook "post to wall" dialogue to show on my site but all it shows is code on that page.
Here is what should happen:
A visitor comes to my site and clicks a custom "Share" button I made
The visitor is then redirected them to the feed dialogue box on a different page and they share my page.
They then proceed to download what I offered.
I made a facebook app and then copied the code from the facebook developer page and filled out everything I need, but anytime I click the share it takes me to a page with all the code instead.
Well try this, load the javascript SDK:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : 'URL_TO_CHANNEL_FILE', // Channel File optional
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
Then add a listener to your button, let's say your button has the id, bt-download
<script>
$(document).on("click", "#bt-download", function(){
var obj = {
method: 'feed',
link: 'link to your webpage',
picture: "url to the picture you want size 90px x 90px",
name: 'the name you want',
caption: 'your caption',
description: 'your description',
display: 'popup'
};
function callback(response) {
if (response && response.post_id) {
alert('Post was published.');
//here you can redirect the user to the download page
} else {
alert('Post was not published.');
}
}
FB.ui(obj, callback);
});
</script>
I am currently writing a website and I need some help about facebook integration.
I need a function (PHP or JS, both will help) that can check if a given user shared my website,
and I couldn’t find out how to write one.
Could you please point me at the right direction?
First you have to load the Facebook SDK right after your tag:
<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 : false, // parse XFBML
perms : 'read_stream',
access_token : "USER ACCESS TOkEN",
frictionlessRequests : true
});
};
// Load the SDK Asynchronously
(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/pt_BR/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then you can use the callback function to do what you want:
<script type="text/javascript">
function shareOnFacebook() {
FB.ui(
{
method : 'feed',
display : 'iframe',
name : 'name',
link : 'http://www.linktoshare.com',
picture : 'http://www.linktoshare.com/images/imagethumbnail.png',
caption : 'txt caption',
description : 'txt description',
access_token : 'user access token'
},
function(response) {
if (response && response.post_id) {
// HERE YOU CAN DO WHAT YOU NEED
alert('OK! User has published on Facebook.');
} else {
//alert('Post was not published.');
}
}
);
}
</script>
Then you should use it like this:
Share on facebook
Using the JavaScript SDK, FB.ui() and the feed dialog, you can prompt your users to share a URL on Facebook. This dialog provides a callback function so that you can tell if the post was made successfully.
Code sample lifted from the above link...
var obj = {
method: 'feed',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
This is the easiest way to accomplish what you need.
It will not, however, allow you to test if someone shared your website's URL outside of your feed dialog.
A more complex alternative not requiring the dialog callback could be accomplished by utilizing the read_stream permission. Once you have that permission, you can scan the users past posts to see if he has ever shared your website on his wall...
Keep in mind that this will not work if the user shared your website on some one else's wall or on a page...