HLP – Hover Link Previewer/Zoom

Ook al voor gehad dat je een tweet ziet passeren waarbij je iets hebt van “die call to action of uitleg… dat moet wel een zeer interessante link zijn”? En als je er dan op klikt en landt op één of ander crappy site of te luchtig onderbouwd artikel? Deze Chrome extension moet dat verhelpen.

Waarom deze extension

Een tijdje geleden kreeg ik de vraag of er een mogelijkheid was om een live preview van website te genereren. Dus je gaat met je muis over een link en je krijgt in een popup de website te zien waarnaar de link verwijst. Ik had al wat rond gekeken en stootte op deze JQuery die de beste optie was, maar die leverde enkel previews aan met een thumbnail van een externe partij.

Niet echt een optie dus.

De nood aan zo’n plugin kwam ook uit eigen behoefte. Als je zowat dezelfde mensen volgt in dat kleine wereldje van SEO, Analytics etc… dan bots je al gauw op diezelfde links die iedereen deelt. Je hebt het vast en zeker ook al voor gehad. Je ziet twintig tweets passeren, allemaal dezelfde link, maar ze zijn toch telkens anders:

• Andere tekst bij de link
• Andere call-to-action
• Andere url-shortener
• …

Allemaal dezelfde link, maar een andere verpakking. Zeer vervelend dus. Zo’n previewer is dus wenselijk.

Wat doet deze extensie

De Hover Link Previewer kan in hoofdzaak 3 verschillende zaken:

1. Live preview van de website waarnaar de externe link verwijst met een anchor tekst
2. Live preview van de website waarnaar de externe link verwijst met een afbeelding als anchor
3. Live preview van een afbeelding indien er een link van de thumbnail naar de externe grotere foto ligt

Dus… je krijgt alles te zien wat gelinkt is met een extern bron. Ook subdomeinen behoren tot een extern bron aangezien het subdomein gedetecteerd wordt als de intern bron.

vb: www.example.com zal ook previews tonen van dezepluginisretevet.example.com :)

Bij de preview popup krijg je telkens het titel attribuut of het alt attribuut te zien.
Indien er geen titel of alt attribuut is ingesteld, dan krijg je not set te zien.

Hoe werkt dat precies

Alles werkt op hetzelfde principe: de iframe.

Bij het refreshen of inladen van de pagina wordt een script in de pagina ingeladen via de Chrome extensie. Dat script zorgt voor de detectie van de externe links. Bij het bewegen van de muiscursor over de externe link wordt een iframe ingeladen (met wat nodige franjes) en wordt een live preview van de site of afbeelding getoond.

Het werkt (nog) niet bij alle websites

Er zijn drie verschillende scriptjes toegepast in bepaalde websites die de werking van deze extensie tegenhouden:

1. Blokkeren van de website in kwestie tegen het inladen van de website in iframes zonder foutmelding (vb: zo goed als alle Google services)
2. Blokkeren van de website in kwestie tegen het inladen van de website in iframes met foutmelding (vb: Flickr die effectief zeggen: sorry jongens, wij laten onze website niet toe in iframes)
3. Detectie van website ingeladen in iframe en opgevangen door een redirect (vb: Stumbleupon die je doorstuurt naar de pagina i.p.v. hun site in een iframe toe te laten)

Dit moet nog eens bekeken worden. Er bestaat wel een work-around waarschijnlijk, maar dat gaat m’n petje te boven en zou me serieus wat tijd kosten om het uit te dokteren.

Waarom is die plugin soms zo traag

De Link preview tool kan ietwat traag zijn. Dat scheelt niet aan de extensie zelf, maar aan de website die moet worden ingeladen. Als die website zeer traag is, dan zal het wel even duren. Ik heb enkel zaken geprobeerd met caching, zoals bijvoorbeeld met die prerender optie, maar het mocht niet zijn.

Er bestaat ook geen (of toch niet dat ik weet) caching service die mij real-time caching kan aanbieden. Mocht dat wel zo zijn, kon ik verwijzen naar die caching server en dus de website veel sneller inladen.

Waarom is de positie soms zo raar

In de meeste gevallen is de positie van de popup correct. Als je popup opent en ziet dat er geen plaats is aan de rechterkant van je scherm, dan zal die automatisch switchen van richting en zich oriënteren naar de linkerkant van het scherm. Daar is er wel nog plaats. Als dat niet zo blijkt te zijn, als je bijvoorbeeld je scherm kleiner maakt dan 640 pixels breed, dan zal de popup dat niet snappen. Dat is trouwens ook niet echt een breedte van een scherm hé ;)

De positie van de popup is niet altijd 100% correct en dat  is een beetje afhankelijk van de schermgrootte en soms ook CSS.

Dankwoord

Nog even een dankwoordje placeren:

• Dank aan Ruben Taelman voor z’n input over het mobiele gedeelte (even offline – nog niet op punt)
• Dank aan Samuel Debruyn voor z’n github hulp om een workspace daar te creëren voor ons drie’tjes

Later komt er een JQuery plugin zodat je dit ook op je eigen website kan implementeren als je dat wilt.
Dan kan je A/B testing gaan doen etc :)