So I have this simple html file
<!DOCTYPE HTML>
<html manifest="cache.manifest"><head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Test</title>
<meta http-equiv="content-type" content="text/html">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<h1>hello</h1>
</body>
</html>
My cache.manifest is simply
CACHE MANIFEST
I run this website on my local server (localhost). I load it from iphone safari and it works fine. I then stop the server and load it again, and it works, because the offline cache is doing its job. However... if I save the website as a start icon in the iphone dashboard, and then I try to open it with the server stopped it won't load. However... if I open it with the server running at least once (it will work) then I can open it later without problem.
It looks like even though the page was cached in safari, it is not cached in this saved app. Anybody knows how to get around this?
The reason for that is because Safari uses a different cache than WebClips. The fact that is cached in Safari does not mean it will be cached if you create a webClip from it. You need to access the webclip at least once to cache it.
Related
I can’t figure out what the problem is .__.
Liveserver extension does not react on html/css changes
This line in html is present `
<meta charset="UTF-8">
Here is my settings (cant post image):
{
"files.autoSave": "afterDelay",
"liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"liveServer.settings.useWebExt": true,
"liveServer.settings.fullReload": true,
"liveServer.settings.ChromeDebuggingAttachment": false,
"liveServer.settings.wait": 3,
"liveServer.settings.CustomBrowser": "chrome",
}
here is markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
test
</body>
</html>
Updated question shows complete HTML example that should work with default preferences. Presumably the problem lies in the
"liveServer.settings.useWebExt": true,
preference: if the browser you are starting does not have installed required Live Server - Web Extension and if your preferences do not adhere to Setup Documentation, then reloads will not be triggered according docs.
Frankly, I was not able to set it up to work with web extension so I've either missed some detail there or it is a bug probably.
Plus, Preferences documentation tells that Web Extension approach should even work with head- and body-less documents.
liveServer.settings.useWebExt: : If it is true, Live Reload will be fully controled by the Live Server Web Extension. And also, it does not matter if your HTML have <body> tag or not, Live Reload will work for every file. :smile:
Default is false
Original question included just first the HTML example (and I've missed aforementioned documentation part) so it seemed that problem might be that uch empty file does not work with the Live Server (ritwickdey.LiveServer) extension's "Live Reload" feature, and it even warns you about that in a notification bubble:
Live Reload is not possible without a head or body tag.
I understand, don't show again
So use more complete HTML skeleton with those optional <head> and <body> tags if you want to see it live-reloaded upon save with this extension.
On my website, I use JWPlayer to play video content. I would love to embed a player hosted on my website into a Facebook post that plays in the post and not link to another website. When I use JWPlayer's embed wizard on their website, it creates a page on their server with the player and gives some iframe code that I can paste into Facebook. This works completely fine. However, I really need to be able to make an automated process that creates embed pages on my own site independent of JWPlayer's website.
I took the source code and modified it to fit my website, but unfortunately Facebook does not allow it to play inline. It shows the splash image, title, and description but does not have a play button. When I click the image, it takes me to my website rather than playing the video within the post.
When researching the issue on Facebook's dev reference, I saw that you need a secure URL. My website has an SSL certificate. However, it does not have an EV certificate like JWPlayer's website. Could this be the issue? I don't want to spend the money on it unless I know it will work.
Here is my html heading if it helps at all. And I am using JWPlayer 7. Any help will be much appreciated.
<head prefix="og:http://ogp.me/ns#">
<title>HTTP test video</title>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta property="og:url" content="https://www.examplewebsite.com/embed/player.html">
<meta property="og:title" content="HTTPS test video">
<meta property="og:image" content="http://www.examplewebsite.com/embed/og_image.jpg">
<meta property="og:description" content="This is a test.">
<meta property="og:type" content="video">
<meta property="og:video:url" content="https://examplewebsite.com/embed/jwplayer.flash.swf">
<meta property="og:video:secure_url" content="https://examplewebsite.com/embed/jwplayer.flash.swf">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="480">
<meta property="og:video:height" content="270">
</head>
Alright, I figured out the problem. For some reason, the og:url tag was messing the whole thing up. I removed that tag and everything works fine as far as displaying inline. I do not know why that fixes it, but it works. However, I believe JWPlayer 6 and 7 don't support Facebook embed... But that is a different issue.
When I try and scrape my URL, http://development.classroom.me.uk, with the Facebook debugger at https://developers.facebook.com/tools/debug, I get back information for an older version of the website on an IP address that is no longer hosting this site.
The original IP was 46.32.233.216, but the new IP is 212.67.215.188.
I have another website running on the new IP:
http://advert.classroom.me.uk
This website gets scraped without any issues, so this is not a firewall problem.
Facebook is caching the domain http://development.classroom.me.uk with the old IP, which is why the scraper is returning a 502 [bad gateway] response. It is retrieving out of date data, but unable to actually return the URL:
Go to http://development.classroom.me.uk, and view source.
In the document head, you will see:
<meta property="og:title" content="classroom" />
<meta property="og:description" content="classroom provides a digital communication platform for teachers and students" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://development.classroom.me.uk/images/logo/logo-facebook.png" />
<meta property="og:url" content="http://development.classroom.me.uk" />
Go to https://developers.facebook.com/tools/debug, and type in http://development.classroom.me.uk into the input field. Press 'Debug'
I would expect to see information about the Facebook meta tags provided above.
I actually see data from an old version of this website held on an IP address that no longer hosts this site. In fact the old website contains no Facebook meta tags at all, which is why you can see data being scraped from the HTML title & standard meta description tag, instead...
Can anyone provide a solution for how I can clear the Facebook proxy cache. I have tried submitting this issue several times on Facebook, but no one from Facebook has provided me with a proper solution...
Thanks in advance
OK. With the help of the Facebook IT Department, we got to the bottom of this one. Indeed, the data was being cached. This was not a firewall issue, as I suspected, even though I was told repeatedly that it was.
I placed a new index page up at http://development.classroom.me.uk on my new IP 212.67.215.188
The page contained an HTML skeleton. See below [note, I placed no data in the document body]:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="keywords" content="classroom, home, yoga, indian head massage, tai chi, feng shui, united kingdom, therapy" />
<meta name="description" content="classroom provides a digital communication platform for teachers and students" />
<meta name="robots" content="index, follow" />
<meta property="og:title" content="classroom" />
<meta property="og:description" content="classroom provides a digital communication platform for teachers and students" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://development.classroom.me.uk/images/logo/logo-facebook.png" />
<meta property="og:url" content="http://development.classroom.me.uk" />
<title>classroom</title>
</head>
<body>
</body>
</html>
I then used the Facebook debugger at https://developers.facebook.com/tools/debug to scrape this address again. Voila. The page returned a 200 response & the correct meta data.
The cache has been cleared.
Unfortunately, when I returned the correct index page back to http://development.classroom.me.uk, I still get a 502 response from the Facebook debugger. However, the important thing, is that the correct meta data & image remain.
I am going to try and work out why I am getting the 502 response, and when I do, I will let you know. I thought I would write up the answer now, as I know several developers have been troubled by this issue..
I have just started to create a new website, which is currently not on the internet. My very first website so everything is new to me. I'm trying to implement the Facebook like button. I have inputted the code but nothing is being displayed. I am using TextWrangler to create the website and using MacBook Air. Not sure if this information will help. Perhaps it's not working because of the meta properties? I didn't quite understand what information I needed to input there.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>[]</title>
<meta property="og:title" content="The []" />
<meta property="og:type" content="website" />
<meta property="og:url" content="file:///Users/[]/Documents/Sites/IBS.html" />
<meta property="og:image" content="http://[].jpeg" />
<meta property="og:site_name" content="The []" />
<meta property="fb:admins" content="218100060" />
</head>
<body>
<p>hello</p>
<iframe src="//www.facebook.com/plugins/like.phphref=file%3A%2F%2F%2FUsers%2Fshikhaverma%2FDocuments%2FSites%2FIBS.html&
send=false&layout=standard&width=450&show_faces=true&font=arial&
colorscheme=light&action=like&height=80" scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:450px; height:40px;" allowTransparency="true">
</iframe>
</body>
</html>
If you can help I would greatly appreciate it.
Thank you.
The problem is that the code you provided is double escaped.
Which means that they are "&"s everywhere in the iFrame URL (src) code you provided:
//www.facebook.com/plugins/like.phphref=file%3A%2F%2F%2FUsers%2Fshikhaverma%2FDocuments%2FSites%2FIBS.html&
send=false&layout=standard&width=450&show_faces=true&font=arial&
colorscheme=light&action=like&height=80
Try pasting the url in your web browser, and it won't work, because it's so mal-formed.
Besides, Facebook like button can't use a local url to like, (in this case you used file:///Users/shikhaverma/Documents/Sites/IBS.html. ).
It has to be using an online, functioning URL. So for now, just enter any random URL of an online website untill you get your site hosted online.
I un-escaped the url, and it's still mal-formed. It should be "like.php?href=file" instead of "like.phphref=file". Why don't you just go back to Facebook and re-generate the code.
Also, is there a problem with your code editor? Why is everything getting double-escaped?
Edit: By the way, you can always utilize the unescape() JavaScript command to unescape text. More here on Mozilla dev.
I've been trying for the past couple days to get a small swf game working via a feed post to my wall (per the instructions at the Facebook Developers site). So far, I've had no success, despite having everything appear correctly in the OG Debugger. The metadata I'm using to generate the feed post is the following:
<head prefix="og: http://ogp.me/ns fb: http://ogp.me/ns/fb">
<meta property="fb:app_id" content="157726317622339" />
<meta property="og:type" content="game" />
<meta property="og:url" content="http://devapplatform.com:3557/site/feed_game/" />
<meta property="og:title" content="It Or Miss Mini Game" />
<meta property="og:description" content="Sebastian submitted to It or Miss, Come vote for them here!" />
<meta property="og:image" content="http://devapplatform.com:3558/images/catSurprise.jpg" />
<meta property="og:video" content="http://devapplatform.com:3558/images/catTest.swf" />
<meta property="og:video:width" content="398" />
<meta property="og:video:height" content="299" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
</head>
This code is stored on the following web page:
http://devapplatform.com:3557/site/feed_game/
If you want to test this code to see exactly what it's posting, you can simply launch my test app (make sure HTTPS is turned off for your account - I can't have HTTPS enabled on this app due to technical limitations of my environment. Rest assured HTTPS IS enabled on the production version of this app). The feed dialog should appear immediately after launch, during the loading process:
http://apps.facebook.com/itgirlsb/
DISCLAIMER: These links aren't guaranteed to always be available, due to them being hosted on a local test environment which gets powered off in the evenings PSD.
I can't see page or the image / SWF to test, but try these:
Your images should be at least 90x90px, otherwise we won't show the image, so there's nothing to click. Ideally make them 200x200px or more.
If you want the embed to work for anyone who is using secure browsing (https://www.facebook.com) then you need to host your SWF on a secure host. If it's on an http host, we can only embed it for users who have secure browsing disabled; otherwise the browser would throw mixed content warnings.