I'm trying to get a video (flv) or an swf video player to work on Facebook walls, however no matter what I do - facebook posts the raw fbml and ignores the code. What am I doing wrong?
<fb:swf
swfsrc='http://www.domain.com/flv_player/Main.swf'
imgsrc='http://www.domain.com/large1.jpg'
allowscriptaccess=”all”
flashvars='config=http://www.domain.com/playerConfigEmbed/2179.xml'
width="384" height="283" />
I've also tried fb:flv
<fb:flv src='http://www.domain.com/files/file.flv' width='400' height='300' title='my movie' color='#FFBB00' salign='r' img='http://www.domain.com/thumbs/large1.jpg' scale='showall'/>
You can easily do this with Open Graph meta tags. I've written a short tutorial on how to do it right here: http://ahrengot.com/tutorials/custom-video-player-on-facebook/
This method will also allow you to have HTML5 fallback for iphones, which will even work in the Facebook iPhone app - My example is set up with HTML5 fallback that shows that functionality as well.
try that one:
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://vimeo.com/moogaloop.swf?clip_id=12941088&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1&autoplay=0&loop=0'
imgsrc='http://lojke.pl/PapayaLearn/video_link.png'
width='400' height='302'>
Insure yourself of placing the label
<Fb:fbjs-bridge />
Before creating your <fb:swf />
This will serve you to create a bridge to communicate with the Flash.
Then:
<Fb:swf
Swfsrc ='http: // your domain/yourflash.swf '
Width = '550' height = '400' align ='center ' />
If these working with free Hosting the most probable thing is that Facebook prevents that your SWF is visualized.
Related
I have an image gallery, the images are large enough to fill an iPhone screen.
The images are also links, so as you can imagine, scrolling becomes quite frustrating on the iPhone because you're constantly clicking links by accident.
Is there anyway to prevent this using css alone?
If not then what would be the most simple solution to this problem?
Thanks!
I would suggest to use the Javascript. However, I found a way using only CSS. First step, you will need to identify the client browser, just add the code below in your HEAD session in HTML file:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />
Only if client is using a browser in iphone, the content of "iphone.css" will be loaded.
In this file "iphone.css", you need create a class to disable the links:
.disableLink {
pointer-events: none;
cursor: default;
}
In your HTML code of gallery, add the references in your links:
IMAGE
These steps works only in iPhone/iPod touch, but if you look in my second reference, you will see the way to adapt for iPhone 4/iPod touch 4G:
I don’t think there’s a CSS-based solution (CSS isn’t really designed to change the behaviour of HTML elements).
You could use JavaScript on page load to check the width of the browser’s viewport, and then find and disable/remove the links if the viewport is phone-sized.
See PPK’s ‘A Tale of Two Viewports’ article to figure out which JavaScript properties to check to figure out the width in your situation (I haven’t done enough mobile development to remember off the top of my head).
I like the idea of pointer-events: none;, but I wouldn't use it because it isn't well-supported.
If we're defining a mobile device as just having a certain screen size, I would do something like this:
$(function () {
var mobile = ($(window).width() < 481);
$('#image-gallery').find('a').click(function (e) {
if (mobile)
e.preventDefault();
});
});
However, I would try to define 'mobile' as something else, e.g., a browser that supports touch events.
Trying to write html help files that get included with our app on iOS.
For the iPad version, I want the help files to display a smallish graphic (about
156x204).
For iPhone / iPod, I don't want to have the graphic displayed.
Other than using javascript like the following in the file h_login.html:
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("h_small_login.html");
which requires a clone of each file, I haven't found a method.
Would prefer to stay using minimal HTML ... vanilla, no CSS, a single "meta" at the
start to specify:
meta name="viewport" content="width=device-width; initial-scale=1.5; maximum-scale=4.0; user-scalable=1;"
thanks!
Stan
By far the easiest way is with a media query. I'm fairly sure i-Devices support this feature of CSS:
#media screen and (max-device-width: 600px) {
img.hide {display:none;}
}
Just add class="hide" to the relevant images, and adjust the 600px (I don't know what the resolution of iPhone and iPad are, but just change the 600 to anything in between the two).
It is far easier to do this than to try and get JavaScript to do the same thing.
jQuery can do this easily:
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$("img").attr("display","none");
}
That would remove all images from the document when the useragent is iPhone or iPod. If you aren't using jQuery, but you are using server-side scripting, we'd need to know what language you are using. If you are just using straight HTML, then JavaScript is your only way to modify the page, and jQuery will be your best bet.
I have a facebook video embedded in a fan page tab. You can click to share a message but the dialog that pops up appears underneath the video itself. I had a screenshot to show you but it won't let me post it because I don't have enough rep.
Is there a way to have the sharing message above the video? I have tried z-index in css and that didn't work. I also tried adding these tags to the embed code:
<param name="wmode" value="transparent" />
wmode="transparent" (in the actual embed tag)
but that didn't work either.
Try instead to use wmode="opaque" as described here: http://developers.facebook.com/docs/appsonfacebook/tutorial/
I am looking to find a way to shoot and record video using the iPhone's camera using HTML 5. I referred this document.
http://www.w3.org/TR/html-media-capture/
I have tried using the HTML Media Capture API as told in several posts. But I cannot access the camera. I'm using the following code in my HTML file which is rendered in an UIWebView.
//A choose file button which is actually disabled came up.
<input type="file" accept="image/*" capture="camera" id="capture">
which didn't work.
And this code,
//Didn't worked
window.navigator.getUserMedia('audio, video', function(){
alert('Success');
}
, function(){
alert('Error');
});
and finally this one,
//This came up as [object Navigator]
alert(navigator);
//This came up as undefined.
alert(navigator.device);
Is video capture in iPhone actually possible via HTML 5? Does this means that Media Capture API of HTML 5 is not yet fully deployed? If so will it be in near future? Could someone point me in the right direction?
Not currently. You will have to use a framework like AppMobi or Apache DeviceReady(Phonegap) to get access to the native camera via JavaScript in a UIWebview.
OK, I'm having some issues with my site's mobile stylesheet on the iphone. I reworked the stylesheet to be similar to what http://m.facebook.com give the browser, only I'm getting an issue where the Safari on iPhone browser is still zooming the page out from like 960px, instead of constraining it to the native screen resolution. What gives?
Do you think it has to do with my .container960 class on the body element? I tried reseting those styles with the mobile stylesheet, but maybe it's not reseting the container styles properly.
The site is http://beta.cureinternational.org. You'll need to use username Guest and password guest to view the page.
Have you tried adding a meta-tag like this?
<meta name = "viewport" content = "width = device-width">
Or hard-coding in the dimensions yourself (see Viewport in https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)