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
Related
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>
I'm extracting the URL with several techniques using ing FB and twitter as the site.. and I'm 100 percent I have the right URL because each technique I use produces the same URL. its a simple img tag in the body of the HTML with a src and alt that's it. I'm at a loss because I can't find out why this is happening... here is the code.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Zachary Henderson Professional Portfolio</title>
</head>
<body>
<img src="https://www.instagram.com/p/Brua7ssnfO1/" alt="Baccon Wrapped Cod">
<h1>Zachary Henderson</h1>
<p><em>Founder and Opperator of <b>Glossy Glass</b> </em></p>
<hr>
<h3>
Experience & Projects
</h3>
<hr>
<h3>My Hobbies</h3>
</body>
</html>
In order to load an image from a URL, you have to give a direct link to the image.
The link you're trying to load an image from is an Instagram photo link, not the direct link to the image.
To load images from Instagram, you may look at the User Endpoints from Instagram.
How can we include an image in our website to display in WhatsApp when we share a link like this?
Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="####"></script> // plugin from
www.addthis.com
</head>
<body>
<form id="form1" runat="server">
<div class="addthis_inline_share_toolbox"></div>
</form>
</body>
</html>
To add an image for most of social sharing website, you will need to add some metadata in the head tag of your website
The metatag you are looking for specifically is "og:image". Here is an example.
<meta property="og:image" content="https://via.placeholder.com/150" />
Where the content field would point to the image you want. This tag will be used when you share your website on a lot of social media (WhatsApp, Facebook, LinkedIn...)
Note that for Twitter the tag is "twitter:image:src"
For more info you can look at this https://ogp.me/
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.
If I share the link to my page via Facebook the wrong image appears. How can I control which image is displayed when my page is shared in social media such as facebook and previewed:
The image of the envelope displayed above is what I'd like to control.
Thank you
try put this code in tag head of page that you want to share, it work in my web:
<head>
<meta name="title" content="title" />
<meta name="description" content="description" />
<!-- deafult image for fb share -->
<link rel="image_src" href="http://web.com/myweb.png" />
</head>