

Here’s a GitHub gist that shows the function from our Highlight class that generates the fragmention for a highlight: Implementing Fragmentions in Instapaperįragmentions not only offer a much more elegant solution to referencing text in a webpage, but do so in a way that was much easier to implement than the solutions our team had initially proposed. It’s an extremely elegant solution to the problem that we wrestled with when implementing highlight sharing in Instapaper: How do we link to a particular piece of text in a webpage? Kevin has proposed this as a web standard, and worked with Jonathan Neal to create a script that sites can use to support fragmentions.

This behavior is similar to searching for text on a webpage. When a web page or browser detects a fragmention, it should highlight the corresponding text and scroll to it in the webpage.Fragmentions are appended to the URL after a double number sign (“#”).A fragmention references text in a webpage by appending the text to the end of the page’s URL.Kevin Marks ’ article about fragmentions is excellent, and I definitely recommend reading it. Two weeks before the big launch, Borthwick sent me a link to a recently published article titled “ Fragmentions”.

We knew neither of those solutions were great… As the launch got closer we were planning on punting on any special highlight link, and just share a link to the original article. A page on Instapaper that embedded the original article in a full screen iframe, highlighted the correct text, and scrolled to the highlight.A page on Instapaper that showed the highlight, who shared it, and the original link to the article.
#Instapaper add link url how to#
When we built automatic sharing for Instapaper highlights, the team had several discussions about how to properly share a highlight link to another service.
