We added Facebook Open Graph tags to our site NowGamer.com a few months back and everything worked perfectly initially. But in the last few weeks we've noticed that on about 2/3 of images the og:image would not display when an item was shared or liked. Sometimes going to the linter would scrape the page and the image would then be available.
But in other instances the image thumnbnail doesn't appear in the linter - although the link to the full image displays it at full size OK.
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.nowgamer.com%2Fnews%2F1298151%2Fassassins_creed_3_join_or_die_freedom_collectors_editions_details.html
The images all fit within the 3:1 parameters although they are relatively large (they have to be as they are screenshots for video games). Here is an example of exactly the same type and size of image that does display in the Linter and on shares/Likes
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.nowgamer.com%2Fps3%2Fps3-reviews%2F1293635%2Fresident_evil_operation_raccoon_city_review.html
I can't see why one works and the other doesn't. Any suggestions?
The thumbnail's width AND height must be at least 50 pixels, and
cannot exceed 130x110 pixels.
http://developers.facebook.com/docs/share/
Strange: I would have gone with a cache problem which I've also experienced before. For pure testing purposes if you want to attempt to refresh a different version of the URL try adding ?v=1 or some other parameter which makes the URL unique. This forces Facebook to go and get the URL again so you can make sure the images are working as expected.I think YouTube have also had this problem over the last few months http://groups.google.com/a/googleproductforums.com/forum/#!category-topic/youtube/sharing-and-connecting-on-youtube/YnTqofAhcN8
Related
Now that I’ve mostly got everything on my website (WordPress, Theme: Twenty Twenty) right the way I want it to be, there is still a problem for which I can’t find a solution. I have activated the “Cover-Template” on all pages. Everything looks as it should on the desktop computer. Not on the mobile phone, however, at least not in Safari and Chrome. I solved the problem that the background image or the cover template is too wide on the side and is not automatically adjusted with “width: 100dvw” and “height: 100dvh”. Unfortunately, however, the “entry-title” and the “scroll indicator” is still not displayed in the “viewport”, but below the visible area. With two-line titles you can at least see a little of the upper part, with one-line titles nothing at all. In Firefox and Edge everything works… the image is fully displayed, as well as the title and the arrow. What can I do here?
I would be very happy about a solution! Thanks in advance.
The page I need help with: admin4you.net
Warning: I'm a noob. The little I know comes from fiddling around.
I maintain a hobby website of images created in bootstrap 3 and I would like to have a responsive rollover image that also links to the full size image.
I have been able to complete the responsive rollover part, but I can't figure out how to add the link to display the full image.
Here's what I have so far:
https://jsfiddle.net/11cmcznn/
HTML:
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div>
I can't post the CSS because I don't have reputation points yet.
Any help would be much appreciated.
Put href before the div and make sure you close the parent div too. Like this
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div></div>
Well I've run into another problem. I have the rollover image working properly including linking to the full size image. But for some reason whenever I add the code to the webpage and the style sheet, somehow the webpage is looking for the style sheet in the wrong place on my website.
I have a style sheet "default.css" that I use for all my webpages. This css sheet is in the root of the website. But for some reason the webpage with the rollover image will not display the image, and when I inspect the element within Chrome it gives me 404 error stating that the default.css is not found in a certain folder on the website. I've never had the default.css in any folder besides the root.
So somehow the webpage is looking for a style sheet in a place where none exists, and I have no idea why.
If I copy the default.css style sheet from the root into the folder it's looking for then the webpage loads properly, but I don't want to have to maintain two identical style sheets. I just don't know how the style sheet got attached to the webpage.
I'm sorry for the vagueness of this problem, but I don't know enough to make a more informed question.
Using the FB debug tool for http://www.talkjesus.com
https://developers.facebook.com/tools/debug/og/object/
I fetch new scape info without a problem, except one last thing that just won't kick in. The op:graph image shows default Xenforo pic instead of mine. However, the weird thing is if you click the link, it'll actually show my version (chat icon with 3 people group). It still pulls old XF pic too if I try to post on FB. I've confirmed with XF support it's not them, obviously anyway.
Any idea?
Your correct image is at the following URL...
http://www.talkjesus.com/styles/default/xenforo/logo.og.png
The image Facebook displaying on the Facebook Debug page is a cached copy of your old image. The URL for that image is...
https://fbexternal-a.akamaihd.net/safe_image.php?d=AQBAyXWZeLwaPVbO&url=http%3A%2F%2Fwww.talkjesus.com%2Fstyles%2Fdefault%2Fxenforo%2Flogo.og.png
The good news is this image caching should not have any effect on how your page is shared on Facebook.
If it does cause problems renaming your image and updating the OG tag will fix it.
I have an ember site that is mostly static. However many of the pages have large high res images and image sliders that sometimes flicker when you navigate to a new page for the first time or load the site for the first time.
I was curious if its possible to use this feature: http://discuss.emberjs.com/t/found-a-fun-hidden-loading-feature/1677/5 on just images, not actual data from a server?
I created loading_route.js with one line:
Ew.LoadingRoute = Ember.Route.extend({});
And I created loading.hbs but nothing is happening.
Thanks!
I don't think you can do that with a Loading Route - but I don't see a reason why you can't do that using jQuery?
That's my first question in here, I've been looking through old questions, but nothing matched with my problem. Here it is.
I'm creating some site with one main functionality. We want this site to display content of other sites, but in a specific way. User chooses let's say two pages from five and want to see their content. He clicks button 'Display' and goes to next page where he finds let's say view from web cam, and here comes problem.
I want to cache image that is hidden behind the url from which image was downloaded, so after refresh image won't be downloaded again, but browser will get it from cache.
I've been looking through documentation of Django, but nothing seemed to be useful.
I know that I should:
1) create table which stores cache
2) add to settings.py some CACHE_BACKEND = ...
3) use #cache_page(300) before declaration of function which returns content which should be cached,
but... it doesn't seem to work.
I will be greateful if someone tells how to solve that problem, maybe with some sort of code showing the mechanism.
Cheers,
Chris.
I think that right way to do this will be to store image somewhere on your server and delete it later with cron or something similar.
Django cache framework wasn't created for the purpose you are trying to use it.