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.
Related
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.
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.
Whenever a user Likes/Comments on a page of my website, and it subsequently appears in their timeline as a post, the image/icon that appears with the post is one of the social icons from said page (i,e the StumbleUpon/Tweet icon) and not the preview image.
Is there a way to set the preview image that appears with the timeline post when a user Likes/Comments on a page?
Here's an example of what I am referring to (in this case with a StumbleUpon icon from the page):
Have you specified tag in head of your page.
<meta property="og:image" content="tag value"/>
where "og:image" is the URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
This image is pulled from the website on Facebook page when a user likes or comments on your website where like button is placed
You need to have og:image meta tag on page. Image specified that way will appear in published post (no matter where post is displayed timeline or feed)
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!
first off a short explanation... the following two lines assure that once my website is shared on facebook a custom image (share-thumbnail.png) is posted.
<meta property="og:image" content="images/share-thumbnail.png"/>
<link rel="image_src" href="<images/share-thumbnail.png" />
Can you guys think of any creative way to overwrite that behaviour when I click a specific sharing link on my page?
E.g. i have a <a class="special-sharing" href="#">Share with special image</a> anchor on my page and when that one is clicked I don't want to use the share-thumbnail.png defined in my header.
My thought was to use jquery to listen to click events on the .special-sharing link and then… preventDefault(); and change e.g. the content attr of my meta tag in the head to a new image src. Then call the facebook?sharer= blabla.
How would you solve that?
(Caveat: I'm not familiar with Facebook's API, just Javascript and the web in general.)
Unfortunately, you can't.
While it's possible to affect <meta> and <link> tags with jQuery (or Javascript in general), it isn't possible to make changes outside the currently-loaded copy of the page in the user's browser. When the link to Facebook is called, the current page is discarded and Facebook's page is loaded, which then performs its own hit on your page to get the og:image, which will still have the original value because the file on the server hasn't changed.
Instead, you could perhaps set up your server so that you can customize the image via the URL. For example, have http://www.example.com/mypage.php produce the default value for og:image, but http://www.example.com/mypage.php?special-image=foo.gif change the value of the <meta> tag. You could then use Javascript to change the sharer passed to Facebook so that it uses the special URL that points to the special image.