Widget:Google Books: Difference between revisions

Revision as of 15:29, 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:

@@ Line 6: / Line 6: @@
 To use this widget, add the following code to your wiki page:
-<pre>
-{{#widget:Google_Books
- |id=BOOK_ID
- |width=600
- |height=500
-}}
-</pre>
-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 [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} complete source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''.
 </noinclude>
 <includeonly>
-<!-- Simple container that will be filled by the Google Books API -->
+<!-- This is important: Place the viewer exactly where we want it -->
-<div id="viewerCanvas<!--{$id|escape:'html'}-->" style="width:<!--{$width|escape:'html'|default:'600'}-->px; height:<!--{$height|escape:'html'|default:'500'}-->px; margin:1em 0;"></div>
+<div style="position:relative; width:<!--{$width|escape:'html'|default:'600'}-->px; height:<!--{$height|escape:'html'|default:'500'}-->px; margin:1em 0;">
+  <script type="text/javascript" src="https://books.google.com/books/previewlib.js"></script>
-<!-- Load the Google Books API -->
+  <script type="text/javascript">
-<script type="text/javascript" src="https://books.google.com/books/api.js"></script>
+  /* <![CDATA[ */
+  (function() {
-<!-- Initialize the viewer -->
+    var bId = "<!--{$id|escape:'html'}-->";
-<script type="text/javascript">
+    var width = <!--{$width|escape:'html'|default:'600'}-->;
-/* <![CDATA[ */
+    var height = <!--{$height|escape:'html'|default:'500'}-->;
-google.books.load();
+    // Create an inline placeholder
-function initialize() {
+    document.write('<div id="gbPreviewContainer_' + bId + '" style="width:' + width + 'px; height:' + height + 'px;"></div>');
-  var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas<!--{$id|escape:'html'}-->'));
-  viewer.load('ISBN:<!--{$id|escape:'html'}-->');
+    // Insert the viewer at the placeholder location
-}
+    function insertViewer() {
+      if (typeof GBS_insertEmbeddedViewer === 'function') {
-google.books.setOnLoadCallback(initialize);
+        GBS_insertEmbeddedViewer(bId, width, height);
-/* ]]> */
+      } else {
-</script>
+        // Retry if API not loaded yet
+        setTimeout(insertViewer, 100);
+      }
+    }
+    insertViewer();
+  })();
+  /* ]]> */
+  </script>
+</div>
 </includeonly>