I'm building a webapp that I want to use on a FireTV browser (Firefox) and when I do so, my Facebook images are appearing as broken links.
The images appear normally on all other devices/browsers I've tested (multiple on OSX, Android)
Initially I thought the the firetv browser wasn't liking hot-linked images for some reason as I'm loading them via the graph API, however I'm able to get images hotlinked from other sites to show up just fine on the fireTV as well.... It seems to be something specific about the facebook URLs it doesn't like? Does anyone have any ideas, or know of any tools to help debug it better?
This is what the img elements look like that I'm rendering, for example:
<img src="https://graph.facebook.com/v2.6/112816289586034/picture?type=large" />
Facebook Graph API returns a profile photo URL with a 302 redirect, which apparently is not Amazon FireTV friendly.
The solution was to include redirect=false as a url parameter on the API request, which causes FB to return a JSON object including regular image url that loads as expected.
Related
I just added an OpenGraph image to a site I'm working on and using the FB Debugger the info retrieves the correct image, however when sharing the url I still see default images being displayed (there was no specified OG image before). Is there something I'm missing here? The site uses a custom Python based framework and image is served via gzip from an Amazon EC2 instance, if that would affect the output in any way.
The problem is not with your website.
Facebook takes some time to refresh images inside facebook.com even though you can see the changes on Facebook Debug Tool.
In order to view your new image inside Facebook you can do two things:
Manipulate a little the URL you are trying to share, this way
Facebook will fetch the open graph data again.
Just give it some
time, it will be refreshed after a few hours.
There are three way to change your image you need to clear the
1) Manually clear facebook catch using the https://developers.facebook.com/tools/debug/ facebook tool
2) Add version code end of the url like ?v=1
3) write the GraphAPI code from when you click on the share button it will clear the facebook page cache.
I need to have an iframe script which I can give to my different clients, so that they can embed it in their sites. Just like Youtube or facebook does.
But it does not get rendered due to cross domain restrictions.
I have gone through every documentation for x - frame options , crossDomain ajax call.
The problem with crossDomain ajax call is that I have only JSONP to work with.
I have tried this - just go to any youtube video and get its Embed code. Its a plain iframe script e.g. <iframe width="420" height="315" src="http://www.youtube.com/embed/7N5OhNplEd4" frameborder="0" allowfullscreen></iframe>
If you inject the above script in your html, it will get rendered , but as soon as you edit the src of the iframe to youtube.com itself , it will go blank.
Facebook's iframe too gets rendered everywhere smoothly.
I am hell tortured by this thing.
Please guide me on this. Thanks in advance!
IF you look at the response headers from youtube.com it is returning "X-Frame-Options:SAMEORIGIN" so they are adding the header on the server to stop people from displaying youtube (website pages) via a iframe.
I am helping migrate a legacy application. One of the requirements is we are able to handle requests for old images.
What we have is:
New site on new.com
Old site on old.com
Images to links (imported content) point to /imgs/cat.png however the actual image is hosted on old.com/assets/images/cat.png (for now).
<img src="/imgs/cat.png"/>
I setup a redirect for all png, jpg, jpeg, gif that 302's requests for new.com/imgs/(.*).(png|jpg|jpeg|gif) to http://old.com/assets/images/$1.$2
Everything works find in Chrome, Firefox and IE9 - however it was noted in IE8 the image does not render. Its possible that it has the same issue in IE7, 6 and 5.5 however I have not been able to test this.
Does anyone know why this is happening and how to fix?
I tried setting the contentType header on the response of the 302's to image/(png|jpg|jpeg|gif) and this did not have any impact.
Any insight would be appreciated.
Turns out the host that the images were served from was not a Trusted Site in IE, where as the host that served the page was. Normally youd see a popup asking if you wanted to accept an untrusted resource, however because this was a 302 redirect (original img URL was to the trusted, but 302'd to untrusted) IE never showed the popup.
I have a QR code image that's embedded from the Google Charts API. Recently it stopped working, but I haven't changed anything in my code.
Here's the page (note the broken images): [redacted]
As you can see, the images are embedded as http:// but when they are loaded, they're redirecting to the https:// URL on the google domain, which is broken.
Why is this redirect happening?
Edit: forgot to add -- what's even stranger is that if you view the image in a new tab, then change http to https (in effect, making the url the exact one that was originally requested),
it loads fine.
Edit #2 removed the link to my test site, as I've fixed the problem.
Turns out the google charts domain has changed. The new one is:
https://chart.googleapis.com
do not use
http://chart.apis.google.com
now i'm making application for facebook with javascript.but I don't know method to change my screen application to .jpg file.
So,I would like to know how to change my application and post it
Thank you for your help.
You cannot get the screenshot done client side, however you can grab the HTML code of the page being viewed and AJAX it up to your server, have your server component transform that HTML into an image.
Use this to get the HTML content of the page at the moment they want the screen capture document.getElementsByTagName('html')[0].innerHTML;
AJAX the HTML to your server
Have your server transform that HTML into an image (depending upon server-side technology you're using, there are solutions to this) (eg http://www.converthtmltoimage.com/)
two choice, store the image on your server to be the permanent place sending back the new URL for the image, or send the content back to the client.
Have the client HTTP Post the image content to Facebook for the post, or reference the URL
It's a big project, but I commend you for tackling something like this.