How to change LinkedIn share image in HTML? - html

I developed some html pages with social sharing functionalities like Facebook, Twitter and LinkedIn etc.
But now, I have some problem to change LinkedIn image.
To share on LinkedIn I use platform.linkedin.com/in.js plugin:
When I change image from image6.jpg to another JPG file in metatag og:image, changed image couldn't be shared.
Please help me to solve this.
Thank you.

I post this answer for the developers touch Linkedin first.
The other social sites have no problem like this.
But facebook and Linkedin have this problem, because these sites have cache and save the first scraping data in cache (especially images).
Facebook cache can be removed by manually, but Linkedin cache can not be.
Linkedin cache restore scraping data for a week, and Linkedin clean cache after a week.
During this period (one week) the page you want to change image wouldn't be shared.
Because as I write, Linkedin show old data in cache , and save it again, so you have to wait for a week.
Only way to change image immediately is to change page url also.
Thank you.

So, let's think about this. Here is your what I think is the kernel of your problem:
...When I change image from image6.jpg to another JPG file in metatag og:image, changed image couldn't be shared....
At first, when you said When I change image, I thought you meant changing it in the HTML, but now I think what you mean is you are changing it through JavaScript: i.e. $(metaelement).content(newimage);.
If this is what you mean, it will not work. LinkedIn is doing a blind, simple, non-JS activated scrape/parse/cURL of your webpage. If you try to change <title> or <meta> tags with JS, the scrape will not see it. This is true with almost every type of scraped URL, in every single search engine, for instance, like google and bing (changing your <title> via JS will not be reflected in the search result). This is just how the Internet currently works!
Source: Microsoft LinkedIn Share URL Documentation.
For example, this works for me:
https://www.linkedin.com/sharing/share-offsite/?url=http://www.wikipedia.org/
See, it works fine:
If you are interested in a regularly maintained GitHub project that keeps track of this so you don't have to, check it out! Social Share URLs

Related

HTML image doesn't loud from GOOGLE CLOUD

I have minimal knowledge of coding but I just spent the past 6 hours trying to resolve this issue.
Go here to see the image I am trying to have load.
If I am suppose to chance the SRC lines, how and where do I do that?
The HTML image loads perfectly from my computer.
Like what #mlegg said, I get the same error when trying to go to your link. It looks like that is no longer a valid URL or there is some form of security on it so it's only accessible from your computer (since you said it works from your computer?).
It could also be getting pulled from your browser cache if it was a good URL at one time. Try doing a Shift + Refresh of the page or purposely clear your cache.
If you have the image locally you could try uploading to a different web based repository and src it from there.
Just to cover all bases, I trust you know how to put an image on a web page using the img tag:
<img src="http://lorempixel.com/400/200/">
You might also want to try a different image that you know is available and accessible. You can use the URL above for lorempixel.com or you can scrounge up a different image from a Google Images search.

Website image doesn't show when linking through another site

I'm linking my website through another site (for example my linkedin page) and for some reason it doesn't show any default image, instead it has the default blank image. Linking other sites, I get it to show correctly. I read somewhere that it has to do with not having my site prefixed with www. by default. Is that relevant?
Here is my linked in page: https://www.linkedin.com/in/stefmoreau
As you can see some websites show with images but the last 2 don't. They also happen to not redirect to their www. prefixed version when viewing them.
Linkedin uses the Open Graph Protocol to get images. AFAIK it's not related to the "www" part.
Take great care with linkedin: they cache what their bot retrieves, and there's NO refresh for it you can trigger.
Hence, I'd advise to first get it right using e.g. Facebook's OG implementation as they at least have a tool to let you refresh what the crawler fishes up.
Linkedin doc
Facebook doc

WhatsApp HTML Sharing Link for Image

I know you can share messages with and this is working on android and ios now:
Share with whatsapp
However I'd like to share an image trough a button on my website like someone would share an image from his phone (gallery). Is this anyhow possible?
One solution that comes to mind is uploading a photo to your server via AJAX, returning the link to the uploaded photo and then sending a message with the link to your photo using the method you described in your question. This is not quite the same as sending an image directly using Whatsapp since the recipient would only receive a link, but I doubt there will ever be a way to send an image to another application from your gallery using a webpage since that would raise some serious concerns.
Roughly, the process would like this (keep in mind that this will require some testing to get right and find a solution that works well on all platforms or at least most of them):
Create an image upload on your website. Simply having <input type="file" accept="image/*"> on your page should, on most platforms, allow you to create a button which will open a dialog to select an image from your phone's gallery when clicked. You can find a full example here or use a library such as Plupload which contains many upload methods, including HTML5 which is what you need.
Create a simple server-side upload. This depends on your language and platform, but all you need to do is store the image somewhere and return a link to it in response. If you don't want to store these images on your server, you could forward it to Imgur API and upload there.
Redirect the user to the whatsapp:// link that contains the image link.
window.location = 'whatsapp://send?text='+encodeURIComponent(imageURL);
This is the point where you need to do some testing on different platforms, though. You might not be able to redirect to a whatsapp:// link this way (since it seems like a security concern), so you may need to trick it (this is a bad idea, but I'm including it for the sake of completeness; the data-action part is from this answer):
var fakeLink = document.createElement('a');
fakeLink.setAttribute('href', 'whatsapp://send?text='+encodeURIComponent(imageURL));
fakeLink.setAttribute('data-action', 'share/whatsapp/share');
fakeLink.click();
In the end, if neither of these work, your best bet is creating a link once the upload is complete for the user to "confirm" sending which actually contains the above whatsapp:// link in the href field.
There are many factors to test and some that are implementation specific so I had to keep it vague without much code - if you come across anything else when implementing this, please mention it in the comments.

Facebook share shows wrong image

my question is about a weird cache issue with facebook open graph. My server provides an html document with the properly meta tags for facebook share utility.
Provided meta tags are: og:url, og:type, og:title, og:image, og:image, og:description, og:site_name, og:updated_time.
Now the facebook url debugger brings the correct data, all fields have the correct data, but when i lanch the popup, with the url containing the html mentioned above, the image is wrong, it shows me an old image or the site logo... i thinks it is a cache trouble, and i donĀ“t know how to solve.
I have tried some solutions but are bad solutions, like adding a timestamp at the end of querystring. This is bad because it reset the shared count.
Thanks a lot!

Images not appearing in Facebook's share link tool

I am having an intermittent issue the Facebook share link function does not pull the the link image from the page. This is happening consistently intermittently, that is, it keeps happening but not for a consistent page, image, style, etc. I can't find any pattern. Pages won't work, and then they will. Most pages work fine at the first attempt, but maybe 5% fail.
Each time it happens I check the URL in the Facebook debug tool, and it finds the article image without problem. Often, after I use the debug tool and then try to share the link again the image is found by Facebook.
The site uses Open Graph tags that check out with the Facebook debug tool.
Here is one example page:
http://zujava.com/must-have-school-supplies
Are there other factors that impact whether an image is pulled along with a URL in Facebook?
Facebook scrapes your page every 24 hours. So on the initial go unless you like the page or send it through the debugger, the image (and other meta data) will not appear.
Read more at
http://developers.facebook.com/docs/reference/plugins/like/#scraperinfo and
How does Facebook Sharer select Images?