Widget:Google Books: Difference between revisions

Revision as of 15:19, 10 March 2025

This widget allows you to embed Google Books on your wiki page. Originally created by Arv and adapted by FrancisFranck.

Using this widget

To use this widget, add the following code to your wiki page:

{{#widget:Google_Books
 |id=BOOK_ID
 |width=600
 |height=500
}}

Parameters:

id - The Google Books ID (required)
width - Width of the embedded viewer in pixels (optional, default: 600)
height - Height of the embedded viewer in pixels (optional, default: 500)

Copy to your site

To use this widget on your site, install MediaWiki Widgets extension and copy the complete source code of this page to your wiki as page Widget:Google Books.

@@ Line 23: / Line 23: @@
 </noinclude>
 <includeonly>
-<div style="display:inline-block; width:<!--{$width|escape:'html'|default:'600'}-->px; height:<!--{$height|escape:'html'|default:'500'}-->px; margin:10px 0;" id="googlebooks-<!--{$id|escape:'html'}-->"></div>
 <script type="text/javascript" src="https://books.google.com/books/previewlib.js"></script>
+<div class="google-books-container" style="clear: both; display: block; margin: 1em 0;">
 <script type="text/javascript">
 /* <![CDATA[ */
-var width = <!--{$width|escape:'html'|default:'600'}-->;
+(function() {
-var height = <!--{$height|escape:'html'|default:'500'}-->;
+  var width = <!--{$width|escape:'html'|default:'600'}-->;
-var bookId = "<!--{$id|escape:'html'}-->";
+  var height = <!--{$height|escape:'html'|default:'500'}-->;
-function initGoogleBooks() {
+  var bookId = "<!--{$id|escape:'html'}-->";
+  function checkAndInitialize() {
      if (typeof GBS_insertEmbeddedViewer === 'function') {
-        GBS_insertEmbeddedViewer(bookId, width, height);
+      document.write('<div style="width:' + width + 'px; height:' + height + 'px;"></div>');
+      GBS_insertEmbeddedViewer(bookId, width, height);
      } else {
-        // If the API isn't loaded yet, try again in a moment
+      document.write('<p>Error: Google Books viewer could not be loaded.</p>');
-        setTimeout(initGoogleBooks, 100);
      }
-}
+  }
-// Initialize once the page is fully loaded
-if (document.readyState === 'complete') {
+  checkAndInitialize();
-    initGoogleBooks();
+})();
-} else {
-    window.addEventListener('load', initGoogleBooks);
-}
 /* ]]> */
 </script>
+</div>
 </includeonly>