I got a little issue,
when I share my portfolio in Facebook or Linkdin I get a preview of the web as an image but with a wrong image(one of the images included in the code itself).
how can I fix that so that the preview image will be the the web image?
thanks
If you've already generated the image, I think you need to use this: developers.facebook.com/tools/debug to rescrap it and try and get FB to pull in the correct image.
There's a section, in the screenshot, that allows you to bulk clear FB caches if it's more than one URL you're having issues with, if it's just the one, the first tab should be what you need.
Related
I quite new to coding and having trouble with the og tag when sharing on social media. Both facebook and Twitter pull the right url image but for some reason Linkedin pulls another image from my images folder (a send icon). I truly can't work out what I am doing wrong. I have tried to reset the cache from linkedin and have used their inspector tool. You can see the image it pulls. It gets all the other og tag data fine.
I have tried the Linkedin inspector, I have cleared the cache and can't see what else I need to do. Any help would be truly accepted as I am trying to launch a new product.
I managed to fix this in the end. I will leave how here in case other newbies are stuck.
I placed the sharing image on my shopify site to get the url to use for the image. As I placed it on shopify, they automatically increased the image size to 488 x488 pixles which was too big for linkedin. Linkedin then just took another image.
I'm trying to share in my Facebook wall a personal link and it's showing this image. I tried to modify metadata, etc in my website, but still same problem. Please any suggestion to fix it, thanks
Use: https://developers.facebook.com/tools/debug/
Use the sharing debugger and then scrape the page again to update it.
Also make sure to use the property: 'og:image' on the image you want to show.
I know I can add images to a html file by the following syntax
<img src="*****">
But my question is can i copy any images link from the web and add them to my html file?
i'm not talking about the copyright laws regarding this, just, can every image link be used as the image source in html?
I was writing a code in codepen where i embedded a link to an image from devianart, but the image didn't show up.
I think it depends to the website policy; Some websites don't let you to use their hosted images in your webpage, and some others do.
this is what i find on W3schools:
Definition and Usage:
The required src attribute specifies the URL of the image.
Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
The URL of the image.
Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/image.gif")
A relative URL - points to a file within a web site (like
src="image.gif")
Hope this is helpful :)
make sure image fully open in your browser tab/
i also check it but it work in codepen may be you doing something wrong first need to write clear what you want
try this image tag in codepen
I am having trouble getting the proper image to show up when I a link to my website in a status update. It is either grabbing an image from the front page which I don't want it to use (links to the front page) or no image at all (links to specific pages).
I found several tutorials that all gave the same advice about using a meta tag to specify which image to use, which I have done. Example Tutorial. Example:
<link rel="image_src" href="http://URL-TO-IMAGE" />
This had no effect. The article mentions that Facebook caches these lookups and provided a link to a URL Debugger, which was supposed to scrub that cache for me. I used it to verify that my meta tag was inserted properly (it was), but it had no effect on new status updates. Am I missing something? The way the tutorials talk gives me the indication that using this debugger will clear the Facebook cache for the page so that the next lookup will load and re-cache the proper image. Instead it seems that all this does is bypass the cache this one time for the purposes of testing.
Is there a way to actually force clear this cache, or do I just need to wait? It's been several days. How long does this cache take to expire?
Steps to Reproduce:
Visit Facebook News Feed or Timeline
Enter URL of my website in status update (can provide if neeeded)
Expected Outcome
The Favicon of my website is loaded as the icon for the status update
Actual Outcome
An image of a person (appears in the sidebar of our site) is used as the icon (for links to the front page. Links to the inner pages of the website load no icon at all.)
Further:
Visit the URL Debugger
Enter URL for website
Verify proper icon is loading
Post link in new status update.
Expected Outcome
FB's cache will be updated and the Favicon will now be used.
Actual Outcome
Nope... still the person from the sidebar on front page links and no icon at all for inner page links.
UPDATE 2/22/2013:
The image that loads when I post my URL to Facebook has changed! But it's still wrong :(.
I went to test it this morning and I now have an additional image as an option, which means Facebook did update what it's loading from the site, but it's still not the image that I specified in my tag. It's just grabbing another image from one of my other side bars, and I'm still not getting an image at all for my inner page.
It's weird.... the URL Debugger tool grabs the correct image, so I don't think the problem is my Meta tags. That's what the URL Debugger is supposed to help me identify. I think there's some disconnect between the lookup and what Facebook actually posts. I think this is a problem with Facebook, unless I'm missing something huge, but I don't see it....
UPDATE 2/25/2013:
I've made progress, but there's still something weird going on. Martey set me straight on the using the og: meta tags rather than just the tag. The tutorial I had been following said to ignore the Open Graph warnings, but once I started paying attention to them, I got some good information. Like, it actually said that my image is too small and that it will use another image instead. Guess I should have paid attention :)
Anyway, so the issue was that the favicon is too small. According to the Open Graph warning, it needs to be 200 pixels in both directions. So I grabbed the actual header logo and tried to use that. It's 340 pixels wide. Oops, it was only 164 pixels tall.
So I used The GIMP to set it onto a transparent background that was 200 pixels tall and tried again, but it's still telling me it's too small. It's no longer telling me that it needs to be 200 pixels. It just says that it's too small.
I'm stumped again...
Update 2/25/2013: Issue Resolved
The problem was transparency. I filled the background in white and tried again and now it's loading fine.
Thanks for your help, Martey!
Instead of using a third party tutorial, you should refer to Facebook's official OpenGraph documentation. They recommend using an og:image metatag to refer to document images.
As I noted in my comment, issues with data not updating on Facebook is likely to be the result of misformatted or wrong OpenGraph metatags. Without the URL of the troublesome page, or information on the URL Debugger's warnings, it is difficult to recommend solutions.
I have a quick question, hopefully someone can help me. I recently took a microsite live for a client and everything went smoothly except for a facebook integration piece. When a user attempts to Share the site, the thumbnail pulled for the share reflects the logo from the main site, not the microsite. I am baffled because this logo can be found nowhere on the page. Additionally, I have included the requisite meta information in the header of the document
<meta property="og:image" content="http://www.rethinkyourdrinknow.com/images/ryd/logo2.png" />
but for some reason it still pulls the other image. Does anyone have more experience with Facebook share that could possibly lend a hand?
Thanks,
Jamey
Try using the Facebook Linting tool (now the debugger)
http://developers.facebook.com/tools/debug
Enter the URL of your microsite, the tool should tell you whats going on.
It seems that OGP only likes thumbnails which dimensions are the same or more than 200px. If you upload an image and set it as thumbnail (which dimensions are, by WP default, 150x150 pixels) you're going to get an error message if you run your post's link into the FB debugger like this:
Open Graph Warnings That Should Be Fixed
Small og:image: All the images referenced by og:image should be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the recommended specification.
So I manually enlarged an image into one of my previous posts to the actual 200x200 pixel size and tadadah!!! Facebook shares the proper link and proper image also from WP homepage or single post.
Expanding on #Andy's answer, you can certainly use the Debugger tool to see how facebook views your URL. It will tell you exactly what og:tags are missing/malformed.
One thing to note is that facebook does some caching on og:tags of URL's that have been shared; but using the Debugger tool will refresh facebooks caching of your URL.
I had the same problem with LinkedIn. I added <meta property="og:image" content="https: and so on to my index.html, but LinkedIn kept pulling the wrong picture because it had already cached my site.
Here's the trick to force the embedding app (LinkedIn, Facebook, etc.) to treat your website as never cached before and therefore read it completely from scratch, including your new og:image.
When you input your full link to the social media site, add ?01 at the very end of it. E.g. https://example.com?01 or https://example.com/my_project/?01
Just tried it and it worked like magic!