I'm trying to set up a custom page on my Tumblr. I want to serve a JS/JSON file, so I need a completely empty document. however Tumblr seems to be injecting some tags into the page, namely:
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<link rel="stylesheet" type="text/css" href="http://assets.tumblr.com/fonts/squareserif/stylesheet.css?v=4">
<script src="http://assets.tumblr.com/assets/scripts/tumblelog.js?_v=c78ef57bd25c48e7f24a984e7ef6ceba"></script>
Is there a way to remove these, so I can serve a JSON or XML file uninterrupted?
No, Tumblr injects tracking and some other tags to all pages on your blog.
Related
I have a HTML page where I am using javascript to load contents based on query string value..
In javascript, I have some dynamic code to load separate data on the page based on this query string value.
Now my page link looks like
https://example.com?datatype=1
https://example.com?datatype=2
https://example.com?datatype=3
Based on this my page data will vary.
Now I want to Add Facebook and LInked in Sharing on this and want to send custom information to share on facebook and LinkedIn.
As per my R&d, this data can be posted using metatags.
As I told you that My page is a pure client-side page. So these meta tags will not work for dynamic data.
Can anyone suggest how I can Post URL, title, and description to this linkedIn and facebook.
Thanks in Advance
So, I want to focus in on one thing you have stated here:
As per my R&d, this data can be posted using metatags. As I told you that My page is a pure client-side page. So these meta tags will not work for dynamic data.
That's actually not the complete story. Even if your webpage is "pure client-side", you still absolutely need to have an HTML framework to hold this, even if it's as minimal as: <html><head><script type="text/javascript" src="...."></head></html>. What you will need to do is to edit the document being served for your client-side application.
You did not mention a language, so, let's just assume you're using ReactJS. The procedure here will be the same for other client-side pages.
After making a react project, I have this file, ./public/index.html, and in it is...
<!doctype html>
<html lang="en">
<head>
<title>Scheduler</title>
<meta charset="utf-8" />
<link id="css-root" href="" rel="stylesheet" type="text/css" />
</head>
...
</html>
All you need to do is to insert the og: tags to your for LinkedIn. Just use the tags as described by the Official LinkedIn Share Documentation. This should look like this...
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
Hope this helps!
I try to use custom web font in my markup. Can I use font which I use in my web page different from fonts in style editor "Helvetica, Georgia".
I think this publishers use their own fonts
http://i.stack.imgur.com/dhOue.jpg
http://i.stack.imgur.com/LYDew.jpg
www.i.stack.imgur.com/FDbnh.jpg
Response from Facebook "It's not an available option at the moment."
https://developers.facebook.com/bugs/1121715027891936/
there are stylesheet links in facebook’s instant article example articles:
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://instantarticles.fb.com/example3">
<link rel="stylesheet" title="default" href="#">
<title>Using Captions in Instant Articles</title>
<meta property="fb:article_style" content="Test Article Style">
</head>
the publishers above probably use stylesheets of their own. i tried putting some font definitions in a stylesheet and added it to my instant pages RSS template, but it didn’t work. without proper documentation there’s probably no other way than trial and error.
I have a github webpage. How do I make a page displaying purely a pdf? I.e my cv?
To clarify, I wish the page to be filled only with the pdf - not any headings etc.
Just commit your pdf into your repo and it will be accessible just like any other file.
For instance, my resume is committed to my repo at https://github.com/xiongchiamiov/xiongchiamiov.github.com/blob/master/about/resume.pdf and is available on the web at https://changedmy.name/about/resume.pdf (I have a CNAME set up for changedmy.name).
Rather than redirecting to the PDF, you could embed it using an iframe or something like https://github.com/mozilla/pdf.js.
This way, the PDF will be accessible within the page and you could prevent it from being downloaded without viewing it in the browser.
It's not possible to make the page display "purely" the pdf, as to do that, you would need to alter the response headers, which obviously isn't possible with github pages.
You could have a JS redirect in your index.html that points to a pdf file that's also in your github-pages repo.
Suppose your file structure is like this:-
index.html
- cv(folder)
-----cv.pdf (your cv)
Then your code should look like this.
<html>
<body>
</body>
<script type="text/javascript">
document.location = "robin.github.io/cv/cv.pdf"
</script>
</html>
You can also do this:
<html lang="fr">
<head>
<!-- note the meta tag -->
<meta http-equiv="refresh" content="0; url=http://yourprofile.github.io/cv.pdf" />
<meta charset="utf-8">
<title>Will CV</title>
</head>
<body>
</body>
</html>
See Redirect from an HTML page for more info.
Github is using PDF.js to display PDFs, e.g. https://github.com/mozilla/pdf.js/blob/master/web/compressed.tracemonkey-pldi-09.pdf , you may find iframe with URL you can use to embed your resume (e.g. https://render.githubusercontent.com/view/pdf?commit=b261203018f847c89e05bb4c03c820fad0c90672&enc_url=68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f6d6f7a696c6c612f7064662e6a732f623236313230333031386638343763383965303562623463303363383230666164306339303637322f7765622f636f6d707265737365642e74726163656d6f6e6b65792d706c64692d30392e706466&nwo=mozilla%2Fpdf.js&path=web%2Fcompressed.tracemonkey-pldi-09.pdf&repository_id=1663468#13eff6e4-ecdb-4fe1-85e4-b7a468697e26)
Facebook crawler not able to read my metatags on
http://nitansh.fwd.wf/article/travel/best-all-inclusive-resorts-for-romance/3189783/
but it successfully read the tags for the
http://nitansh.fwd.wf/nurture/
Both are on made using extending same template base.html and by injecting metatags.html into them. you can refer the HTML code by inspecting element.
While http://nitansh.fwd.wf/nurture/ shows the metadata even without having JavaScript enabled, http://nitansh.fwd.wf/article/travel/best-all-inclusive-resorts-for-romance/3189783/ shows only the following head when JavaScript is disabled:
<head>
<script src="//cdn.optimizely.com/js/687271175.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="UTF-8">
</head>
When you make the metadata available without requiring JavaScript, Facebook’s service will probably be able to parse it.
I have previously been told to use something along the lines of:
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">
I'd like to use a separate stylesheet AND html doc for mobile visitors. Is that normal? I have so many elements I want cut from the mobile version it seemed less complicated to just have a site within a site for mobile - it's own html and CSS.
How do I use the media query above for a mobile specific stylesheet and for an html? What code would I use and where would I put it?
<link href="the/directory/containing/your/mobile.css type="text/css" media="handheld" rel="stylesheet" />
Next line could be:
<link href="the/directory/containing/your/desktop.css" type="text/css" media="screen" rel="stylesheet" />
Use this method and avoid two documents. Instead you're styling one document according to the device being used to view that document.
As far as I'm concerned, you have to detect the browser server side, and serve up a different page.
PHP pseudocode example
if(browser == mobile && !isset($_COOKIES["prefer_desktop_view"])) //Pseudo code you do the checking here
{
$_COOKIES["is_mobile"] = true; //more pseudo code
header("location: mobile.example.com") //redirect solution - if
}
Media queries are CSS specific. There's no way to do this on the client side, and even if there was, the client still has to download and parse the "desktop" HTML.