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.
Related
I had problem seeing social preview for my links on Whatsapp and Telegram. After research, I found that Og tags created by Yoast should be inserted close to the opening <head> tag. I tried it, and it is almost working. But I have two problems I hope you help me get fixed:
1- I get only homepage link preview and nothing for other posts or pages.
2- when i share my homepage link for test on whatsapp and telegram, it doesn't output the image. Only description and title.
But when i check my urls on open graph checker, the tool shows complete information including the image! ^_^
What is the solution for this?
I need a code, maybe a function, maybe something else.. idk. I just want to get rid of it. In other words, I want to put og tags right after <head> and put this function which I'm looking for and solve the problem. hopefully.
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.
can anybody help? thumbnail not showing on my blogger post and showing following error in inspect element : Can't find substitution for tag [post.thumbnailUrl]
I tried my ways but I can't able to succeed.
When the images are hosted externally (aka not uploaded via Blogger editor) and you still want to access them via Blogger data tag, then you will need to use <data:post.firstImageUrl/> in place of <data:post.thumbnailUrl/>.
I tried to create blogger blog and I found that you need to attach image to your post.
Then after it will displayed over there.
Please try to upload picture and let me know it is not working.
Thanks,
Images hosted on different server otherwise blogger host don't be considered in Blog1 widget.
You have to upload image inside post instead of including its source from another host.
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!
I see several websites such as macrumors.com using a Facebook button that is dark blue with their facebook logo and the word share on it... looking at code it says its called FBConnectButton, but a google search for it turns up nothing useful, nor is it obvious on the Facebook website.
This post refers to it as well, but not where the code originated from:
How to modify the facebook share button?
That's the old fb:share-button, you should probably be using fb:like these days, as fb:share-button has been phased out.