FB.ui share_open_graph strange dialog behaviour - facebook

I need to implement URL sharing on Facebook via javascript, sharing also a picture.
When the FB sharing dialog appears, it starts shrinking itself and keeps shrinking more and more until it becomes about 20 pixels wide.
And it happens using either the share_open_graph or "share" method.
Also, on the JS console i see this error when the sharing dialog appears:
ErrorUtils caught an error: "<![EX[["Could not find element \"%s\"%s
from module \"%s\"","u_0_18","","__el...".
Subsequent errors won't be logged; see https://fburl.com/debugjs.
This is my code:
<script>
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId: '476337039102253',
version: 'v2.8'
});
FB.getLoginStatus(APP.fbUpdateStatusCallback);
});
});
</script>
<button id="itb" class="btn btn-primary btn-large active_down" name="btn" onclick="
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:url': 'https://example.com',
'og:title': 'page title',
'og:description': 'desc',
'og:image': 'https://savebybooking.s3.amazonaws.com/public/prd/File_341'
}
})
}, function(response){
if (response && !response.error_message) {
console.log('fb sharing OK: '+JSON.stringify(response));
} else {
console.log('Not OK: '+JSON.stringify(response));
}
}); return false;" type="submit">Share</button>
Are you having the same issue? Why is it happening?
I used the "share" method until yesterday without problems, this issue appeared today with no modification to my code.
p.s. I prefer
using share_open_graph
rather than
share
method because the latter won't let you share the specified picture but seems to pick a random image from the url you are sharing.

This is the error inside of the FB dialog, not inside the page launching the dialog. Also it's because you're missing the meta tags on the page you're sharing. Nothing for FB to scrape for your share.

Related

Facebook share button is sharing my login page instead of current page URL, title, etc

I have added facebook share button to my webpage using this code:
<a name='fb_share' border="0">Share</a>
<script type='text/javascript' src='jquery.js'>
</script>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script>
The above code shares the current webpage properly but when I included a session check at the start of the webpage where I redirect the user to the login page if valid session doesn't exist the above code always shares the login page instead of the current page. I am using PHP header function for redirect. Please advice.
To share content from not publicly accessible page use Feed Dialog
i use {} you can uncomment features as needed. Keep in mind all share button features where deprecated for the like / recommend button.
<div id="msg"></div>
<script>
function feedthis() {
var obj = {
method: 'feed',
//to: ''+tobe+''
//link: 'https://developers.facebook.com/docs/reference/dialogs/',
//picture: ''+pic+'',
// name: 'Facebook Dialogs',
//caption: 'Reference Documentation',
//description: ''+msg+''
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>

Load Facebook Sharer in iFrame

I'm just trying to load the facebook sharer page into an iframe which is in a positioned div with no success.
Here is the code I'm using for the iframe,
<iframe src="http://www.facebook.com/sharer.php?u=http://www.website.com&t=Title Hoes Here"></iframe>
When I view the page its blank and the iframe source is
<iframe src="http://www.facebook.com/sharer.php?u=http://www.website.com&t=Title Hoes Here">
<html>
<body></body>
</html>
</iframe>
If I view the url directly, everything appears properly.
Does facebook block loading the sharer in an iFrame? and what are my alternatives to have the facebook sharer appear in a modal window?
Thanks
Yes, Facebook pretty much blocks all loading of screens inside of iFrames.
If you are using Facebook connect there is some simple javascript methods you can execute to get a dialog on your page, and to boot Facebook will take care a lot of the work it takes to make the screen look nice.
See this link ( http://developers.facebook.com/docs/reference/javascript/FB.ui/ ) or use the code below:
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/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.');
}
}
);
If you are not using Facebook connect then really your only option to get that exact screen is to throw a pop-up.
Another option would be to use the like/send button plugin, this isn't quite the same functionality but is easier to integrate. http://developers.facebook.com/docs/plugins/
Cheers!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
The above line in the head.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '',
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>
<script>
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: '',
link: '',
picture: '',
caption: '',
description: '',
message: ''
});
});
});
</script>

FB.ui is giving me Error Message: redirect_uri is not owned by the application

Help please! I'm creating a Facebook tab/app on facebook for a contest, part of the contest is to have a user have the option to share the contest on their wall. This is the error I'm receiving -
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.
This is my facebook auth code:
<div id='fb-root'></div>
<script>
FB.init( {
appId : 219691398094935,
status : true,
cookie : true,
xfbml : true
}
);
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>
<script src='http://connect.facebook.net/en_US/all.js'></script>
This is my FB.ui Code:
<script>
function showStreamPublish() {
FB.ui(
{
method: 'feed',
name: 'I signed up to win an iPad 2 from Upillar.com',
link: 'http://www.facebook.com/pages/udev/121216321302968?sk=app_219691398094935',
picture: 'http://static.upillar.com/fb/images/logo.png',
description: 'I entered the iPad 2 Sweepstakes from Upillar.com which only requires you to create a listing to enter! Enter the contest now by by clicking this link.',
app_id: '219691398094935'
},
function(response) {
if (response && response.post_id) {
$('#main-screen').css('display','none');
$('#step2').css('display','block');
}else{
$('#main-screen').css('display','none');
$('#step2').css('display','block');
}
});}
</script>
This is the information in my app:
Site/App Domain: upillar.com
Site URL: http://fb.upillar.com/contest.php
Page Tab URL: http://fb.upillar.com/contest.php
Secure Tab URL: https://fb.upillar.com/contest.php
Please tell me what am I missing! Thank you so much.
Got same problem - solution is simple, but not even mentioned by Facebook Dev DOCS. Take a look at this:
FB.ui(
{
method: 'feed',
redirect_uri: 'http://www.yourdomain.com', // that caused the problem
message: 'getting educated about Facebook Connect',
name: 'Connect',
caption: 'The Facebook Connect JavaScript SDK',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
link: 'http://www.yourdomain.com',
picture: 'http://www.yourdomain.com/f8.jpg',
actions: [{
name: 'yourdomain',
link: 'http://www.yourdomain.com'
}],
user_message_prompt: 'Share your thoughts about RELL'
},
function (response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
site URL should not be a file, try to set this as your domain only, without contest.php
if that does not work, set the canvas URL as your domain, with "/" at the end too.
Sorry to bump an old post, first I should say i'm relatively new to facebook development but i've been getting the same problem, basically it seems like facebook does some fairly nifty detection in terms of what qualifies as a redirect when you land on your page.
For example I was detecting if it was a new user and then displaying a colorbox, whose onclick event redirected to a newuser creation form. That gave me error 191 redirect_uri not owned. It seems because the javascript was in the <HEAD> element it qualified as a redirect.
I simply changed the login process to fully render the main page and display a normal div telling them to click here to login.
Sorry for grave-digging!
I just had the same problem and found the solution. You do not have to change anything on your sources.
Just head over to http://developers.facebook.com open your app and navigate to "Settings" and "Basic".
There is a textfield that says "App Domains" - enter the domain name where the app is currently hosted at there, save the settings and you are done.

Facebook share button code snippet

Does anyone know how to create facebook share button? I need it to be the horizontal version at about 15-20 pixels high. They seem to have dropped any documentation in favour of the like button but I would like both. I can only seem to find wordpress plugins but i simply need the code snippet.
Any help would be appreciated... thankyou
Glynn
Roco Clothing
if you want to do it using javascript sdk :
window.fbAsyncInit = function () {
FB.init({ appId: appId, 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);
} ());
$("#Pst").click(function shareWithFacebook() {
FB.ui({ method: 'stream.publish',
message: 'message',
user_message_prompt: 'message',
attachment: {
name: 'message',
caption: 'message',
description: ('message'),
href: 'http://www.destination360.com/europe/sweden/images/s/sweden-visby.jpg',
media: [{ 'type': 'image', 'src': 'http://www.destination360.com/europe/sweden/images/s/sweden-visby.jpg', 'href': 'http://www.destination360.com/europe/sweden/images/s/sweden-visby.jpg'}]
},
action_links: [{ text: ' Name ', href: 'http://www.destination360.com/europe/sweden/images/s/sweden-visby.jpg'}]
},
function (response) {
if (response && response.post_id) {
// Do some custom action after the user successfully
// posts this to their wall
alert('Thanks for sharing!');
}
}
);
return false;
});
<div id="fb-root">
</div>
<a href="#" id="Pst" onclick="return shareWithFacebook();" >
Share
</a>
if you want to do it using plugin and would you please mark it as answered :) :
http://developers.facebook.com/docs/reference/plugins/like/
you will find the code like that :
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=137344766349901&xfbml=1"></script><fb:like href="www.eslamsoliman.uk.cm" send="true" width="450" show_faces="true" font=""></fb:like>
change your link :)
The Share button is deprecated although still functional.
The current recommended way to implement sharing from a website is via the Like button or Send button (which is also usually paired with the Like button but works standalone).
If you must use the old share button for some reason, the documentation is no longer available on the Developer site, but there's a third party example here: http://www.wpcode.net/add-share-button.html/ (it should work on any site, not just Wordpress blogs)

Facebook iFrame app - displaying FB:ui depending on whether a user is logged in or not?

I'm creating an iFrame app on Facebook which is basically just a Mailing List sign up page. However, when people click Sign Up, the FB:ui "Post To Your Wall" pops up and gives the user the option to share what they have just signed up for if they want to. It works fine.
However, I want to find a way to display the FB:ui ONLY to users who are logged into Facebook. My app shouldn't require any permission from users as it is simply a landing page that gives people an option to share if they want to. There's never any automatic sharing done.
I'm using the below code currently:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'my app id', cookie:true,
status:true, xfbml:true
});
FB.getLoginStatus(function(response) {
if(response.session) {
sharethisnow();
} else {
// no user session available, someone you dont know
if(response.status == "notConnected") {
// But user is logged into facebook
sharethisnow();
} else {
// User is not logged into facebook
}
}
});
function sharethisnow() {
FB.ui({ method: 'feed',
link: 'my link',
name: 'my page name',
caption: 'my caption',
description: 'my decription',
picture: 'my picture',
message: 'my message'});
}
</script>
As you can see, I'm attempting to run the FB:ui (sharethisnow function) only to users who are either logged into Facebook AND my app, or logged into Facebook only. But for some reason the code above is only working for page-admins. When I log in as an admin, I sign up and the FB:ui pops up as it should do. However, when I view the page as a non-admin (just a general logged in Facebook user), the FB:ui pops up but says that there is an error and to "please try again later".
It's working fine for me, maybe check the Page settings (private/public). Also try this simpler code first:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'APP_ID', cookie:true,
status:true, xfbml:true
});
FB.getLoginStatus(function(response) {
if(response.status == "unknown") {
return;
}
sharethisnow();
});
function sharethisnow() {
FB.ui({
method: 'feed',
message: 'my message'
});
}
</script>