When I generate a feed post using the FB.ui function I find that frequently the image I attach to the post displays as a vertical gray bar. On the other hand, if I generate my feed posts using the direct https://www.facebook.com/dialog/feed url the image works 100% of the time. If I provide the Facebook Debugger it detects it as a Photo and displays the image at the bottom. When I click the 'See exactly what our scraper sees for your URL' it says that the 'Document returned no data'. I assume this is because my image is not an open graph object? I'm very much at a loss here.
maybe try to add a random parameter after the image src like http://www.yourdomain.tld/yourimage.ext?randomnumber if Facebook tried to load that image when it didn't exists it will cache a 404 error. With a random parameter, it forces Facebook to refresh your picture.
You shouldn't provide a direct link to the image.
Utilize OpenGraph tags, e.g. share link yourwebsite.com?image=12. Use backend script to generate OG headers, namely: og:image, og:description (see http://developers.facebook.com/docs/opengraph/ for more information). This way every time someone shares the content you know what image is being displayed.
The issue was our server, it was becoming inaccessible from the outside intermittently. This was causing Facebook to cache the broken links.
Related
I am working with JS and I was looking to the GA's JS codes and I noticed something.
When I upload a page, in the console I see an image request like that;
https://www.google-analytics.com/collect?v=1&_v=j82&a=174999582&t=pageview&_s=1&dl=..
This is an image as the console said. I get this, Google inserts an image with some information about user behavior and collects the data from the request for the image. But when I look the page I can not find this "pixel", how can they send the request without including it in the page?
When you open the network tab in the developer tools you can see the Initiator of the request analytics.js:25. When you click on it, it will show you the code that adds a img tag with js var b=M.createElement("img");b.width=1;b.height=1;b.src=a.
The Browser loads the image even if it is not added to the DOM. That is why you can't find it there.
When you post a link on Facebook, it grabs an image from that page as a preview.
I'd like to be able to do the same! We're creating a link sharing website with Meteor, and want the user to be able to paste a link, and the image be rendered in the list.
Any ideas? Doesn't need to be Meteor specific at this stage!
To add an image when someone clicks on share/like etc, you can set the image for that page with
<meta property="og:image" content="http://yourdomain.com/link/to/image" />
When somebody shares it, it will use that image. You can also set titles and more:
https://developers.facebook.com/docs/opengraph/using-objects#selfhosted-creating
As indicated by Sarath in his comment you have to scrape the webpage and look for the information you need (title, META desc, an image) by using a regex for example.
I would suggest to look for META OG tags already used by many websites or, if not available, Schema.org micro data.
I think that some tools like PhantomJS could be helpful as it allows you to get the content of a webpage and even generate screen capture of this page.
Greetings from a future caveman,
I load a lot of youtube thumbnails on my page. They load from thumbnail urls I have in my db.
From time to time the video in question is changed or deleted by the author on youtube. This leaves me with 2 problems:
I'm loading the blank picture from youtube
In my db I still have this image url listed.
What would be a solution for figuring out the "missing video" thumnail, NOT displaying it, and updating my db. I need to fire an event by recognizing this image. Note that this is the default "missing" image that can appear different urls. So it's not a simple matter of seeing a particular url.
I also thought of using youtube api but making a bunch of calls every time the page loads seems counterintuitive to me.
I need to detect the image and fire so some of even for JS/jquery to use to update my db via ajax.
Maybe I'm overthinking this so if anybody has another solution to my problem I'm open.
I have read this: Javascript - Detect Youtube Default-Thumbnail
But the solution above does not seem to fit. The first option in the answer is what I'm doing now and it doesn't work - because youtube serves the default image even when you use 1.jpg, or 2 etc.. (which is what I use). Basically the video is gone.
The second option (base 64 encoding, creating canvas element etcc) is not really expanded upon and seems rather like using a chainsaw in place of a scalpel.
Thanks
I discovered that if I'm using
http://img.youtube.com/vi/<video_id>/mqdefault.jpg
,
it will display the trimmed (no black borders at top and bottom) YouTube thumbnail. The dimensions of this are 320 x 180px.
Whereas if there is no available thumbnail, you will get YouTube's fallback thumbnail, but that is actually 120 x 90px.
So here's a much easier way for figuring out if you got an invalid thumbnail (as compared to reading base64 data from the <img> tag).
Hope this helps.
I just noticed when I click a photo on my facebook news feed, the window location changes, the photo appear's, but the content from the previous page is still at the back of the photo. You can see it because the background of the photo viewer is transparent.
How can this be achieved?
Well. the URL changes to something like this: /photo.php?fbid=10150643780577073&set=a.446526812072.240769.709452072&type=1&theater
There is enough information in the query string to know what page the user came from. This information is used to display the photo in the foreground and to include the original page in the background. So both pages use some if facebooks backend code to generate the html frontend and in the case of the photo.php page include something extra: the forground picture plus the necessary css & scripts.
In the future it will be using HTML5's history API. But for cross-browser compatibility and backward-compatibility use the history.js library.
Pre-HTML5, the way to set the location without causing a page refresh is to append a # anchor position to the url, as though you had moved to an anchor position (traditionally used to move to and link to a specific paragraph on a page), e.g. url/to/page#someposition.
This generalises to representing a page state in the anchor; for example, a specific message in gmail has the URL https://mail.google.com/mail/?shva=1#inbox/2h42c4ahe7fge7 etc.
If you use history.js, you should be able to easily upgrade to pushState etc as and when they become widely supported.
I have come across html2canvas thanks to a previous question of mine. What I am confused about is how could I implement it to do the following:
Create a live thumbnail of a live website.
When the live thumbnail is clicked it loads a bigger image of the website.
What would be the best way to feed the uri's into the script?
All images will have specific hxw set in the image tag or the css for the specific class.
If the website you are trying to create a thumbnail for is different from the actual page the user is on, you'll need to first download the HTML of the page to your server (same origin), after which you can wrap it inside an iframe and create a screenshot of that.
The screenshot generated will be 1:1 size with the actual site, so to create a thumbnail you'd have to resize the screenshot.
The script doesn't accept HTML, url's or anything else except for DOM elements as an input for rendering a page. As such, the only way you can generate a screenshot using the script is to have it either load on the page where you want the screenshot to be generated or load the page within an iframe (under same origin, so you'll need to download the source through a proxy if you use cross-origin).