Links followed by full URL?

March 6, 2017 8:16 AM

Links followed by full URL: Anyone out there have a script or something they could share that does this?

Example:

[Title]How to kill a Japanese hornet: cook it with bees[/Title]

European honeybees have been seen for the first time "bee-balling" Japanese yellow hornets: swarming around a hornet, forming a tight vibrating ball and then cooking it to death (http://onlinelibrary.wiley.com/doi/10.1111/ens.12248/abstract) with their own body heat. [more inside]

I realize that in posts with a ton of links this can get messy very fast but I really like being able to see the URL sources at glance to get a better idea of the content.

I contacted the admins and they told me there is no native option for this and no plans to add it. My feeling is that most users wouldn't even use this option if it did exist so I believe this is what is known here as a "pony."

Thanks

posted by laptolain to Feature Requests at 8:16 AM (16 comments total)

Yeah, this'd be a pretty good fit for a userscript if there is one or that sounds like an interesting quickie project for someone.
posted by cortex (staff) at 8:16 AM on March 6, 2017

The "hrefs as link text" bookmarklet from Jesse Ruderman's Link Bookmarklets will do part of this. Changing it so that the original link text is also included is left as an exercise to the user.
posted by grouse at 8:23 AM on March 6, 2017 [1 favorite]

This CSS (which can be added automatically by browser extensions like stylish in firefox and chrome) seems to do the trick. (I tested in firefox 51.0.1 on Linux)

.copy a::after, .comments a::after { content: " (" attr(href) ")"; border-bottom: 1px dotted #000; }
.smallcopy a::after { content: ""; }

You can apply further styles to the added text, such as font-size: 66%;.
posted by the antecedent of that pronoun at 8:54 AM on March 6, 2017 [9 favorites]

wow antecedent that works great thanks!
posted by laptolain at 9:14 AM on March 6, 2017

one more question

I managed to add the font-size change you suggested correctly but I can't figure out how to strip everything from the URL shown but the root domain. I underestimated just how crazy some links can get.

For example:

http://americanhistory.si.edu/collections/search/object/nmah_670097

becomes just

http://americanhistory.si.edu/
posted by laptolain at 9:25 AM on March 6, 2017

Sadly, I don't think you can do that with css.
posted by the antecedent of that pronoun at 9:27 AM on March 6, 2017 [1 favorite]

Oh ok

Well thanks anyway this is way better than nothing.

For future reference for anyone who uses tapermonkey in chrome this is the final product:

// ==UserScript==
// @name metafilter
// @namespace http://metafilter.com
// @version 0.1
// @description try to take over the world!
// @author You
// @match http://www.metafilter.com/home/popularfavorites
// @grant none
// ==/UserScript==




function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}


addGlobalStyle('.copy a::after, .comments a::after { content: " (" attr(href) ")"; font-size: 66%; }');
addGlobalStyle('.smallcopy a::after { content: ""; }');
posted by laptolain at 9:28 AM on March 6, 2017

This is all interesting, but if you want to see a link's URL for,at, why not just hover over it, rather than all this?
posted by tzikeh at 12:08 PM on March 6, 2017 [3 favorites]

Tzikeh a post like this is a good example: http://www.metafilter.com/165461/Aim-high-and-you-wont-shoot-your-foot-off-Phyllis-Diller

There are so many links there that it gets tedious hovering over every single one. Also sometimes I want to know if someone is linking to an unusual (to me) website or just some wiki on the topic.

I spend a lot of time on sites similar to metafilter so there can be significant overlap in trending links. I'd like to know as efficiently as possible what stuff I already saw and what to possibly look out for in the comments.

I also like to have an idea of the domain trends on metafilter. I tend to notice and remember an uptick in sources coming from particular places and I find that useful information.

Really unless you come to the conclusion on your own that you need a script like this I don't think you would find it worth it.
posted by laptolain at 12:17 PM on March 6, 2017

but if you want to see a link's URL for,at, why not just hover over it, rather than all this?

For one, mobile doesn't do hover well, or so I'm told.
posted by radwolf76 at 1:51 PM on March 6, 2017

There is no "hover" option with mobile devices and tablets, because there is no cursor to indicate where you might click. You just tap on a link and go. Or, you can press and hold, which offers up options, often including a preview of the URL itself, which is as close as you'll get to hovering. In short, it takes more effort to see where the link might go. This question came up a few years ago on Stack Exchange, and one solution was to use a URL un-shortener app that previews the destination link (on clicking?).

Slashdot started doing showing domains only in brackets next to links in their threaded comments, but not in the OPs, over a decade ago, but to put a stop to people tricking others into visiting goatse. Here's a direct link to a comment with that formatting. I'm not sure if you could pull their code to see how they displayed the domain instead of the full URL, but that might provide some savvier folks tips on ways to make that work.

And I'm the maker of the example link-heavy post. I try to make the content of the link align with the linked text, but I recognize I tend be a maximalist with links. I've thought of listing all the links in order below the fold, for posterity and ease of browsing, but I haven't done this because it could also appear extra cluttered.
posted by filthy light thief at 8:07 AM on March 7, 2017

thank you for asking about this laptolain. I wanted to ask a similar question. In politics threads I am tired of being disappointed by twitter links, so I just want [twitter.com] after them, as an example. Now I wonder if I can figure out how to apply it only to certain pages, like politics threads.
posted by sylvanshine at 10:48 AM on March 8, 2017

This is a pretty pony with a lovely mane & tail.

Another reason I like including bare links is the battle of link rot.

Five years later, it's a lot easier to copy the URL and plug it in to Archive.org's wayback machine. Copying underlying URLs in mobile is a PITA.
posted by Jesse the K at 4:49 PM on March 8, 2017

This would be shorter with jquery but here is an option in javascript:

var anchors = document.querySelectorAll(".posts>a,.copy>a");

for (var j = 0; j < anchors.length; ++j){
    var anchor = anchors.item(j);
        
    //ignore metafilter generated youtube play links
    if (!anchor.classList.contains("vid")){
        console.log(anchor.hostname);
	var el = document.createElement("small")
	el.append(" [" + anchor.hostname + "]");
	anchor.append(el);
    }
}

posted by czytm at 6:20 AM on March 9, 2017 [1 favorite]

oops you can remove that console.log(...) line
posted by czytm at 9:52 AM on March 9, 2017

Jesse your link rot point is very true.

I have so many bookmarks from a decade ago when I didn't know any better that are just lost to history
posted by laptolain at 12:27 PM on March 9, 2017