I am making an app and i want to have the facebook "Like" button in the bottom of a page.
Is it even possible? I have played around with different things and this is what i have right now.
var win = Ti.UI.currentWindow;
win.showNavBar(); // Force the navbar to show
var bgImage = Ti.UI.createImageView({
height : 'auto',
top : -11,
image : 'images/h-4.jpg',
zIndex : 0
});
win.add(bgImage);
var ticksterImage = Ti.UI.createImageView({
height : 'auto',
top : 1,
image : 'images/takida.png',
zIndex : 0
});
win.add(ticksterImage);
var facelike = Ti.UI.createWebView({
html: '<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ftakidamusic&send=false&layout=standard&width=320&show_faces=true&action=like&colorscheme=dark&font&height=80&appId=368268836546636" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:320px; height:80px;" allowTransparency="true"></iframe>',
height: '80dp',
bottom: 1,
});
win.add(facelike);
Am i going about this wrong? Should i have HTML5 or XFBML instead of iframe? I have tried all three but with no result.
I just get: Error loading app://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ftakidamusic&send=false&layout=standard&width=320&show_faces=true&action=like&colorscheme=dark&font&height=80&appId=234826439948817
Is it another way of doing this?
Thanx
//R
— asked 6 hours ago by Rickard Harrysson
I'd recommend not using a webview for it - try using the Ti.Facebook module. That will give you a lot more flexability in allowing the user to login to Facebook via Titanium. See the KitchenSink for examples.
https://github.com/appcelerator/titanium_mobile/blob/master/demos/KitchenSink/Resources/examples/facebook.js
If you must use a website, the html must be a full webpage, not just the iframe. It should start with <html><head/><body>. I recommend creating a webpage outside of Titanium that works, then plug the html of that page in the html property.
Related
Found several similar questions, but not the answer to this specific one..
Is there a way to add a title to BOTH the top and bottom of a FancyBox2 modal/popup?
I know how to position the title to the top or bottom. But need to put a title on the top and a caption on the bottom.
Thanks to all in advance..
You can modify the default fancybox template to add some extra HTML in. Like so:
Your HTML:
Click
Javascript:
$(".fancybox").fancybox({
type: 'iframe',
beforeLoad: function() {
var caption = this.element.attr('data-caption');
this.tpl.wrap = '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><p>'+caption+'</p></div></div></div>'
},
helpers: {
title : {
type : 'inside',
position: 'top'
}
}
});
I've used an iFrame as an example, but this should work for any Fancybox type.
JS Fiddle here:
http://jsfiddle.net/WillDonohoe/thy0om73/
Look under the tpl section of the fancybox docs for more information: http://fancyapps.com/fancybox/#docs
I found this script online that add a pin it button to fancybox v2. Here is the working example:
http://scottgale.com/blogsamples/fancybox-pinterest/index.html
Im working on a site on the Hubspot CMS. For those who are familiar, Fancybox 1.3.4 comes included with Hubspot. And you really don't get editing access to any of the files or scripts associated with it.
The Fancybox works as a gallery module (or widget) so users can just upload images.
I was wondering if there is a way to modify this original script to work with how fancybox 1 is implemented on my site.
Here is my page:
http://www.signdealz.com/gallery-test/
Here is the script:
<script type="text/javascript">
//NOTE: this uses fancybox 2
$(document).ready(function() {
$('.fancybox').fancybox({
//set the next and previous effects so that they make sense
//the elastic method is confusing to the user
nextEffect: 'fade',
prevEffect: 'fade',
//set the position of the title
helpers : {
title: {
// title position options:
// 'float', 'inside', 'outside' or 'over'
type: 'inside'
}
},
beforeShow: function () {
//if you already have titles
//on your fancybox you can append
if(this.title) {
//set description to current title
//this will set what posts
var description = this.title;
//add pinterest button for title
this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media='+
//put the path to the image you want to share here
encodeURIComponent('http://scottgale.com/blogsamples/fancybox-pinterest/'+this.href)+
'&description='+description+'" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>'
//add title information
+'<span>'+this.title+'</span>';
//if you don't already have titles
//you can just make the title the pinterest button
} else {
//add pinterest button for title
this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media=http%3A%2F%2Fwww.homesburlingtonvermont.com'+
encodeURIComponent(this.href)+
'&description=Pin from ScottGale.com" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
}
}
});
});
</script>
Any help is greatly appreciated!
This is an example of how to add the Pinterest button to your fancybox's (v1.3.4) title using the options titlePosition and titleFormat. If your anchor has a title then it will be displayed along the button, otherwise the button will be displayed alone.
This script is based on the script your found for v2.x but tweaking to options for v1.3.4.
$(".fancybox").fancybox({
"titlePosition": "inside",
"titleFormat": function () {
return this.title ?
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media='+
encodeURIComponent('http://scottgale.com/blogsamples/fancybox-pinterest/'+this.href)+
'&description='+this.title+'" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>'+
'<span>'+this.title+'</span></div>'
:
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media=http%3A%2F%2Fwww.homesburlingtonvermont.com'+
encodeURIComponent(this.href)+
'&description=Pin from ScottGale.com" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>'+
'<span> </span></div>'
}
});
See JSFIDDLE
NOTE : this is for fancybox v1.3.4
EDIT (Jan 30, 2014) :
New JSFIDDLE using CDN for fancybox files to avoid possible 403 forbidden errors while serving the files from fancybox.net server.
I eventually want to create a photo gallery... clicking on a picture will launch a You Tube video. I am using fancybox 2.0.
I have the video opening up inline but I cannot control its dimensions. Could you please take a look at this page for me and see where I am fouling up.
http://www.bytebrothers.com/bb_tester/Video_lightbox_test.htm
Thank you,
darrell#bytebrothers.com
This is how your script looks like right now
$(document).ready(function() {
$('.fancyYouTube').fancybox({
width : 400,
height : 300,
autoSize : false,
type : 'swf'
})
and this is how it should look like
$(document).ready(function() {
$('.fancyYouTube').fancybox({
width : 400,
height : 300,
autoSize : false
});
});
you are missing some closing brackets.
On the other hand, if you are using fancybox-media, you don't need to specify type:'swf'
UPDATE: when targeting youtube videos in embed (youtube iframe mode) mode, add the class fancybox.iframe to your anchor so this
<a class="fancyYouTube" href="http://www.youtube.com/embed/dx6TZgUSquY">
should be this
<a class="fancyYouTube fancybox.iframe" href="http://www.youtube.com/embed/dx6TZgUSquY">
I have a jQuery Mobile app that I've converted to an iOS app using PhoneGap. I'm using version 1.1.0 of jQM.
I'm using "fade" transitions between pages (as I read they were less demanding).
When initially running the PhoneGap version of the app in the iPhone Simulator I was getting a flicker/flash after every page transition - as if the page was being displayed, cleared and then redisplay - all with a fraction of a second. Some thing happened when I ran it on the device.
I applied the advice in Sarah-Jane's answer to a similar question.
This fixed the problem in the simulator, but not on the actual device.
Has anyone experienced this problem, and found a solution?
This guy solved the problem - it worked for me:
http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/
CSS:
body {
/* Setting body margins to 0 to have proper positioning of #container div */
margin: 0;
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
position: absolute;
width: 100%;
height: 100%;
}
JS:
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
And wrap all your jQM pages in a single <div id="container">
Fade transition blinks mostly you should change it to slide or some other transition mode.
That might help
<meta name="viewport" content="width=device-width, user-scalable=no" />
use following code
$(document).ready(function()
{
$.mobile.defaultPageTransition = "none"
$.mobile.defaultDialogTransition = 'none';
$.mobile.useFastClick = true;
$.mobile.touchOverflowEnabled = true;
});
For performance purposes, I'm looking for a way to lazy load the fan page feed from facebook to my site.
As this feed is visible after user interaction (click), I was wondering if , rather than implementing the
<fb:fan profile_id="XXXXXX" href="http://www.facebook.com/XXXX.XXX" width="292" show_faces="0" stream="true" height="390px" header="false" css="XXX"></fb:fan>
tag in my markup (while being invisible ti the user), I could by any means request the facebook servers to build the iframe and it's content on demand ?
If you can use an iframe instead of XFBML, do this using jQuery (jsFiddle):
$(document).ready(function()
{
$('#container_for_fb_box').append($('<iframe>')
.attr({
'src': "http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=false&stream=true&header=false&height=395",
'scrolling': 'no',
'allowTransparency': 'true'
})
.css({
'border':'none',
'overflow': 'hidden',
'width': '292px',
'height': '395px'
})
);
});
An example setting the title with the URL instead of the src so that jquery can dynamically set the the src with the required URL to load the iframe.
//Trying to load the URL dynamically did not work for me
//hence using the title as a workaround
<iframe id="facebookFrame" title="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%xxxxxx%xxxxxx&width=300&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=590" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 300px; height: 590px;"></iframe>
//on click
$("#yourButton").click(function(event) {
$("#facebookFrame").attr("src", $("#facebookFrame").attr("title"));
$("#facebookFrame").removeAttr("title");
});
//using a timer to load the iframe after 2 seconds
window.setTimeout(function() {
$("#facebookFrame").attr("src", $("#facebookFrame").attr("title"));
$("#facebookFrame").removeAttr("title");
}, 2000);
//on user scroll
$(window).bind("scroll", function(event) {
$("#facebookFrame").attr("src", $("#facebookFrame").attr("title"));
$("#facebookFrame").removeAttr("title");
});