External Links Favicons
Display favicons before links to external websites
Description
This recipe places the favicons of external websites before their links. It is enabled on this page and can be tested:
* Read about something on [[https://en.wikipedia.org|Wikipedia]]. * Listen/watch interesting talks on [[https://www.ted.com|TED]]. * Watch some videos on [[https://www.youtube.com|YouTube]]. * Read the scientific and technical news on https://slashdot.org. * Explore some [[https://virtour.fr/tours/|virtual tours in the Paris region]]. * This domain doesn't have a favicon so it displays a generic icon: https://www.example.com. |
|
Installation
1. Place extlink-favicons.js in your pmwiki/pub directory.
2. Place the following code in local/config.php:
$HTMLFooterFmt['ext-favicons'] = '<script src="$FarmPubDirUrl/extlink-favicons.js" id="extlink-favicons" data-selector="a.urllink" data-provider="google"></script>';
Configuration
You can change the query selector for the external links by changing the data-selector="..." attribute above, for example if your external links have custom classes, or to restrict the favicons to some area. For example, to only enable favicons in the main page area and not in the sidebars, headers and footers, you may do something like:
data-selector="#wikitext a.urllink"
To use the recipe with Cookbook:LinkIcons, set the data-selector to "a.external":
data-selector="a.external"
You can change the provider of the icons by changing the data-provider="..." attribute above. The recipe has 3 providers, google (default), duckduckgo (meta search engine) and yandex (a Russian search engine):
data-provider="yandex"
or you can use a different provider $1 will become the linked domain name:
data-provider="https://some-favicon-caching-service.com/favicons?domain=$1" data-provider="https://some-favicon-caching-service.com/$1.png"
Internationalization
Not applicable.
Usage
Nothing special to do, all external links will be styled automatically. See examples in the Description section above.
Notes
- A link is considered external if it matches the query selector and if the domain (hostname) part is different from the current domain (hostname).
- If you're using a custom provider for the favicons, its URL should be on the HTTPS protocol.
- Enabling the recipe will instruct the browser to make additional requests to get the favicon for every external link. Your page may appear to load a little slower.
- Why using a search engine provider instead of loading directly the favicon.ico from the external website?
- It is not practical to directly load the favicon.ico pictures from the external websites -- sometimes these files are named differently or don't exist.
- It is considered bad netiquette to hotlink.
- It may also be a privacy problem since the external website may register a hit from visitors of your website.
- Why place the icons before and not after the links? Because it works better with bulleted or numbed lists of external links where the icons are all aligned.
To do / some day / maybe
If there is interest & funding: add more providers; implement sprite-based favicons to have a single request for all favicons -- Yandex allows it; cache locally the external favicons.
Other comments/ideas welcome.
Change log / Release notes
- 20201203 Fix same bug that was fixed in 20201128a but I inadvertently used an earlier version for cutting 20201129 (again, reported by Robert Riebisch).
- 20201129 Add DuckDuckGo provider.
- 20201128a Fix bug in older versions of Firefox<55, reported by Robert Riebisch (also affected MSIE11).
- 20201128 First release, ready to be tested.
See also
- Cookbook /
- ExternalLinks Configure external links to open in a new window, have a "tooltip title", or use other CSS classes (Stable)
- Favicon Add a Favicon to your website (Mature)
- PmWiki /
- Links Multiple mechanisms for creating links
Contributors
Recipe written and maintained by Petko.
Comments
See discussion at ExternalLinksFavicons-Talk
User notes : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.
