I have this next code, but I cant make the icon show nor the image on the iphone render. How could I fix this problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="contruccion">
<img id="Construccion" width="801" height="601" name="Construccion" alt="propiedad de CharLi Guatemala" src="images/siteCon.png"></img>
</div>
</body>
</html>
Safari on iOS does not support the favicon.ico file. You should create a touch icon, as defined by Apple.
The easiest way to get the job done is to create a 152x152 picture named apple-touch-icon.png and placed at the root of your web site. The iOS devices will find it and use it in bookmarks and for link on homepage.
You can also use this favicon generator to create all iOS pictures and HTML declarations at once. Full disclosure: I am the author of this site.
Related
I am experiencing trouble in Facebook brand tab, for my client's Facebook page.
I have created a tab inside Facebook Page.
I have HTML code for the same.
In this code i have used iframe to showcase video from Youtube.
When i open this html file with google chrome from my desktop entire design of 810 x 800px is visible with 'youtube video' and video gets played.
but the moment I create a new tab inside Facebook page, give my app id and url only background image is visible and no video!
All my content comes from SSL certified site.
Here is the code i am using.
enter code here
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Kich Video</title>
<style type="text/css">
body {
margin:0;
background-color:#f0f0f0;
}
#container {
width:810px;
height:695px;
padding-top:115px;
padding-left:260px;
margin:0px;
background-image:url(https://spotlightcommunication.com/work/kichtvad/background.jpg);
background-repeat:no-repeat;
}
#container object {
width:560px;
height:315px;
}
</style>
</head>
<body style="margin:0">
<div id="container">
<iframe width="500" height="281" src="http://www.youtube.com/embed/4CjayX3GNmU?rel=0"
frameborder="0" allowfullscreen></iframe>
</div>
<div style="padding-left:0px;">
<a href="http://www.crowdmultiplier.com"><img
src="http://i1160.photobucket.com/albums/q495/chandansolanki/CMPowered810x60_Px.jpg"></a></div>
</body>
</html>
I have currently keep this tab alive on Facebook page.
there you can see, only background image is visible and not video.
Facebook page link Facebook.
Tab marked as Kich TV Ad needs to show this video.
Can anyone help me on this?
Kirit JAsani
All my content comes from SSL certified site.
Well, you always need to use https. If you take a look in the Browser console, it will tell you that the youtube link got blocked because it´s unsafe content (http instead of https). Use https for ALL absolute URLs. That goes for the youtube src and for the photobucket src.
I'm working on a simple FB app of a type I've done many times before. It works perfectly outside FB but once it's in FB, the youtube embed simply doesn't load.
I pulled the code out into a test file, and it still won't load. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<iframe width="669" height="391" src="http://www.youtube.com/embed/48P1jc5tyTw" frameborder="0" allowfullscreen></iframe>
</body>
Absolutely nothing displays when this is loaded as an app on a FB page. The FB debugger says "Can't Download Could not retrieve data from URL."
Any ideas?
Try changing the src of the iframe to "https://...".
Since Facebook is served over HTTPS, your browser will block any content from loading on the page that's not over HTTPS too. Fortunately, youtube supports https versions of their URLs.
This is my first time posting a question on this site, but certainly not the first time finding answers in it.
I have used stackoverflow as a resource to fix several issues I've faced with my new blog, that is until last night, when I found this issue which I just can't fix.
When I try to share the home page of my blog, I don't get the proper image specified in the og:image tag... once I check my site via de FB debugger, it shows me this:
https://developers.facebook.com/tools/debug/og/object?q=ivanfuentes.com
Curiously enough, I do not find any issues when I check for a page, or a post:
https://developers.facebook.com/tools/debug/og/object?q=ivanfuentes.com%2Fvideos%2F
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fivanfuentes.com%2Fthe-popularity-contest%2F
So, I know it's an issue that is generated in the home page only, but during the last 18 hours, have been unable to find it.
I have OG meta tags specified dinamically via a wordpress plugin... currently, it's "Facebook AWD", but I've had several other Facebook sharing, all-in-one's, and OG plugins, which give me the same results in the debugger, which makes me think I messed up somewhere else. I have no embarrassment in admitting I'm quite a newbie, so it's highly likely I messed up while trying to modify some code... probably when I added a few lines to make the site IE compliant?
Hope I gave enough information, and someone gets to help me, as this is not only about the proper image being displayed on a Facebook link, but rather about me likely having a mess in my code, and that could (WILL) mean trouble once I make any mods/updates to my site in the future.
Thanks for the time!
Your html is a complete mess and that's why the debugger is complaining.
Visiting your page and looking at the code I can see this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<div id="fb-root"></div>
<script>
...
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div id="fb-root"></div>
<script>
...
</script>
<title>Ivan Fuentes Hagar</title>
Two problems there:
The sdk code is inserted twice
In both cases there's a div placement before the body
In the debugger result for this page when clicking the bottom link (Scraped URL: See exactly what our scraper sees for your URL) you can also see broken html but in another variation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><body>
<div id="fb-root"></div>
<script>
...
</script><meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
...
</script><title>Ivan Fuentes Hagar</title>
There problems here:
The body definition is right after the html
There's no head definition
All of the tags which suppose to live inside the head are inside the body
The sdk script is loaded inserted twice
In both cases I found 3 occurrences of the <div id="fb-root"></div>.
As you can see you have some fixin' up to do with the html output of your wordpress.
I'm not sure why the outputs is different for the debugger, I thought that maybe due to the user agent string, but trying curl --user-agent "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" "http://ivanfuentes.com/" returns the exact results as with the browser.
I would like to create web page which has to compatible on iPhone..
i want to know how to design the web page for iphone.
Pls provide me the sample html code for a web page . i mean i would like to know how much should be the screen size of the web page etc...
Kindly guide me on this
Thanks for any help.
UPDATE1
can you give me a sample html code ( layout) which can run on iphone browser
Sample HTML template that will run perfectly on an iPhone:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello world</p>
</body>
<html>
I'm trying to configure that my facebook application will be resizeable.
The docs at http://wiki.developers.facebook.com/index.php/Resizable_IFrame
talk about facebook connect cross-domain receiver URL.
and in the JS code i need to enter the 'site relative url to xd_receiver.htm'.
what's that?
what code should be in that HTML file ?
thanks
This is a file saved to your local web server. It allows Facebook to save a cookie that you have access to. Basically, it allows Facebook Connect to work.
Easiest thing to do is just place it in your web root (http://example.com/xd_receiver.htm)
This file should contain the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?v2" type="text/javascript"></script>
</body>
</html>