What code do I need to add to my website in order to get a rich link when someone sends a link of my website via iMessage and not just the standard icon, title, hyperlink?
The code you need is the following:
<html>
<head>
<title> </title>
<meta name="og:title" content="Insert Titel for iMessage"/>
//Will be used if internet is to slow to load image or video
<link rel="icon" href="link to your icon" type="image/png" />
<meta name="og:image" content="link to your image"/>
<meta name="og:video" content="link to your video"/>
</head>
...
</html>
Related
It is possible to display an react/angular web application on WebView component ?
I build angular(angular cli) and react application in prod mode.
Next, prepared files I put inside ./assets folder.
After changes inside webpack.config.js and run
tns run android --bundle than nothing is shown beside of static texts.
home.component.tns.html
<GridLayout>
<WebView src="~/assets/seatmap/index.html"></WebView>
</GridLayout>
home.component.tns.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>t</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.x.css"></head>
<body>
<img src="favicon.ico"> // not displayed
<img src="./favicon.ico"> // displayed
<app-root></app-root> // nothing is displayed
<b>This text is displayed</b>
<script type="text/javascript" src="runtime.x.js"></script>
<script type="text/javascript" src="polyfills.x.js"></script>
<script type="text/javascript" src="main.x.js"></script>
</body>
</html>
Javascript files are loaded. There is no problem with path.
When I change src to any external web site (src="http://facebook.com") everything is ok.
Duplicate of NativeScript WebView loading local resources in src document
It's known issue with iOS, please refer my answer there which includes possible workarounds.
I'm using dotnetcore and ASP MVC.
The problem is that I don't know how to serve correctly my css and images files.
Here you can see the file structure:
Here is the Shared layout's head.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Galeria de comics">
<title>#ViewBag.Title - Galeria de comics</title>
<link rel="stylesheet" href="~/wwwroot/css/normalize.css">
<link rel="stylesheet" href="~/wwwroot/css/main.css">
</head>
<body>
<header class="main-header"></header>
#RenderBody()
</body>
</html>
I'm called this layout in a View.
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Libro comic detalle";
}
What's the problem?
The problem is that the CSS files aren't serve so I can't see the styles.
Any solition?
Seems I miss the href attribute's content. You should skip the wwwroot folder since the static files are served as http://app/css/cssFileName. Example: http://yoursite.com/css/main.css, same with images and js files.
Here I fixed the problem:
<link rel="stylesheet" href="~/css/normalize.css">
<link rel="stylesheet" href="~/css/main.css">
If you want to know more visit this link
I am using Bootstrap 3 for my website and I can't figure why it's not responsive on iOS (shows like the desktop view). I have already do a quick search about this problem and yes I use the template code provided by Bootstrap but it still doesn't seem to work. Here is the beginning of my code:
<!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">
<title>Laurent Doucet — Graphic designer</title>
<meta name="description" content="—">
<link rel="icon" href="img/favicon.png">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
Here is my website: http://www.laurentdoucet.be
Thanks a lot for the help.
Your use of frames is preventing your viewport tag from working.
You need to include a viewport meta tag in the outer page also:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>www.laurentdoucet.be</title>
</head>
<frameset>
<frame src="http://www.bepxlagency.be/laurentdoucet/" name="redir">
<noframes>
<p>Original location:
http://www.bepxlagency.be/laurentdoucet/
</p>
</noframes>
</frameset>
</html>
Some website retrieved information in telegram when send link and some website doesn't like this:
So my question is there any structure for website to load information in telegram ?
The Open Graph protocol enables any web page to become a rich object in a social graph like Facebook, twitter, telegram, Skype and ...
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Simply use meta tag with name description:
<head>
<meta name='description' content="some content"/>
</head>
I've got a single page html5 application with a manifest file and many resources to be cached. When I open the page from the browser (both android chrome and ios safari) it starts downloading the file listed in the manifest. After that, I press "add to home screen" and the app-like icon is created but on iOS if I open the app from the icon in the home screen it downloads again every file listed in the manifest, this doesn not happen on android.
Is it supposed to behave like this or I am missing something?
<!DOCTYPE html>
<html manifest="manifest.appcache" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>app</title>
<meta name="viewport" content="width=768, initial-scale=1.0, user-scalable = no">
<link rel="shortcut icon" href="/icona.png">
<link rel="apple-touch-icon-precomposed" href="/icona.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
...
manifest.appcache
<?php
header('Content-Type: text/cache-manifest');
?>
CACHE MANIFEST
CACHE:
#lastupdate <2014 Jul 16 Wednesday 18:37:18>
/myresource1.png
/myresource2.png
NETWORK:
/myresource3.png
/myresource4.png
FALLBACK:
UPDATE
Before pressing add to home screen I wait the "cached" event, I know it has been fired because it close my progress bar
function cachedEvent(e) {
$('#progressBar').css('display','none');
}
applicationCache.addEventListener('cached', cachedEvent);