I have this <meta property="og:title" content="some title"> in my <head>-section. I want to change this meta property depending on which page the user is navigating to. So first of all, in my index.html I have a default value in the <head>-section:
<head>
<meta property="og:title" content="some title whatever">
</head>
then I wrote this script, which I keep in an external .js file:
function setMetaTag(metaName, name, value) {
var meta = '<meta '+metaName+'="'+name+'" content="'+value+'"/>';
$(meta).insertAfter('title');
}
then I do this on every subpage:
setMetaTag('property', 'og:title', 'new title for this page');
so far it works, but of course, when users click back and forth on the page the new <meta>-tag gets repeated x-times and when users go back on the index.html, the <meta> from the previous title is displayed and not the default value.
How can I achieve, that only the title gets displayed once and default value gets displayed when back on the index.html?
Related
I am trying to tweet with image using javascript.I read about cards, and put the following on page i am sharing:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="http://203.110.93.244/">
<meta name="twitter:creator" content="#SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines witproject here.">
<meta name="twitter:image" content="http://www.promon.in/media/images/products/2015/09/listing_image_vsRFOqw.jpg">
then i use this javascript to tweet:
twttr.widgets.createShareButton(
'http://203.110.93.244/offers/eat-n-drink/Delhi-greater-kailash-rara-avis/81/',
document.getElementById('twitter-btn'),
{
text: '#HelloWorld',
});
Problem is, I am not getting any image thumbnail.
Please guide me towards a viable solution.
Thanks.
Something as follows works for me. It opens a window whenever the user clicks a button... It sends the "URL" of the source page, "via" which is your twitter username, and "text" which is whatever message you want to appear in there. Note that the amount of text is limited and if too long Twitter silently eliminate part of the data.
The page URL with the image must appear first. You can test the validity of the page here: https://cards-dev.twitter.com/validator
jQuery("#twitter-share-button").click(function(e)
{
e.preventDefault();
var uri = "http://203.110.93.244/offers/eat-n-drink/Delhi-greater-kailash-rara-avis/81/";
var tweet = "https://twitter.com/intent/tweet?url="
+ encodeURI(uri)
+ "&via=yourtwittername&text="
+ encodeURI(uri)
+ encodeURI(" #your-hash-tag ")
+ encodeURI("some more text here");
window.open(tweet, "Share on Twitter");
});
I'm working on a large website project and we have a default layout, which contains a <title> My Title </title> tag that is used on all other pages.
How can I keep that title until I get to a specific page where I would like it to change to <title> Other Title - My Title </title> for the current page and all children of that page without having to edit each child page manually?
Thank you in advance!
EDIT
I have a layout page that I want to override for a certain subset of pages (which are all children of a particular page)
It's been a while since I've done anything in razor but this might work. In your main layout file, e.g. Index.cshtml you could add a #helper to streamline the formatting, e.g.:
#helper formatTitle(string subtitle) {
#if (!string.IsNullOrEmpty(subtitle)) {
#:<title>subtitle - My Title</title>
} else {
#:<title>My Title</title>
}
}
<html>
<head>
#formatTitle(Model.Subtitle)
...
</head>
...
</html>
Then just make sure you set the Model.Subtitle value for each page where you want the subtitle to display in front of the site title.
I want to dynamically update the <title> of my page based on which route / page a user is viewing. Problem is, when the page loads, for a few seconds it shows {{title}} inside my <title> tag where it later puts in the title of the current page (loaded from the controller). Any way I could have the {{title}} hidden by default until the value is loaded?
Use ngBind on the <title> element:
<title ng-bind="title"> Default title </title>
i want to change title in every page of my code but when i view source code i still see the old title.
here is my code:
window.onload = function (){
setProductMeta();
}
function setProductMeta(){
var des = document.getElementById("description").setAttribute("content","dynamic meta description");
document.getElementById("keywords").setAttribute("content","dynamic meta keywords");
document.title = "Point of Sale System";
}
and this meta tage above
<title>Welcome to Atmostphere Technology</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta id="title" name="title" content="Welcome to Atmostphere Technology" />
<meta id="description" name="description" content="atmos is best service in cambodia" />
<meta id="keywords" name="keywords" content="atmos is best service in cambodia" />
The server delivers the source code to the browser.
The browser converts the markup in to a DOM.
Then JavaScript runs and any DOM manipulation you perform is performed. It never touches the source code.
While it is sometimes useful to change the title with JavaScript (e.g. Facebook do it to indicate the number of alerts since the page was last interacted with), almost everything that consumes meta data does not execute JavaScript. If you want to change something fundamental about the page, do it in the source code, not with client side programming.
I've got a page with a table of items that the user can select. I'd like to add a facebook LIKE button.
When the user clicks the like button, it will popup the comment box, which I'd like to be helpfully prepopulated comment based on the items the user has clicked. They can change it if they wish, or they can just leave it as is. It would say something like "I like Item-1 and Item-4", if those table rows were selected.
Is it even possible to pre-populate the comment field?
If so, is it possible to change it via javascript each time the user changes their selection?
It is not possible to pre-populate the comment field of the Like Button, as it must be user generated. However, you can create unique URLs for each table row that will generate unique content in the like button story to represent the item the user liked. For Example:
<fb:like href="http://www.example.com/example.php?row=row1"></fb:like>
<fb:like href="http://www.example.com/example.php?row=row2"></fb:like>
The OG meta data associated with each unique URL should represent the item information for that row. Example:
<meta property="og:title" content="Row 2 Item"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.com/example.php?row=row2"/>
<meta property="og:image" content="http://www.example.com/example_row2.jpg"/>
<meta property="og:site_name" content="example"/>
<meta property="og:description" content="Information about item at row 2"/>