I am trying to fetch URLs using Google App Engine's urlFetch service and implement a proxy site. Sites like Twitter and Facebook appear disfigured as if they are missing the stylesheet, even Google is missing the Google logo but Yahoo opens all fine, I can't understand why.
When you use urlfetch, it fetches the HTML of the page, and none of the images, CSS, JavaScript, or any other resources.
Yahoo looks fine presumably because they specify their images and CSS using absolute URLS (e.g., http://www.yahoo.com/image.png), so when your urlfetch'd page displays, it includes full image URLs from yahoo.com. Keep in mind, when someone doesn't have access to yahoo.com, those images won't appear on your proxied page either.
edit: It looks like Yahoo inlines their CSS into the HTML page itself, which would explain why it works in your fetched copy.
Google appears without CSS/images because their CSS/images are specified as relative URLs (e.g., /image.png), and your proxy doesn't have an image at /image.png
You'll have to parse the urlfetch'ed page content to find images and CSS that need to be fetched and proxied as well. Just be sure to handle relative URLs like /resource.png as well as absolute URLs like www.foo.com/resource.png.
Related
I need to store images on Firebase and display them in my React application using Firebase.
This is not an image upload feature. I am talking about images that will be displayed in information static pages.
The closest resource I found was Firebase's Cloud Storage, however, this aimed at apps that allow users to upload their own content.
I also found Firebase's Hosting page, I followed some of the steps which include installing the firebase CLI. However, it doesn't make it clear how to save my image assets there. Maybe FTP?
The best alternative I found so far was to save my images in my app's public folder, however, from a performance standpoint it would be more interesting to have those images saved on Firebase directly and use their URLs in my application.
The solution was simpler than I thought.
You can simply access your app page on Firebase, go in the "Develop" section and choose "Storage".
In the "Storage" page you can upload files and a default public URL will be generated for them. I chose the "Download URL" for each image that I uploaded.
Based on my custom URL parameters I process, I am trying to modify dynamically a meta tag I have id'ed in index.html like so:
<meta name="og:image" content="http://example.com/someurl.jpg" id="ogImage"/>
The code below in my home.ts seems to be working
document.getElementById('ogImage').setAttribute("content", Media.ImageURL) ;
I can verify it is via the browser dev console/elements.
However, when I view from facebook via their ojbect graph debugger at
https://developers.facebook.com/tools/debug/og/object/
It appears to see the default
http://example.com/someurl.jpg
as if the index.html is shipped before my home.ts gets chance to make the update.
Perhaps, my understanding is flawed and there is better way to do this.
Thank you.
Note1: initially, I was thinking I had to make some angular binding between index.html and one of my services but I could not locate any sample code, the closest I came to was this post
How can I update meta tags in AngularJS?
But I don't know how to apply it for my ionic2/3 code, so I opted for the document.get approach.
Note2: the ultimate goal here is to share a link into a social media (web or app) like facebook, a messenger like viber/skype, etc... and have it resolve to meaningful images, title, description to drive the visit back to the site via browser, or app if the user clicking on the link is on a mobile device with my app version of the site installed on his device.
Note3: if you decide to point me to ionic deeplinking please provide code to match above, because I could not understand how to apply to my case.
If you are trying to implement dynamic open graph meta tags values in your pages, you will need a server-side scripting language like php. Such a script will run on the server, update the pages as needed, then the pages will be served to the requesting site or application.
client-side scripting (ie. JavaScript) is usually ignored when a site or app is merely visiting your site/link for the purpose of extracting (aka scrapping, parsing html) information such as the one provided by the open graph meta tags (og:title, og:description og:image...).
Hi I am developing an ionic app using firebase as my database.
I read this question.
I understand it and have a more specific question.
I uploaded an image on amazon s3, imgur and filestack, and tried all three in firebase using data:url/<the url of image> and data:image/jpeg;<url of image>.
Am I typing something wrong into firebase?
The image does not come up. I do not want to write code in the app to upload the image etc, I just simply want an image to display on the app beside some data corresponding to an item in my firebase database.
I have read about base64, do I have to use it in this case?
(Optional) Perhaps If you could expand on the steps of doing this:
"You can use a filepicker to get the image file. Then you can host the image however you want, i prefer amazon s3. Once the image is hosted you can display the image using the url generated for the image."
I don't have much ionic experience, but why not just save the direct path to the image url and not include the data:url/ portion.
Simply store the url in firebase and then when it's retrieved inject it into your img src.
I have a website created in DotNetNuke and have a Cloudfront CDN.
Is it possible for DNN that any static content (i.e. images etc.) which is uploaded and used on the website gets uploaded on CDN and their respective URLs gets translated to those from CDN automatically.
For example: I upload abc.jpg on the website and use it on a page as follows:
<img src="images/abc.jpg">
Now DNN should automatically push this image to Cloudfront and hence the URL should now be like:
<img src="xx.s3.amazonaws.com/images/abc.jpg">
Is it possible to achieve such functionality in DNN?
Why don't you put the whole side behind CloudFront? It supports POST/PUT methods as well as dynamic objects (Cache-Control: no-cache).
What I would like to achieve is to let AppEngine Image Service to generate a serving URL with file type as an extension.
For example, in my local, a serving url may look like:
http://0.0.0.0:8898/_ah/img/u4EXyF53eLVd8s5wHrE3tg
Is it possible to override it into the form of something like
http://0.0.0.0:8898/_ah/img/u4EXyF53eLVd8s5wHrE3tg/filename.jpg
The reason I need to do this is I am using Flowplayer and hope to add a splash image by using the playlist function. However, it looks like Flowplayer won't recognize image file without a proper image extension.
There are no "files" on the web, just resources. And every resource has an Url. The type of the resource is defined by Content-type header. There is no such thing as "file type as an extension" on the web.
Image service sets the Content-type properly so all standard clients should be able to display it.
Also, it seems that Flowplayer splash images are just a normal images displayed in HTML, so there should be no problem with this.
Can you display your Url normally in HTML?
Actually there is a workaround for the solution.
Basically, you can add a fake query parameter at the end of the url, and Google will treat them the same.
So, for instance, a url http://0.0.0.0:8898/_ah/img/u4EXyF53eLVd8s5wHrE3tg, you can make it
http://0.0.0.0:8898/_ah/img/u4EXyF53eLVd8s5wHrE3tg?.png or http://0.0.0.0:8898/_ah/img/u4EXyF53eLVd8s5wHrE3tg?.jpg
depending on your need. Google won't care about the query parameters, but I got what I need and my client software (Flowplayer) is happy about this new link.