Safari Top Sites Preview

Question

In the Top Sites section of Safari, the iCloud.com image shows the logo instead of the login screen as you can see below. Normally, the Top Sites just shows a picture of the loaded web page (and the loaded page does not look like this). Do you have any idea how they accomplished this? I couldn't find anything in Apple's documentation. Thanks for your help.

Answer 1

Here's how it's done on iCloud to show a Top Sites specific preview: (edited for formatting)

if (window.navigator && window.navigator.loadPurpose === "preview") {
    window.location.href = "http://www.icloud.com/topsites_preview/";
};

Source: http://blog.raffael.me/post/18565169038/defining-how-your-website-looks-like-in-safari-topsites

Answer 2

In fact, Safari doesn't search a <link> tag or anything else. There is two dfifferent thing that we can use:

• The HTTP headers of the incoming request in PHP.

• The properties of the window object in JavaScript.

The two ways work very good and you can use any of them, or even both of them if you want to be sure.

---

PHP:

If we inspect the HTTP headers, we will see that when it's Safari Top Sites Preview that sends the request, there is X_PURPOSE that is set to preview. Then you must write in the normal website:

if($_SERVER["HTTP_X_PURPOSE"]=="preview")
{
    header("Location:thumbnail link");//Redirect to the thumbnail.
}
//Display the normal website.

And you can add in the page where there is the thumbnail:

if($_SERVER["HTTP_X_PURPOSE"]!="preview")
{
    header("Location:normal link");//Redirect to the normal website.
}
//Display the thumbnail.

So that you can't see the thumbnail except from the Safari Top Sites Preview.

---

JavaScript:

window.navigator.loadPurpose has the value preview if it's Safari Top Sites Preview which tries to open the website. But window.navigator does not exist if it's in a normal view. As such, when you test this value, you have to test for the very existence of this property as well as for its truthiness. Then this is the code for the normal website:

if(window.navigator&&window.navigator.loadPurpose==="preview")
{
    window.location.href="thumbnail link";//Redirect to the thumbnail
}

And for the thumbnail page:

if(!window.navigator||window.navigator.loadPurpose!=="preview")
{
    window.location.href="normal link";//Redirect to the normal website
}

---

Little trick from me:

If you really want to put a <link> tag you can write:

<link rel="safari-preview" href="thumbnail link" />

And then add at the end of the head section:

<script>for(var i=0,link=document.getElementsByTagName("link"),l=link.length;i<l;i++)if(link[i].getAttribute("rel")==="safari-preview"&&window.navigator&&window.navigator.loadPurpose==="preview")window.location.href=link[i].getAttribute("href");</script>

---

Sources:

• http://sunpig.com/martin/archives/2010/01/08/how-to-detect-a-page-request-from-safari-4s-top-sites-feature.html
• http://daneden.me/2011/12/custom-safari-top-sites-thumbnail/
• My own tests.