Trying to set up a sharing mechanism with FB.ui.
The issue is the share dialog opens a popup instead of it opening in the same page.
The reason I'm trying to avoid the popup is that safari doesn't show the popup in mobile.
<script>
$(document).ready(function()
{
$.ajax(
{
url: '//connect.facebook.net/en_US/sdk.js',
dataType: 'script',
cache: true,
success:function(script, textStatus, jqXHR)
{
FB.init({
appId : 'someID',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
share();
}
});
});
function share() {
FB.ui(
{
method: 'share',
href: 'https://example.com',
quote: 'Some description',
title : 'Title',
hashtag: null,
display: 'iframe'
},
response => {
window.parent.postMessage(
{
earningRule: 'fb_share',
action: 'shared',
response: response
}
);
}
)
}
</script>
Is there any way to either avoid the popup or to address the safari popup blocking issue?
Thanks in advance
The main problem is that you are trying to open the dialog in the callback function of an AJAX request. You must use FB.ui directly on mouse interaction, or it will get blocked by browsers.
If that does not work, you can use sharer.php instead: https://developers.facebook.com/docs/workplace/sharing/share-dialog/?locale=de_DE#sharedialogvialink
Related
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.
Custom text which user enter in popup:
http://monosnap.com/image/koz7B5cQgs2MyYH2Fr0ZDTwm6kPnux.png
Don't show on facebook:
http://monosnap.com/image/vs4rsYk5eCiknJllTSCESQibjh2biT.png
i mean "1111111"
even if i use before share:
FB.login(function(response) {}, {scope: 'publish_actions'});
still havent message
$(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_US/sdk/debug.js', function(){
FB.init({
appId: '856902511027949',
status : true,
cookie : true,
xfbml : true,
oauth : true,
version : 'v2.2'
});
});
$(".init").on('click', function(event) {
event.preventDefault();
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
display: 'popup'
}, function(response){
console.log(response);
});
});
});
code: http://jsbin.com/cahoziteza/2/edit?html,output
example: http://jsbin.com/cahoziteza/2
Update
asked Facebook about this, they said it's a bug
https://developers.facebook.com/bugs/797358463644104/
You can´t add a message, at least not anymore. It would not be useful anyway, because it is not allowed to prefill the message according to the platform policy: https://developers.facebook.com/policy/
2.3: Don't prefill captions, comments, messages, or the user message parameter of posts with content a person didn’t create, even if the person can edit or remove the content before sharing.
hi you need ad this line, this lne add a note in your publication
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
display: 'popup'
quote:'mensagge'
}, function(response){
console.log(response);
});
});
});
I'm writing an application using Sencha Touch 2, it works just fine when accessed from web. The problem came when I built it for iPhone and changed the url from a local url (../services/myservice.php) to a remote url (http://remoteurl.com/services/myservice.php)
I started getting a crossdomain error:
**XMLHttpRequest cannot load http://example.com/services/userRegister.php?_dc=1336972603884. Origin http://localhost is not allowed by Access-Control-Allow-Origin.**
And I'd like to ask you if there is a way to submit a form using jsonp, so I don't have this problem anymore.
Here is my code for the form:
Ext.define('RegistroMovil.view.Register',{
extend: 'Ext.form.Panel',
xtype: 'register',
requires:[
'Ext.form.FieldSet',
'Ext.form.Email'
],
config: {
title: 'Register',
iconCls: 'user',
url: 'http://example.com/proys/congreso/services/userRegister.php',
items: [
...
And the code of the button that submits the form:
{
xtype: 'button',
text: 'Register',
handler: function(){
this.up('register').submit({
success: function(f, a){
alert('Your id: ' + a.id);
f.reset();
}
});
}
},
Thank you very much!
You are getting the above error because of cross-origin resource sharing policy.
On the tap event handler of submit button, you could use an Ext.Ajax.request(); but I feel that would also land up you getting the same error.
E.g
Ext.Ajax.request({
values : paramValues // values from form fields..
url: '.../test.php',
success: function(response) {
console.log(response.responseText);
}
failure: function(response) {
console.log(response.responseText);
}
});
So, it's better to write an Ext.util.JSONP.request() to handle a form submit.
Note that if you are retrieving data from a page that is in a domain
that is NOT the same as the originating domain of the running page,
you must use this class, because of the same origin policy.
E.g
Ext.util.JSONP.request({
params: paramValues // values from form fields..
url: '.../test.php',
callbackKey: 'callback',
scope: 'this',
success: function(response) {
console.log(response.responseText);
}
failure: function(response) {
console.log(response.responseText);
}
});
I am using connect-js (FB.login) to login users to share my page, in standard way. In all normal browsers (chrome, firefox, opera) it pops up a window with permissions request (everything is fine). But in Internet Explorer (7 and 8, didn't test in 6) it pops up window that says: "An error occurred with [myapp]. Please try again later."
This is my code:
<div id="fb-root"></div>
<script language="javascript">
var nombre = "";
var pic_big = "";
FB.init({
appId : '161599150607341', // App ID
channelUrl : '//emocionesverde.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
function conectarse() {
FB.login(handleSessionResponse, {
scope: 'publish_stream, user_about_me'
});
}
function handleSessionResponse(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
//console.log(response.name);
window.nombre = response.name;
getUserPic(response.id);
});
}
}
function getUserPic(uid) {
FB.api('/me?fields=picture&type=large', function(response) {
//console.log(response.picture);
window.pic_big = response.picture;
publicar();
});
}
function publicar() {
FB.ui({
method: 'stream.publish',
message: '',
attachment: {
name: 'Emoción es Verde',
caption: window.nombre + ' midió el impacto de sus acciones verdes. Te invitamos a conocer acciones para mantener el planeta verde con Emoción es Verde',
media: [{
type: 'flash',
swfsrc: 'http://mainteractivetools.com/erik/mifb/emocionesverde/Prueba.swf?pic=' + window.pic_big + '&nombre=' + window.nombre,
imgsrc: 'http://mainteractivetools.com/erik/mifb/emocionesverde/telefonica1.jpg',
expanded_width: '450',
expanded_height: '258'
}],
href: 'http://www.emocionesverde.com'
},
action_links: [{
text: 'Emoción es Verde',
href: 'http://www.emocionesverde.com'
}],
user_message_prompt: 'Escribe un comentario'
}, function (response) {});
}
$('#swfmapsdiv').css('visibility', 'hidden');
</script>
Have you tried adding p3p headers? It's an IE thing and clears up a lot of problems. However cryptic the codes are. What Facebook is essentially trying to do is share cookies across domains, which is a security flag. You need to say it's ok.
The issue could be in channelUrl, try to have the whole path there i.e http://emocionesverde.com/channel.html
Also login into facebook as app developer - the error message will be more detailed
I am using Facebook's Javascript SDK "FB.ui" to pull up an OAuth dialog. Once you click allow, I need to capture the session object, extract the user id and use it further in my script. For some reason I cannot get this working properly, I keep getting undefined, even though the session does exist.
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : '***************',
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.session) {
//do something
} else {
FB.ui({
method: 'oauth',
display: 'page',
scope: 'email',
perms: 'email'
},
function(response) {
alert(response.session.uid); //returns underfined
});
}
});
</script>
To get the userID:
FB.getLoginStatus(function(response) {
alert(response.authResponse.userID);
});
When you login from login button of facebook then it stores cookies in your system that contains your access token that is also unique. That cookies contains your facebook id also.
Check your response. I bet it says something like "display" must be one of "popup", "iframe" or "hidden". Apparently the oauth dialog cannot be called with the default "page" display. And display: 'iframe' requires that you include an access_token, which is why you're calling the oauth dialog in the first place >:l .
I don't think FB.ui can currently be used to get the oauth dialog, unless you want to use a popup, which most everyone has blocked nowadays.
So I got this to work as I would like. This may not be the best way, but after much digging around and frustration I hope this could help somebody with the same question get on the right track.
JS source:
FB.getLoginStatus(function(response) {
if (!response.session) {
//initiate FB OAuth js popup dialog
FB.ui({
method: 'oauth',
display: 'page',
scope: 'email',
perms: 'email'
},
function(response) {
if (response.session) { //if permission Allowed
var thesession = response.session;
var thesession = eval('(' + thesession + ')'); //decode json
//POSTing to local file get.user_graph.php, to fetch user info
$.ajax({
type: "POST",
url: "get.user_graph.php",
data: "client_id=<?php echo $appId; ?>&client_secret=<?php echo $secret; ?>&sessions="+thesession.session_key+"&type=client_cred&uid="+thesession.uid,
dataType: "text",
success: function(user_graph){
var user_graph1 = eval('('+user_graph+')');
alert(user_graph1.name); //users name
alert(user_graph1.id); //users id
alert(user_graph1.email); //users email
alert(user_graph1.link); //users profile link
}
});
} else {
//if permission Not Allowed
}
});
}
});
get.user_graph.php source:
//exchange our session for an access_token
define('POSTURL', 'https://graph.facebook.com/oauth/exchange_sessions');
define('POSTVARS', 'client_id='.$_POST['client_id'].'&client_secret='.$_POST['client_secret'].'&sessions='.$_POST['sessions'].'&type=client_cred');
$curl_token = curl_init(POSTURL);
curl_setopt($curl_token, CURLOPT_POST,1);
curl_setopt($curl_token, CURLOPT_POSTFIELDS,POSTVARS);
curl_setopt($curl_token, CURLOPT_FOLLOWLOCATION,1);
curl_setopt($curl_token, CURLOPT_HEADER,0);
curl_setopt($curl_token, CURLOPT_RETURNTRANSFER,1);
$token = curl_exec($curl_token);
$token_decoded = json_decode($token,true);
//get the user graph (personal info)
$user_graph = file_get_contents("https://graph.facebook.com/".$_POST['uid']."?access_token=".$token_decoded[0]['access_token']);
echo $user_graph;