I'm trying to add some meta tags from widget (/views/parts/ folder) that gets data from database outside of orchard. I need to put them to head section, and frankly I got no idea how to achieve that.
I tried:
using (Script.Head())
{
<meta property="description" content="ABC">
}
SetMeta("ABC", "description");
But none of these work :-(
Edit: our document.cshtml code:
#using Orchard.Mvc.Html;
#using Orchard.UI.Resources;
#{
RegisterLink(new LinkEntry { Type = "image/x-icon", Rel = "shortcut icon", Href = Url.Content("~/modules/orchard.themes/Content/orchard.ico") });
string title = Convert.ToString(Model.Title);
string siteName = Convert.ToString(WorkContext.CurrentSite.SiteName);
string classForPage = "static " + Html.ClassForPage();
}
<!DOCTYPE html>
<!--[if lt IE 7]>
<html lang="#WorkContext.CurrentCulture" class="#classForPage no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html lang="#WorkContext.CurrentCulture" class="#classForPage no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html lang="#WorkContext.CurrentCulture" class="#classForPage no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="#WorkContext.CurrentCulture" class="#classForPage no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>#Html.Title(title, siteName)</title>
<meta name="viewport" content="width=device-width">
#{
Display(Model.Head);
}
<meta property="og:title" content="#Layout.Title - #Convert.ToString(WorkContext.CurrentSite.SiteName)">
<meta property="og:site_name" content="#Convert.ToString(WorkContext.CurrentSite.SiteName)">
<meta property="og:url" content="#Request.Url">
<meta property="og:type" content="article">
<script>(function(d){d.className="dyn"+d.className.substring(6,d.className.length);})(document.documentElement);</script>
</head>
<body>
#Display(Model.Body)
#Display(Model.Tail)
</body>
</html>
Does anybody know how to achieve that?
IResourceManager provides the necessary methods.
For use it in view:
var resourceManager = WorkContext.Resolve<Orchard.UI.Resources.IResourceManager>();
resourceManager.SetMeta(new Orchard.UI.Resources.MetaEntry
{
Name = "description",
Content = "ABC"
});
But it can be also used in other places (e.g. part driver).
Edit
using SetMeta("description", "ABC") in view give the same results.
I used the following code in my layout.cshtml file before header tag and it worked.
#using (Script.Head())
{
<meta name="description" content="<your description>"/>
<meta name="keywords" content="<your keywords here>"/>
}
Enjoy!!!
Related
I've got the following map on my website initialised from js.
How do I disable city names like how other countries are shown?
You can use a custom style as shown in the sample below:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script>
var map;
var hiddenCityLabels = {
"version": "1.0",
"elements": {
"point": {
"labelVisible": false,
"visible":false
}
}
};
function GetMap()
{
map = new Microsoft.Maps.Map('#myMap', {
customMapStyle: hiddenCityLabels
});
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:100%;height:600px;"></div>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=<Your Bing Maps Key>'></script>
</body>
</html>
Here is a live example:
http://alkharia.com/layout/index.html
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet/less" type="text/css" href="assets/less/app/core.less">
</head>
<body style="">
<!--[if lt IE 7]>
<div class="alert alert-danger">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</div>
<![endif]-->
<header>
<section id="top-bar">
<div class="col-sm-6 col-sm-offset-4">
Login form
</div>
<div class="col-sm-2">
Create an account
</div>
</section>
</header>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/less.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body></html>
So I included the less.js file along with the core.less file
The core.less file #import url("../bootstrap/bootstrap.less"); the bootstrap.less file while the bootstrap.less file imports all the relevant less files.
If you look under the Developer's Tools in Chrome, all less files are being included including ALL the bootstrap.less files that I wanted to import. So they are importing properly, however, they are not styling anything.
I even tried just the #import "path/to/bootstrap.less"; as well and it imports it just like it was.. but not styling.
My core.less file:
#import url("../bootstrap/bootstrap.less");
//
// Variables
// --------------------------------------------------
// Scaffolding
// -------------------------
#body-bg: #1d2a37;
#text-color: #3b3b3b;
// Links
// -------------------------
#link-color: #67ae10;
#link-hover-color: darken(#link-color, 15%);
// Typography
// -------------------------
#font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
#font-family-serif: 'AR JULIAN', serif;
#font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
#font-family-base: #font-family-serif;
#font-size-base: 1.2em;
#font-size-large: ceil((#font-size-base * 1.25)); // ~18px
#font-size-small: ceil((#font-size-base * 0.85)); // ~12px
#font-size-h1: 1.6em
#font-size-h2: #font-size-h1 - 0.1;
#font-size-h3: #font-size-h1 - 0.2;
#font-size-h4: #font-size-h1 - 0.3;
#font-size-h5: #font-size-base;
#font-size-h6: #font-size-base - 0.1;
#line-height-base: 1.56;
#line-height-computed: floor((#font-size-base * #line-height-base)); // ~20px
#headings-font-family: inherit;
#headings-font-weight: 400;
#headings-line-height: 1.1;
#headings-color: inherit;
I also tried removing all the variable overrides and just left the #import line, but it still just loaded the import files and not apply the styling.
HOWEVER, when I just <link> to bootstrap.less instead of going through my core.less file, it loads everything fine and the stylesheets get applied just fine. But of course, I want to be able to override bootstrap's variables.less file along with having my own stylesheet.
I'm doing #Adam's suggestion here : Bootstrap variable overriding with LESS
Thank you for any help..
I have a facebook application where the user choose 4 of his friends and then it creates a video (swf) with the pictures of your friends in it (loaded via xml). So I need to share this video on the user timeline. Everything works fine but the video is not embedded in the post on his timeline, there is only a post with the link to the page in it.
The weird thing is, if I post the url directly on my timeline, the video is embedded, but not if the same link is posted via the application.
here is my code called by the share button in js :
function postToFeed() {
var obj = {
method: 'feed',
link: 'https://mysite.com/flash/share-page.php?id=22',
picture: 'https://mysite.com/images/video-preview.jpg',
name: 'Name',
caption: 'Caption',
description: 'Description'
};
function callback(response) {
//some code here
}
FB.ui(obj, callback);
}
and the code in my share-page.php
<?php
$id_inscription = $_GET['id'];
$video_url = 'https://mysite.com/flash/share-page.php?id=22';
$video_preview_image = 'https://mysite.com/images/video-preview.jpg';
?>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta property="og:video" content="<?php echo $video_url; ?>"/>
<!-- Open grah tags for Facebook -->
<meta property="og:title" content="Test video player" />
<meta property="og:description" content="A video player interface experiment." />
<meta property="og:type" content="video" />
<meta property="og:url" content="<?php echo $video_url; ?>"/>
<meta property="og:image" content="<?php echo $video_preview_image; ?>"/>
<meta property="og:site_name" content="Site name"/>
<!-- Video specific open graph tags -->
<meta property="og:video" content="<?php echo $video_url; ?>" />
<meta property="og:video:secure_url" content="<?php echo $video_url; ?>" /> <!-- Required for people on Facebook who have secure browsing enabled! -->
<meta property="og:video:width" content="325" />
<meta property="og:video:height" content="180" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<script src="js/swfobject.js"></script>
<script>
var flashvars = {
xmlUrl:"xml/data-<?php echo $id_inscription; ?>.xml",
policyFileUrl:"http://profile.ak.fbcdn.net/crossdomain.xml"
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "",
wmode: "opaque"
//wmode: "direct" // can cause issues with FP settings & webcam
};
var attributes = {
id:"content"
};
swfobject.embedSWF(
"app.swf",
"altContent", "480", "270", "10.0.0",
"expressInstall.swf",
flashvars, params, attributes);
</script>
</head>
<body>
<div id="altContent">
<p>Get Adobe Flash player</p>
</div>
</body>
</html>
Found it, in the javascript you have to add
source: 'https://mysite.com/flash/app.swf'
DOesnt work for me .
Also facebook says ,It is NOT supposed to work By Design .
https://developers.facebook.com/bugs/589975484398226?browse=external_tasks_search_results_526fc388b99e18881434478
Please share here your code snippet if you could make it work . I have the meta tags taking care for the secure video Url as well .
<meta http-equiv="refresh" content="<%=SessionManager.TimeOut%>" />
i tried this
SessionManager is a static class and TimeOut is a vlaible in the class set to 20
i am expecting
<meta http-equiv="refresh" content="20" />
to be rendered but
<meta http-equiv="refresh" content="<%=SessionManager.TimeOut%>" />
is rendered
i am doing this in my master file
Remove runat="server" from your <head> :-)
So instead of:
<head runat="server">
<meta http-equiv="refresh" content="<%=SessionManager.TimeOut%>" />
...
</head>
simply use:
<head>
<meta http-equiv="refresh" content="<%=SessionManager.TimeOut%>" />
...
</head>
Im trying to add a facebook like button to a website im working on, but none of the meta attributes i add show up.
I have the following in my html, (irrelevant parts not included)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
...
<meta property="og:site_name" content="My Site" />
<meta property="og:title" content="Some Product"/>
...
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPIKEY',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
...
...
<fb:like layout="button_count"></fb:like>
...
Any pointers on what im doing wrong would be much appreciated.
I realised, the problem was that i was testing the machine on my local computer. It started working once i put the website online.
Believing the Facebook page
http://developers.facebook.com/docs/guides/web
it should look like this :
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
You're missing a number of the required open graph tags. They're defined here. At a minimum you're looking for -
<meta property="og:title" content="Title of page"/>
<meta property="og:type" content="CONTENT TYPE"/>
<meta property="og:url" content="URL of PAGE"/>
<meta property="og:image" content="URL of IMAGE"/>
<meta property="og:site_name" content="SITE NAME"/>
<meta property="fb:admins" content="USER_ID"/>