I have implemented TimelineJS on my site, Pixic.se, using data from mySQL database and format it through PHP. Everything is working fine. But there is a feature in TimelineJS called PagePeeker, which is rendering a screenshot of links that aren't links to supported sites, such as
Youtube
Wikipedia
Google Map
Flickr
Twitter
Vimeo
SoundCloud
or writing a blockquote.
Problem
The first time I got the TimelineJS to work properly it rendered screenshots for the links I have in my timeline, including my own site.
Since then I have updated the layout and would like to have PagePeeker update the rendered screenshot, since at least on my computer, the screenshot still shows the old site design/layout (with a jumbotron that says "Welcome to Pixic.se, some smaller text and a btn-primary button) even though I have deleted cache/history.
I visited Pagepeeker.com and entered my URL and then it generates a preview with the timeline, i.e. the current design/layout, but it doesn't affect when I go back and check my own site. Also, the rendered screenshot at PagePeeker makes the Timeline look weird...the whole timeline only filling about 40% of the page width.
Questions
If you take a look at Pixic.se timeline's first story, do you see a grey navbar and the jumbotron described above or do you see the current design/layout?
Are PagePeeker screenshots stored at PagePeeker or only rendered if the visitor doesn't have it cached?
Is there any way to get PagePeeker render the sites again and perhaps even have it done regularly, by interval using META tags or similar?
Additionally, I tried to add a link to Google Charts, but it did not work. It only outputted the URL as a string where the PagePeeker screen would have been. Any idea why?
PagePeeker supports refreshing of the thumbnails via an API call, for premium accounts. Other accounts do not support it.
Thumbnails are cached 7 to 14 days, depending on how much they are used.
One way to force a refresh would be to add a random string after the URL like: http://pixic.se/?random=234234234
Related
I want show all google review in my website. I am using phantomjscloud api.
Here the link it showing only 10 review. I need all review.
https://phantomjscloud.com/api/browser/v2/REDACTED-API-KEY/?request={url:%22https%3A%2F%2Fsearch.google.com%2Flocal%2Freviews%3Fplaceid%3DChIJF47RCZLBeUgRSpiTvcpPEfA%22,renderType:%22html%22}
I do support for PhantomJsCloud. You know, you can always email support#PhantomJsCloud.com to get help. I dare say it's a better than a place like SO for a niche SaaS product. Only Google Alerts saved you this time.
Anyway, to answer your question: you can look at the doc page at https://phantomjscloud.com/docs/http-api/, there is an example showing exactly this:
Scripts: LazyLoad then force render Scrolls 50px every 50ms, and
renders when done scrolling to the bottom. This eldiariomontanes.es
site lazy loads images only when it's shown in the browser, so if you
take a screenshot without the provided script, the bottom part will be
missing images. Important: This page takes aprox 25 seconds to load,
and weighs aprox 2mb in size. (Costs about 0.0047 credits)
HOWEVER you just pasted your private api key into a public message board! Sorry but I am going to have to delete your account. You can go ahead and sign up again though. Please read up on "Ops Sec" to avoid getting something important stolen in your future.
I have a page on a Laravel application that shows a list of sign-ups ordered by date created desc. The information displays an avatar thumbnail and then some other related fields.
For now, I would like to restrict viewing of that list by blurring it until certain criteria have been met by the user who has signed up. But I also want to show the user that the page exists - so it is kind of a teaser to encourage them to complete signup in that once they have done so they will be able to access the complete list.
This is easy to do using blur functionality in CSS but the issue is that can easily be bypassed using browser dev tools.
I am currently using a static image in place of real-time results but it is obvious to the user that their info is not included as their avatar is not showing (even though it is blurred it would still be slightly recognizable to them considering they would just have uploaded it).
I had considered generating the page and then screen scraping it (using something like spatie/browsershot) to create the static image but actually am not sure if that is the best option. Especially as this is only a temporary scenario as once we have enough signups we won't want to blur out the results page.
Any ideas on how to achieve the results I need? Or would screen scraping be the preferred option?
EDIT:
Just to be clear; I am not going the CSS route - that is why this question was posted. I am looking for server-side alternatives to that.
What I am trying to do is to make something similar to what I see all the time on almost any website. The button that says Share to facebook. The goal for me is to let my guests share the item they are viewing in my store (Ran on prestashop) on their blog I run (Running on Oxwall).
The goal is for the button to not only link to a blog post submission webpage but to already have the subject line filled out with the item they are sharing's name and the blog post to display the information about the item. I would like to try and do all this using PHP. I am not sure how to go about doing it but I am sure that I could pass the value. Please note that I can mod BOTH the blog site and the shop as I run both and want to connect them.
As an extra bonus I am also running a forum using phpbb3 if I could do the same thing but onto that as well I would greatly thank you. I am trying to interlink everything into one big network. I know its not an easy task but I am sure there is an easy way to pass data onto the other site so that this can be done.
Facebook a 2 tools to get items informations in the page, it parses the page looking for the most common tags and it uses OpenGraph.
You can also provide product informations in the head of your page (between head tags), then blog side, you retrieve only the contents and parse it as XML.
I advise you to cache this data to avoid useless connections between websites and awful overloads while parsing.
You can use your own specifications, Open Graph or another standard, but i advise to use a standard.
I am working on an application which involves lot of ajax requests for updating the HTML content.I have a dashboard with a fix left menu or accordian panel which takes the event and based on the events I have to update the center portion of the page using ajax.
Issue: I am facing issue with the back button of the browser as I am not refreshing the page.I want that the user should be able to navigate back and forth through the ajax content,but as I don't change the URL it redirects the user to the previous page they came from and destroys all the information entered by the user in the fields.
While making a search I came through this website which is quite popular and manages a playlist on the left and a player at the bottom without refreshing the page,but the URL changes for different content the show.
I am not sure if there is any specific framework that can be used or it can be achieved via normal code.Any help in pointing me to the right links or suggestions over it would be helpful.
Thank you
What you seem to want is history.js. It uses the HTML5 history API to navigate (and you can fire events upon change), and it also supports older browsers by using hashbangs.
Essentially the browser will not load any new page, but you can still change the URL to reflect changes (and have the users bookmark pages etc.).
Take a look at their demos to see if it's what you're looking for.
If I insert in my wall a link like this:
http://blog.bonsai.tv/news/il-nuovo-vezzo-della-lega-nord-favorire-i-lombardi-alluniversita/
then facebook extract the image in the post and not the first image in the webpage ( not image logo or other little images for example ) !!
How facebook does that ?
Hm, impossible to say without more information about the algorithm they use.
However, from looking at the page's source code you can see that while the image of Bossi is not the first image in the page, it's the first inside the divs "page_content" and "post_content". Maybe Facebooks knows the HTML IDs that the blogging system (Wordpress in this case) uses, and uses these to find the first image that is actually part of the page content.
That would actually be a good idea, and is essentially an implementation of the "semantic web"...
As others have said, we have no idea how Facebook decides what to choose in the absence of any relevant metadata (though Sleske's guesses seem reasonable; I'd also guess that they look at the first big image), but you can avoid that by going the correct route and simply giving facebook (and similar services) addiotnal metadata about your page by using Open Graph Protocol tags, for example if you want to specify a particular image to use for a facebook like, you'd include this in your head tag:
<meta property="og:image" content="<your image URL>" />
OGP is also used by LinkedIn, Google+ and many others.
If you're in Wordpress you can control these tags with an open graph plugin. Other systems can do it manually or via their own plugins.
I can imagine that the Facebook crawler can identify the actual content part, and select an image from it. Similar functionality is used by the Safari Reader functionality. It probably helps that the software used is Wordpress, which is the most popular blogging software. It's a quick win for Facebook to add specific support for this software.
My guess is facebook has built some algorithms for distinguishing the actual content from the other data in a html page. When looking at the page you provided it's quite easy since the html element that contains the page content has id="page_content" which is self-explanatory.