Blog

My work at the intersection of culture, technology, and design

Add a Link to an External LibGuides Handbook

Tutorials

Use simple jQuery to add a link to your online LibGuides Handbook adjacent to the LibGuides mini command bar menu.

At Notre Dame, we recently created an online LibGuides Handbook and hosted it on Github. In order to give LibGuides creators a link to the Handbook at point of need (and which they wouldn’t have to remember), we added a button link to the upper right menu on the edit-a-LibGuide screen.

image of The Landlord Game board

We added the button by adding the following jQuery to the site-wide custom JS/CSS.


// Adds the Handbook button to the mini command bar
var handbookButton = $('<button id="open-handbook" class="btn btn-default btn-sm handbook" title="Open the Guides Handbook"><i class="fa fa-rocket fa-lg"></i>Handbook</button>');

$(handbookButton).prependTo($('#s-lg-guide-mini-cmd-bar'));
$('#open-handbook').click(function() {
      window.open('https://url-to-the-hosted-handbook','_blank');
});

Change the URL

To point the widget to your own handbook, simply insert the URL to your own handbook where you see:


window.open('https://url-to-the-hosted-handbook','_blank');

Change the Icon

The rocket icon is simply a convenient FontAwesome 4 icon which we used to brand the Handbook. If you’d like to delete or replace the icon with another, the isolated code for the icon is:


<i class="fa fa-rocket fa-lg"></i>