Facebook og:image does not work - html

I am still trying to get a thumbnail as preview when sharing this site on facebook:
http://hundeschule-olching.de/
I have added the following code to my header:
<meta property="og:image" content="http://www.bilder-upload.eu/show.php?file=3d2bee-1459359037.jpg" />
I needed to load that image up first, even though it already is posted on facebook, but for some reason facebook does not accept its own links.
This would be the original facebook link:
https://www.facebook.com/202405526459834/photos/pb.202405526459834.-2207520000.1459358633./1184106678289709/?type=3&theater
It was already showing me the correct image in the debug tool from facebook, but when i tried to post the link in facebook, a completely different image was shown..(pick option).
After running the debugger again the image that was fetched correctly a few minutes before was gone and it told me there will be a selection shown to pick from.
So I tried to fetch the image from the Data folder on the server going like this:
<meta property="og:image" content="Data/chak.jpg" />
did not work as well.
Please help me I'm going crazy about this problem.

http://www.bilder-upload.eu/show.php?file=3d2bee-1459359037.jpg does not deliver an image, but an HTML document – at least for me. It is probably some sort of hotlinking protection of that upload service at work. You should test this with an image on a server you have control over, to avoid such problems.
And you need to use an absolute URL – a relative one like Data/chak.jpg won’t work either.

Related

How to set the color for the Discord embed in my HTML website?

I'm currently developing a website for my Discord bot and wanted to know how to set the color for the embed in HTML.
When I post my url on Discord, an embed comes up but without color. How can I change it?
With <meta name="theme-color" content="color"> it does not work.
i found that putting <meta name="theme-color" content="#00aa00"> at the top of my meta info worked
For anyone else wondering, this is the correct way to do it, and the changes should take place as soon it propagates. The issue is that Discord caches website embeds. To force the embed to update locally, the quickest method is to append an empty fragment to your URL when posting it to Discord.
For example, if the link http://example.com/ is still showing the old embed, try reposting/editing the link as http://example.com/#. Since the URL is different, Discord will not pull from the same cache. This method also has the advantage of forcing an update for anyone else that'd cached the original embed before it was changed on your website. You can append additional fragments to the URL, as many times as needed: http://example.com/#####
Alternatively, you can clear Discord's cache by opening the Chromium dev tools (ctrl + i), clearing the cache, and then reloading (ctrl + shift + r). This method will only update the embed for yourself, though if nobody else saw the original embed before it was changed on your website, Discord will show them the latest content.

LinkedIn sharing URL does not show og:image

I have a problem with og:image on sharing post within LinkedIn sharing URL. Here is test post with configured og tags.
LinkedIn takes other og:tags, but not og:image.
I've checked page with the W3 validator. There are some errors, but they seem not really important. I've checked other page with working LinkedIn sharing and there are also similar html errors.
Also have tried to use cropped image, using shchemeless URL (like in this article), add og:prefix to HTML.
Does anybody know how to fix this?
I found your are not including prefix="og: http://ogp.me/ns#" in your root HTML
And your og:image size is not appropriate for universal social media sharing. Its better you give 1600:800 img (2:1) aspect ratio. And the file size below 1mb.
Here is the link of how to give og:images for universal social media
I hope this answer would help you.
Thanks
post inspector can help...
(1) in my LinkedIn profile, on 'Edit Intro' Under Media
(Add or link to external documents, photos, sites, videos, and presentations.) I had added my website but the og:image wasn't being picked... even though I had already followed the advise as per the link in your question but image wasn't being displayed
(2) So after adding prefix="og: http://ogp.me/ns#" in my html tag and changing the "https" to 'http' for my website I tried again, but no luck, even though the Post Inspector was picking it up
(3) I removed the media (from my profile intro) and saved. then added the same website address again and it worked like a charm. This could be because the image was being pulled from the cache (and since it wasn't there, i was getting a blank)... but when i added the media again, it did a fresh pull, which was successfull
Hoping someone else who experienced this issue will be helped with this...

Why can't a datauri img be copied to the clipboard?

I have struck a strange issue. I have some images on the page which are rendered from Data URI's, and I would like to enable my users to copy them to the clipboard.
However, for some reason, neither Firefox nor Chrome seems to allow me to do that.
As an example take this page:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<title>Clipboard Test</title>
</head>
<body>
<img id="target" src="data:image/png;base64,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"/>
</body>
</html>
available here if you want to try it.
Right clicking on the image and choosing 'Copy Image' does not seem to work for Chrome, Firefox or IE11. However right click and 'Save Image As...' does work.
Since it seems consistent across all browsers, I am assuming there must be a deliberate decision not to allow such images to be copied. Is it related to CORS - since the data URI has a different origin?
Is there anything I can do to allow these images to be copied?
The background to this is that I am trying to make it possible for users of my web application to copy SVG images onto the clipboard. I am able to convert the SVG images into PNG data URIs, which I can even save on the user's computer, but I cannot seem to get them onto the clipboard. If there are other / better ways to do this then please feel free to point them out instead!
UPDATE It seems this might be related to the receiving application rather than the browser. After seeing the comments from #Mi-Creativity I re-tested using additional applications. Pasting such images into MS Paint does seem to work, while pasting them into MS Office applications does not. Unfortunately for me that is the main use case of my users.
I installed the inside clipboard tool and used that to compare data on the clipboard when using a data URI vs. a normal HTTP URI for the image. Using Chrome, in both cases there are four formats placed on the clipboard:
CF_BITMAP
CF_DIB
CF_DIBV5
HTML
The first three are identical in content. The HTML version is different - they contain snippets of the HTML document, one with a data URI and the other with a HTTP URI.
Armed with this additional information I did some more googling and found this similar previously reported problem.
It seems the likely cause is that MS Office applications are attempting to paste in the HTML version, which fails because Office does not understand data URIs, and ignoring the more useful bitmap versions available on the clipboard.
Users can work around this by using the 'paste-special' option, although it is a lot fiddlier than I would like.

Website thumbnail on other websites

I just added my personal website http://oatmeeel.com/ to my Linkedin. It appears that there is no thumbnail/icon showing on my LinkedIn (https://ca.linkedin.com/pub/oat-wongsajjathiti/63/55b/967)
How do I add some sort of an image (like favicon) to any links to my website from other websites. Sorry if I'm being unclear. Here is an image of my issue.
Thank you
I believe Linkedin uses three open graph protocols, one of them being image to scrape an image to use from your website. Scrolling through your source code I didn't see one. Try adding <meta property="og:image" content="http://URLTOYOURIMAGE" /> to the of your website and see if that changes anything.

Favicon Not Showing Up?

Any idea why this isn't working?
<link rel="icon" type="image/png" href="Favicon.png"/>
It's just not showing up. I used the exact same setup on a local practice website, and it worked fine (it was using the same picture as well). Are you supposed to just put the picture onto your website server and reference it like I did? Or is there something I don't know about?
Also, how exactly do you get a favicon to show up on IE? Yes, I've researched this, and all the methods I've found just don't work...
You can just put the icon [favicon.ico] in the root directory of your website. That's what I did.
Oh yeah, to answer the question, it could be because it is a png ;)
There is a PNG to ICO file converter online, so that's what I used to get around the IE issue. www.convertico.com
*If you test this locally, it might not show up. My local pages don't show a favicon.
Yes, you should upload the file to your web server. The reason why this works locally for you is because it is in the same file as your html document. There are two things you do to get your favicon working:
Upload the file to the same folder as in your html document. If you have a web host, such as altervista.org, you could upload your favicon to the website.
Upload your favicon to an image uploading website. You could use google drive for all it's worth, anything website that can publicly display your photos is fine. If you upload this to a server, you can find the link to your image and reference that favicon in your link tag.
Hopefully this helps!
I faced to the same problem.After checking my whole code for hours , finally I figured out the problem.I used base tag , it caused the favicon icon to do not be displayed.When I removed , the problem was solved.So, I recommend you to remove base tag if you have used in your website.
I hope it could help!