Version 1.1.1, November 25, 2023, df
The «Summary box for Wikipedia links» instantly turns all existing & new links to a Wikipedia article on your site into links with nice preview boxes containing the article summary!
To get the feature, you can simply add a line of code to your website/web application or copy the code here and host it yourself.
Try the feature on the project page (su-pa.net)
Also available as a WordPress plugin (github.com)
- Introduction
- Update history
- About this repository
- Examples
- Features & Characteristics
- How to
- Settings
- Future plans, some ideas
- How to support
- License & privacy
- Contact
- Version 1.1.1 (November 25, 2023, minor update)
- Corrected CCS path for self-hosting
- Added allowed tag (
<sup>) in the summary box (Wiki API data)
- Version 1.1.1 (November 08, 2023)
- Introduced new customizable parameters (
numberofchars=..., openlinkinsamewindow, nowikilinknote, #dontshowimage) - Improved code refactoring
- New: Also available as WordPress plugin!
- Introduced new customizable parameters (
- Version 1.0.0 (December 10, 2021)
- Initial release as "Wikipedia preview box"
If you already use "Copy, paste & go!" (see below), you don't need to do anything. And if you like, you can start using the new parameters!
This repository contains the necessary files for a self-hosting of the «Summary box for Wikipedia links» feature.
- Check it out on the project page!
- Some of our websites that use the «Summary box for Wikipedia links»:
dontwastemy.energy, lanyu.land, the-horse.education, teachingweb.org, risikosicherheit.ch
- Lightweight; only 4KB of JavaScript, some CSS, a single character 'Wikipedia-W' font, a font and a bullet gif
- Easy to use on any website and also available as a WordPress plugin
- Works on mobile & desktop, with touch & mouse
- Works in all (modern) browsers; if the feature does not work in a specific browser version or device, it remains a normal link (without the summary box)!
- It's like magic, just add a line of code to your site and on all the Wikipedia links on your website/web application a preview box pops up on mouse over or finger tab
- The Preview box automatically finds the best place to display on mobile & desktop, landscape & portrait mode
- Wikipedia links with a summary box are nicely marked by a small Wikipedia logo that is made of a 1-char-font, the "Wiki-W"
- Works with all languages, different text directions (ltr & rtl) and even mixed content
- Works with existing offsite link icons
- Built-in "auto hyphenation" (CSS) for all (available) languages
- Fine animation of the summary boxes
- Shows the summary text & the image (if any) of the linked Wikipedia article inside a preview box (by default)
- Easy-to-use settings via parameters as part of the
<script>tag (affects all preview boxes) or as part of the link url (affects a specific preview boxes)
Here are three different ways to use the «Summary box for Wikipedia links». By following the steps below, all links to Wikipedia articles on your site will automatically display a nice preview box with the article summary that pops up on mouseover or fingertip.
Add the following line of code to the bottom of your page, just before the </body> tag or inside the <head> tag, and you're done!
<script src="https://su-pa.net/wikiPrevBox/wikiPreviewBox.min.js" crossorigin="anonymous" defer></script>You can skip defer if you place the code snippet at the bottom of your page.
Alternatively, you can add the following line of code with an integrity key (SHA-384). This will ensure that the file has never been tempered either on our server or in transit. However, after an update, you will still get the older version until you update the script tag to the latest version.
<script src="https://su-pa.net/wikiPrevBox/wikiPreviewBox_111a.min.js"
integrity="sha384-UPeEJIqACRF4Dgoxyw3ZooCA1DlSFrDQ/cjrGvlAy7Bjnl0boUU8MUTRZuRBRhe8"
crossorigin="anonymous" defer></script>Note: This is the latest version, older versions are always kept but not listed here.
Download this repository, copy the folder "wikiPrevBox" to the root of your website and add the following line of code at the very bottom of your website, just before the </body> tag or inside the <head> tag.
<script src="/wikiPrevBox/wikiPreviewBox.min.js" defer></script>You can skip defer if you place the code snippet at the bottom of your page. Please refer the comments in the source files if you are interested in how it works or if you want to customize the code. See also the project website.
If you have a website running WordPress, you can easily install the WordPress plugin.
The parameters are part of the <script ...>-tag; currently you can set six parameters as part of the data-wikipreview attribute. All parameters are optional.
data-wikipreview="noimages,width=..., ..."
... numberofchars, fontsize=..., openlinkinsamewindow, nowikilinknote<script data-wikipreview="noimages,width=250,nowikilinknote,fontsize=1.1" src="..."></script>width=...
Width of the preview boxes, number of pixels, value between 200 and 400, default is 300.numberofchars=...
Number of characters of the summary text in the preview box, value between 100 and 600, default is 280. Note: Depending on the linked Wikipedia article, the number of characters displayed may be less than the number you've specified.fontsize=...
Font size, relative to the font size "around", value between 0.3 and 2 default is 0.9.noimages
If this value is set, only the summary texts will be shown and no images; this can help to reduce traffic in places with poor network conditions; or you can display only the images that you like (by using#showimage- see below).openlinkinsamewindow
If set, the linked Wikipedia article in the preview box will be opened in the same window.nowikilinknote
If this value is set, the info url "(wikipedia.org)" next to the Wikipedia link in the preview box will be replaced with an arrow.
Add the parameter to the Wikipedia link URL; you can currently set three parameters:
#nopreview
#showimage
#dontshowimage<a href="https://en.wikipedia.org/wiki/Lanyu#nopreview">Orchid Island</a>#nopreview
Does not show the Wikipedia preview box for a given link, but resets it to a common link to the Wikipedia article.#showimage
Use this, if you have used thenoimagesparameter in the<script ...>tag (see above), but still want to show an image in a specific Wikipedia preview box. This allows you to control of when an image is displayed.#dontshowimage
Do not show the image of a specific Wikipedia link.
Additionally, you can overwrite the CSS rules of the Summary Boxes in the stylesheet "wikiPreviewBox.css" (resp. "wikiPreviewBox.min.css" – be aware that the minified files (.min) are referenced), e.g.:
a.wikiLink::after {color: #212427 !important;}` /*color of the 'Wiki-W', default is 'inherit'*/
a.wikiLink {color: darkgreen;} /*color of the Wikipedia link*/Use !important if necessary.
- In some cases: Automatically hide the summary box after a while
- (Portrait modus on mobile: display image next to the summary text)
- Enlarge image after tap/click on an image
- Button to show more summary text
- Offline and cache features
- Letter 'W' custom settings
We would be delighted if you would support «The Horse project»!
We are a non-profit association for the promotion of intercultural youth projects, since 2016.
- Website of our organisation: «THE ! association»
- Realised cross-border projects of the young people: dontwastemy.energy
- Donate The Horse! (stripe.com)
Or donate to the Wikimedia Foundation.
Privacy: Get more information on the project page.
License: GPL v3 License
Nothing is perfect! I'm not nothing.
Please don't hesitate to reach out if you need assistance or have suggestions.
Dominik Fehr, wikinick@su-pa.net
Project page (su-pa.net)
WordPress plugin (github.com)
su-pa.net, last updated, November 25, 2023