I use plyr player on my page. Basically the only code that is on the page is this:
<div class="container">
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="123123132"></div>
</div>
<script src='https://data1.132231321.cz/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
</script>
Everything works fine. Just when I send such link to someone over messenger / whatsapp they see the code in the preview I use a custom made CMS similar to WordPress where I added the plyr script code in the post body in the HTML code.
NOTE I am not able to edit nor modify head in html, only div class="container" in the html body. See the url https://zz.zustatzdravy.cz/skryte/90-test-a.html . The url might work in the future.
I am not using WP but something like WP. It is custom made it has got no plugins. I can use custom css
is there any way I can hide the code from the preview?
UPDATE: Facebook sharing debbuger shows what I mean
I think adding open graph / meta description will work. For more information check out https://ogp.me/
In the code replace all instances of {{TITLE TO SHOW IN PREVIEW}} and {{DESCRIPTION TO SHOW IN PREVIEW}}.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{TITLE TO SHOW IN PREVIEW}}</title>
<meta name="title" content="{{TITLE TO SHOW IN PREVIEW}}">
<meta name="description" content="{{DESCRIPTION TO SHOW IN PREVIEW}}">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="video.other">
<meta property="og:title" content="{{TITLE TO SHOW IN PREVIEW}}">
<meta property="og:description" content="{{DESCRIPTION TO SHOW IN PREVIEW}}">
</head>
<body>
<div class="container">
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="123123132"></div>
</div>
<script src='https://data1.132231321.cz/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
</script>
</body>
</html>
Additionally I recommend adding the following below the og:description meta tag.
<meta property="og:url" content="{{ URL OF PAGE }}" />
<meta property="og:image" content="{{ PREVIEW IMAGE }}">
{{ URL OF PAGE }} in this instance being the current URL... so if the url is https://example.com/thevideo then content for og:url would be https://example.com/thevideo
{{ PREVIEW IMAGE }} an optional image file to show as a preview. This is the full url with domain e.g. https://example.com/img/preview.jpg
You can use the Facebook Sharing Debugger tool to test.
You mentioned you're using a CMS. You might need to find a plugin which modifies the meta header tags. In WP you can use something like Yoast SEO.
Update based on only being able to update the body: Looks like in your specific situation the CMS is already adding the og:title and og:description. The og:title is the page title, and the description is a snippet of the text on the page.
Using the open graph tags is really this only way you can modify the title, description and image that appears in the preview of the message. Therefore the ideal situation would be dependent on the CMS you're using.
Solution 1: Move the javascript to a file.
The following code isn't added to to the description:
<script src='https://data1.azami.cz/124141/users/plyr/plyr.min.js'></script>
Therefore if you can create another javascript file with the const player = new player... code then you could also include with a tag similar to this:
<script src='https://data1.azami.cz/124141/users/plyr/a_new_file_with_script.js'></script>
With the solution 1. The description should now be empty.
Solution 2: Prepend a description to the body
If you can't create a new file on the server for some reason, and you can really just modify the body, then for now the only thing I can think of is a little hack around it which would add a new description but might not remove the javascript code from the description. Unless maybe if this new description is longer than 300 characters.
The hack is adding something like the code below before including the script tags for the video. It description would be hidden when viewing the website but prepended the the description tag.
<div style="display: none">Here you can put a description of a video. Or a general description for the website. It will be displayed as the description when sharing via messenger. Maybe if you make this 300 characters or longer, then the script won't show up in the description. This text including this note is 300 characters.</div>
Related
I would like to add the image present at this link http://startup.registroimprese.it/isin/search?0-IResourceListener-data-resultRow-22-resultViewPnl-companyCardContainer-logoImg&antiCache=1628599295826 to my html page. Therefore, I have added the above URL to the "src" attribute in the < img> tag. My HTML code looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<img src="http://startup.registroimprese.it/isin/search?0-IResourceListener-data-resultRow-26-resultViewPnl-companyCardContainer-logoImg&antiCache=1628599295828">
</body>
</html>
However, the image is not displayed when I render the page, and this is what I see.
blank page
What I expect to see instead, is the image at the link correctly displayed on my html page. Any idea what is wrong and how I could fix it?
NOTE: I know I could download the image locally and then add it, but I specifically need to find a solution to add the image from the link, and not from a path on my local computer.
Newbie question from a UX designer been trying to get this working for 2 days now.
I am trying to test out matthew dove's inject script in codepen
https://github.com/Matthew-Dove/Inject
I have copied the raw github file using jsdelivr into the Pen settings. When I click on the eye icon I can see the .js file.
I have copied the example code provided by Matthew into the html panel.
But as you can see in the image above the website does not get injected.
My codepen is https://codepen.io/lisatw/pen/oNXxgMR
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1,width=device-width" name="viewport">
<title>Inject</title>
</head>
<body>
<h4>Below this heading the world's first website will be injected</h4>
<div data-inject-src="http://info.cern.ch/" style="height: 175px;"> </div>
<h4>Above this heading the world's first website will be injected</h4>
</body>
</html>
I have tried with and without the call to the .js library
<script src="./inject.js"></script>
Any help mightly appreciated.
When you add a script on CodePen by URL, this URL will be injected as is before </body>. There is no need to explicitly adding script like this:
<script src="./inject.js"></script>
Because right after that, CodePen automatically adds another script:
<script src="https://cdn.jsdelivr.net/gh/Matthew-Dove/Inject#master/src/inject.js"></script>
But the code doesn't work for another reason. This issue applies even to Matthew's https://rawgit.com/Matthew-Dove/Inject/master/src/example.html example, yahoo APIs (https://query.yahooapis.com/v1/public/yql) under the hood no longer available. https://twitter.com/ydn/status/1079785891558653952
Unfortunately, there is nothing you can do about it.
I'm building a course site for my students, with different 'chapters' accessed from different links. I would like to be able to have two or more popups of the same page so I can view different parts of the same chapter side by side. Is this possible in highslide (I don't think it is...). Any solution, using highslide or not, would be appreciated!
Here's a jsfiddle demo that lets you open multiple HTML popups. In this case, both links are opening the same page of stuff, but that's just to keep the demo setup simple - normally you would have each link opening a different iframed page, but for your specific requirement, I guess you'd be opening the same page twice, just like this demo. Open the first link, then drag it by the header to one side, and open the second link.
http://jsfiddle.net/MisterNeutron/Qk6U6/1/
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo by MisterNeutron</title>
<script type='text/javascript' src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<script type='text/javascript'>
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
</head>
<body>
<div>
<a id="thumb1" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">First iframe</a>
<br><br>
<a id="thumb2" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">Second iframe</a>
</div>
</body>
</html>
I have used Dreamweavers menues to do give my site a dropdown list that I can then edit. Perhaps "open in new window" when you click the link will work. I have found that most clicks will default to open in the same window.
Firstly, I've done some Google'ing and found the IE 'conditional comment' and understand it's non-standard. I also get the impression there is no standard HTML 'IF' so my question is about what I need to do to achieve the same effect (Javascript perhaps?)...
I'd like to conditionally include an external .html file (from a selection of external .html files). Specifically, the external files each contains nothing but a <meta> element on a single line. Alternatively is it possible to have multiple inline <meta> elements in a HTML file and to 'choose' one conditionally (effectively ignoring the others)?
Basically, can I do something that would achieve the same as one of either of these pseudo code examples?
Example using pseudo code for external files...
<html>
<head>
if some-condition
<!--#include file="meta1.html" -->
else
<!--#include file="meta2.html" -->
...
</head>
...
</html>
Alternative example (again pseudo code) for selecting alternative elements directly...
<html>
<head>
if some-condition
<meta name="viewport" content="abc" />
else
<meta name="viewport" content="def" />
...
</head>
...
</html>
NOTE: In all cases the <meta name attribute will always be viewport - it's just the content attribute which needs changing perhaps with some other attributes.
EDIT: The main condition would be the type of client. One example is that to help correctly size web app pages on an Android device you can use certain content data for the viewport that only Android devices understand. For conventional browsers, I would set a default set of data for content (for width/height for example). This could also be expanded for other clients such as Google TV, iOS etc etc.
Using Javascript:
document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="abc" />' );
Demo: http://jsfiddle.net/ThinkingStiff/ccX5p/
You could do this with javascript / jQuery quite easily.
Set your conditions and then append() to the head.
Example:
if(//condition here){
$('head').append('<meta name="viewport" content="abc" />')
}
else{
$('head').append('<meta name="viewport" content="def" />')
}
if you are using a server side, like asp or java, the thing becomes lot easier for you.
i shall consider you are not using server side coding.
use javascript for getting the browser name (navigator.appname I guess).
then you may use DOM to add <meta ..../> tags inside <head> element.
document.getElementsByTagNam('Head').appendChild(metaChild);
I've attached a Facebook like button to a friends parents home page for there business but the problem is that on when someone likes the link, on the Facebook page it shows a different logo attached to the message on Facebook (a Austrian flag instead of an Australian). The code for the like button is
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=17923769214223454&xfbml=1">
</script>
<fb:like href="http://www.velumount.com.au/en/" send="false" layout="button_count" width="450" show_faces="true" font="">
</fb:like>
And the website I've placed it on -
http://www.velumount.com.au/en/
You've to set the metatag og:image, i.e. placing in your head something like
<head>
<meta property="og:image" content="http://www.velumount.com.au/config/logo-en.gif" />
</head>
by the way, you can always check how your link will look like with Facebook URL linter