I have a blogger (ameliaily.blogspot.com) and I am trying to get images from the blog to post as a thumbnail on Facebook and I have tried many things and none work. I still keep getting the og:image is not big enough error.
I have searched many forums and looked at all the answers I could find and it is still not working. I do not want FB to keep using my googleusercontent image as the picture (it is my personal photo and I don't want it to be the thumbnail used).
Below are the things I have tried:
Changing the size of the actual image. I've tried making it exactly 200 x 200 px, I've tried making it a rounded number i.e. 600 x 400 instead of 541 x 441.
Uploading the actual image to blogger.
Uploading the actual image to photobucket and THEN linking that image to blogger.
Adding the open graph code to my template HTML as suggested by these two forums: blogger-hints-and-tips.blogspot.com/2013/06/add-facebook-open-graph-tags-to-blogger-for-better-looking-shares-and-likes.html and www.bloggerhow.com/2012/07/implement-open-graph-in-blogger-blogs.html
5) These are the images that I am trying to use as thumbnails: http://smg.photobucket.com/user/dizzyuptheblue/media/Blogger/balancebeam-4.jpg.html and http://smg.photobucket.com/user/dizzyuptheblue/media/Blogger/image004.jpg.html
They are both huge images so I don't know why FB keeps telling me it is not large enough.
I had a look at the source of your page, and it looks like you are using a tag like this for the image:
<meta content='http://smg.photobucket.com/user/dizzyuptheblue/media/Blogger/image004.jpg.html' property='og:image'/>
The file type of the URL in this tag needs to be an image - at the moment, it is an HTML file which shows an image. You need the direct URL to the image. To get this, you can visit that page (ending in image0004.jpg.html) and right click on the image, copy the image URL and use this copied value in the tag instead - so the tag should become this:
<meta content='http://img.photobucket.com/albums/v235/dizzyuptheblue/Blogger/image004.jpg' property='og:image'/>
Try that instead and then test it out on the Facebook Open Graph debugger.
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 have a strange issue with a particular image URL.
First of all please visit this page with your clean cache (it's an under development Reddit clone in Turkish language, anyway...)
So, the thumbnail image didn't show up right? Nothing, just whitespace right? I mean no thumbnail image unlike this page right?
This is how we are loading the thumbnail image:
<div class="link-thumbnail" style="background-image: url('http://www.herkesebilimteknoloji.com/wp-content/uploads/2017/01/dunya.png');"></div>
Now please visit the image directly with your browser and return back to the problematic page. This time image showed up right?
Eventually my conclusion is; background image is not showing up unless it directly visited and cached by the browser.
So what is the mechanism/reason behind this? As you can imagine by just looking to URL, image's host is a WordPress site. So what could be the trick to prevent this image to load by background-image: url('...') By the way it's loading the image perfectly with <img> tag.
I know some wallpaper web sites doing similar trick but none of them were giving away the image directly without doing a redirection trick. I believe this case is not similar.
And last but not least; how can I handle such a case when using background-image ?
You are loading this image from a different URL / wordpress system. It seems like Wordpress itself prevents images within its "file system" to be loaded as background images from other URLs.
But you can just save that image, put it on your own site and load it from there.
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 need to change the facebook like thumbnail image, I've tried this
<link rel="image_src" href="thisurl" />
and this
<meta property="og:image" content="thisurl"/>
I realized afterwards this needs to go in the head, but because of the structure of the code I'm not able to modify in there and still decide which url I need (i can't access the variables I have for the images in there), I can modify like this
<html>
<head></head>
<body>
...
modify in here
...
</body>
</html>
I also tried creating a meta tag with javascript in the area that I can change, that does not effect it
Does anybody know a way I can tell facebook which image I want as a thumbnail without having to modify inside of the head element
The thumbnail image should go in the header just as you said, using rel="image_src" or the opengraph tag.
Specify a thumbnail image in your html body
If Facebook can't get your thumbnail image from the header, it tries to get it from the content. It usualy takes the first image that it likes, so if you want to force a specific thumbnail not included in the page, put an invisible image (using the inline css display:none) just after the tag:
<img src=”http://www.website.com/images/thumbnail.jpg” alt=”thumbnail” height=”200″ width=”250″ style=”display:none” />
Doing this, remember to:
Avoid spaces in thumbnail name (FB doesn't manage spaces too well)
Use a jpg (FB doesn't like png)
Use the right dimensions (see below)
Check your thumbnail's dimensions
Facebook doesn't like thumbnails of every size. The most important thing is the ratio between height and width that should be lesser than 1/3. So 40 & 100 would be ok, but 30 & 100 won't work. In addition, Facebook recently seems to prefer image with at least 200px in both dimensions (but don't forget the 1/3 rule).
Clean Facebook Cache
Furthermore, you should clean the Facebook cache before every test using the Facebook Debug Tool (once knew as Facebook Linter):
http://developers.facebook.com/tools/debug
Insert your url in the form field and press Debug. You'll force Facebook to overwrite its information about your link. Sometimes you think there's still something wrong but it's just because it's using a wrong cached version of your page.
About Facebook Linter, be aware that (accordingly to he OGraph documentation):
You can update the attributes of your page by updating your page's
tags. Note that og:title and og:type are only editable initially -
after your page receives 50 likes the title becomes fixed, and after
your page receives 10,000 likes the type becomes fixed. These
properties are fixed to avoid surprising users who have liked the page
already. Changing the title or type tags after these limits are
reached does nothing, your page retains the original title and type.
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!