Peek behind any link

the peekr quickly grabs metadata for any url and creates tooltips

Moonwalk
http://vimeo.com/56298775
The ultimate full moon shot. Dean Potter walks a highline at Cathedral Peak as the sun sets and the moon rises. Shot from over 1 mile away with a Canon 800mm and...

Add a multimedia tooltip to any link on your website! The peekr takes care of grabbing, understanding, unrolling, and formatting all the data on the page that your links point to and shows your users a name, image, and description. The plugin works with or without jQuery.

The peekr works by grabbing the metadata that is present on every page on the internet. It looks at the standard HTML metadata in the header, and includes all Open Graph metadata. It works automatically for all web sites, including Facebook, YouTube, Vimeo, Soundcloud, and all the pages inside, like soundcloud.com/macklemore or vimeo.com/56298775. You can also peek behind link shorteners, like http://bit.ly/WnKPzd

The peekr is also a free data API that will fetch the metadata for any website and return it in JSON. It also supports JSONP to include in your websites on the client-side.


Try it out!

Enable the peekr by including the javascript api on your page. You can do this by including the peekr library in your script tags:

<script src="http://js.thepeekr.com/peekr.js" type="text/javascript"></script>

To add a tooltip to a link, you need to attach the peekr to it. You can do this with or without jQuery. Due to awesomeness and ease of use, however, we highly recommend jQuery.

jQuery

Simply call attachPeekr() on the jQuery-wrapped elements you want to add the peekr to. The element must have an href attribute to enable the tooltip.

<script type="text/javascript">
  $(".peekr").attachPeekr()
</script>
...
<a class="peekr" href="http://www.youtube.com">YouTube</a>
And you'll enable the tooltips for any anchor tag that is class peekr

without jQuery

If you're not using jQuery, you'll have to pass in the actual DOM element to the Peekr.attach.

<script type="text/javascript">
  Peekr.attach(document.getElementById("peekr-link"))
</script>
...
<a id="peekr-link" href="http://www.youtube.com">YouTube</a>

the peekr also provides a data API that you can call to get the metadata for any url. You can use the jQuery library or call the API directly. Additionally, you can make HTTP calls to the peekr data services directly.

jQuery

With the jQuery plugin, you can call urlMetaData() on any element with an href attribute, and the peekr will return the metadata for that page.

<script type="text/javascript">
  function handleUrlMetadata(data) {...};
  $(".peekr").urlMetaData(handleUrlMetadata);
</script>

without jQuery

Without jQuery, simply call Peekr.data(url, callback) to get the metadata.

<script type="text/javascript">
  function handleUrlMetadata(data) {...};
  Peekr.data("http://www.reddit.com", handleUrlMetadata);
</script>

HTTP

If you need to get url metadata outside of a web browser (or don't want to use the peekr javascript library), the peekr services are completely open. Simply call http://api.thepeekr.com/data with the parameters:

For example, to get the metadata for http://www.heroku.com, you can call:

curl http://api.thepeekr.com/data?url=http://www.heroku.com

which will return:

{
  "title":"Heroku | Cloud Application Platform",
  "image":"https://nav.heroku.com/images/logos/touch.png",
  "description":"Heroku is the leading open language cloud application platform and supports Ruby, Java, Python, Clojure, Scala, Node.js. and custom language buildpacks.",
  "url":"http://www.heroku.com/
}

Frequently asked questions coming when questions are asked frequently.

the peekr was created by Adam Wilson - adam@callawaywilson.com

Powered by Heroku and Github - © thepeekr.com