I have created an application for Facebook, but I want show all content in a dialog box like Facebook style. How? like this http://www.bigthink.it/wp-content/uploads/2010/06/fb-dialog-box.jpg
Your question is not clear. What content do you want to show? What type of dialog? Do you have any code that you can share?
If you just want to wrap some content in a fb-like dialog, then you can use the javascript sdk method FB.Dialog.create, it's not officially documented (as far as I'm aware), but it works.
Here's an example of use:
var fbDialog = null,
html = '<img src="http://www.bigthink.it/wp-content/uploads/2010/06/fb-dialog-box.jpg"/>',
params = {
display: "iframe",
content: html,
loader: true,
closeIcon: true,
visible: true,
onClose: function() {
FB.Dialog.remove(fbDialog);
}
}
fbDialog = FB.Dialog.create(params);
Related
I am looking at the latest update to Facebook's share button.
It seems that it's no longer possible to include a share button in a website without including the Facebook javascript SDK, or having a Facebook app somewhere that provides you with an app id?
Share button example 1 uses the Facebook SDK
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){});
Share button example 2 uses a custom app id
https://www.facebook.com/dialog/share?
app_id=145634995501895
&display=popup
&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
Question: how to build a plain and simple share button for Facebook with one line of code, that does not require libraries and app id's?
you can use facebook sharer link and a simple popup to do the job
$("#facebookShareLink").on("click",function(){
var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=http://stackoverflow.com", "pop", "width=600, height=400, scrollbars=no");
return false;
});
It is possible. No need for an FB application for a simple sharing of URL. Create a simple pop up window and use Facebook share dialog.
https://developers.facebook.com/docs/sharing/reference/share-dialog
This is still included in their API as of the moment.
window.open("https://www.facebook.com/sharer/sharer.php?u=http://www.gmanetwork.com/news/", "pop", "width=600, height=400, scrollbars=no");
Create function who will center the pop-up every time.
function openURLInPopup(url, width, height, name) {
if (typeof(width) == "undefined") {
width = 800;
height = 600;
}
if (typeof(height) == "undefined") {
height = 600;
}
popup(url, name || 'window' + Math.floor(Math.random() * 10000 + 1), width, height, 'menubar=0,location=0,toolbar=0,status=0,scrollbars=1');
}
Then your link should look like this
For Twitter:
<a class="btn_twitter" onclick="openURLInPopup('http://twitter.com/home?status=http://www.domain.ro/url.html',600, 400); return false;" href="#" target="_blank">Twitter</a>
For facebook:
<a class="btn_fb" onclick="openURLInPopup('http://www.facebook.com/sharer.php?u=http://www.domain.ro/url.html',600, 400); return false;" href="#" target="_blank">Facebook</a>
For Google
<a class="btn_gplus" onclick="openURLInPopup('https://plus.google.com/share?url=http://www.domain.ro/url.html',600, 400); return false;" href="#">gplus</a>
If you want to add your own (possibly dynamic) text, you can add the quote parameter to the link:
https://www.facebook.com/share.php?u=example.com"e=YOUR+TEXT+HERE
Am using Liferay 6.2 and trying to get a external page in a pop up.
Am using the following code
function ShowPopup(){
AUI().ready(function(A) {
AUI().use('aui-dialog', 'aui-io', function(A) {
var url1 = '/myportlet/myview.jsp';
// var url1 = 'www.google.com';
Liferay.Util.openWindow(
{
dialog: {
cache: false,
width: 800,
height: 700,
modal: true
},
id:'myview',
uri: url1
}
);
Liferay.provide(
window,
'closePopup',
function(popupIdToClose) {
var dialog = Liferay.Util.getWindow(popupIdToClose);
dialog.destroy(); // You can try toggle/hide whatever You want
},
['aui-base','aui-dialog','aui-dialog-iframe']
);
});
});
If I provide the first var url1('/myportlet/myview.jsp'), the popup displays properly, as it is internal link, But if I provide the second var url1('www.google.com'). The localhost url is prepended for the URI(like http://localhost:8080/www.google.com), so it is not able to display the external link in pop up.
How can i make the external url display in the popup.
If your target has different domain, you should use absolute URL including protocol - http://www.google.com.
Anyway, I think it may be hard to embed google as recently there is new trend for securing sites against iframing (and I think google has introduced these improvements). More details here How to show google.com in an iframe?.
I am needing to send a tweet for from my iphone/ipad app using Appcelerator Titanium & javascript. I found the following example on github (code also posted below for this):
https://gist.github.com/2eabc31db388144b3abc
I have created my app details (key,secret etc) in my twitter developer account and using the code from the example i get the twitter login and authorisation popup but once you click authorise, all i get is a webview showing the callback url (that i was required to put in the twitter app settings). So the app is stuck on a webview showing the callback url but does nothing after. If i close the popup window it just goes back to my app without sending a tweet.
Can anyone help?
code in app.js:
var win = Ti.UI.createWindow({ backgroundColor: '#fff' });
var shareButton = Ti.UI.createButton({
width: 90, bottom: 10, height: 30,
title: 'Tweet!"'
});
win.add(shareButton);
win.open();
var social = require('social');
var twitter = social.create({
site: 'Twitter',
consumerKey: 'XXXXXXXXXXXXXXXX',
consumerSecret: 'XXXXXXXXXXXXXXXXXXXXX'
});
shareButton.addEventListener('click', function() {
twitter.share({
message: 'Hello, world!',
success: function() {
alert('Tweeted!');
},
error: function(error) {
alert('Oh no! ' + error);
}
});
});
As Aaron answered on the Q&A, when using Social.js, you should not use a callback URL. The code itself will watch the web view for what it needs.
I have a feed post JS as follows.
var feedObj = {
method: 'feed',
link: link,
picture: imagelink,
name: name,
caption: caption,
description: description,
redirect_uri: "http://"+(window.location.host)+"/",
next:null,
app_id: appid,
actions: [
{ name: text, link: link }
]
};
function callback(response) {
if(response){
}
}
facebook.ui(feedObj, callback);
How do I make sure the feed dialog that clicked to post closes automatically?
I have noticed that the callback is not fired always and this attempt below does not work always
function callback(response) {
if(response){
facebook.Dialog.remove(facebook.Dialog._active);
}
}
I have got a simple trick to close this dialog box. It is not a good way to do this type of work but it just worked fine for me.
Firstly you have to create a page on your server (e.g. closewindow.aspx) and paste this code in your page's body part.
<script src="js/jquery.js" type="text/javascript"></script>
<script>
$().ready(function() { window.close(); });
</script>
Than set redirect_uri parameter property to this page, like :
redirect_uri=http://www.yousitename.com/closewindow.aspx
Now this time in dialog box, this page will be called as redirecturl and the dialog will be closed automatically on page load.
I know this may be tricky but you know how it feels when got this working.
According to the documentation, next is not a parameter.
I understood that with redirect_uri callback is not being called.
Since redirect_uri is supported by most sdks you need not use it.
DEMO
Hope this helps
I'm totally confused about Facebook's dialog feed, sharer and like buttons (I'm a noob to Facebook and its jargon)
On my website, I would like the following
to have a button at the top of the page where people can share my site to their wall
to have a button on the the page where users can share their main homepage on my site to their wall
to have a button where users can share individual items of theirs (events) to their wall
I've read the sharer button is being phased out in preference to the Like button but I see a problem with the Like button. I think something can only be liked once. A user's event might want to be shared several times (to remind their Fb users of the event)
I've seen the BBC use the dialog feed button to post items to a wall and that looks okay but I couldn't get the popup to work.
my requirements are to have different links for each of the three scenarios I've mentioned, with a different description for each scenario but sharing my site's logo.
I've read so much that I'm now totally confused plus all the APIs that Fb has. It's just crazy (or that's how it seems to me)
If someone could help clear the fog with sound recommendations and some sample code for each button, I would be very grateful.
Thank you.
.
For what your talking about you would want to use the feed dialog. It's flexible enough that you just need to setup your links and pass in some variables. I don't see the feed dialog being phased out as you mentioned they serve different purposes. I think they push the like as it's easier to use and not as likely to be abused.
You'll need to register an application and make sure to initialize the Facebook javascript SDK before you call the below function. If you're having issues with your popup it's probably due to the fact your FB init process is having issues. I've added a second function I use to init Facebook. Both functions use jQuery so you might have to modify if you don't use it.
You can create a pretty generic function like this:
$.shareMe = function(myName, myLink, myPicture, myCaption ) {
FB.ui(
{
method: 'feed',
name: myName,
link: myLink,
picture: myPicture,
caption: myCaption
},
function(response) {
if (response && response.post_id) {
alert('Thanks for Sharing.');
} else {
alert('Post was not published.');
}
}
);
}
and for Facebook initialization:
$.initFacebook = function(options){
$('#fb-root').remove();
$('body').append('<div id="fb-root"></div>');
var settings = {
'appId' : null,
'callback' : null,
'channelUrl' : null,
'status' : true,
'cookie' : true,
'xfbml' : true
};
if ( options ) {
$.extend( settings, options );
}
if( typeof( xc_app_id ) == 'undefined' ) { window.xc_app_id = settings.appId; }
window.fbAsyncInit = function() {
if(settings.channelUrl==null) {
FB.init({appId: settings.appId, status: settings.status, cookie: settings.cookie, xfbml: settings.xfbml, oauth: true, authResponse: true });
} else {
settings.channelUrl=location.protocol+'//'+settings.channelUrl;
FB.init({appId: settings.appId, status: settings.status, cookie: settings.cookie, xfbml: settings.xfbml, oauth: true, authResponse: true, channelUrl: settings.channelUrl });
}
if(typeof settings.callback == 'function'){ settings.callback.call(this); }
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
}
and to call it you just use $.initFacebook({appId,'yourAppId'}); There are other options there you can lookup in the docs if you need them.