Widget:Google Books: Difference between revisions

Latest revision as of 15:34, 10 March 2025

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

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

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

Parameters:

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 id="googlebooks-<!--{$id|escape:'html'}-->"></div>
+<!-- Main container div with explicit sizing -->
-<script type="text/javascript" src="https://books.google.com/books/previewlib.js"></script>
+<div style="width:<!--{$width|escape:'html'|default:'600'}-->px; height:<!--{$height|escape:'html'|default:'500'}-->px; margin:1em 0;">
+  <!-- The ID must match what's used in the script -->
+  <div id="viewerCanvas<!--{$id|escape:'html'}-->" style="width:100%; height:100%;"></div>
+</div>
+<!-- Load the Google Books API -->
+<script type="text/javascript" src="https://www.google.com/books/jsapi.js"></script>
+<!-- Initialize the viewer -->
 <script type="text/javascript">
 /* <![CDATA[ */
-var width = <!--{$width|escape:'html'|default:'600'}-->;
+function initializeGoogleBooksViewer() {
-var height = <!--{$height|escape:'html'|default:'500'}-->;
+  var viewer = new google.books.DefaultViewer(
-var bookId = "<!--{$id|escape:'html'}-->";
+    document.getElementById('viewerCanvas<!--{$id|escape:'html'}-->')
-if (typeof GBS_insertEmbeddedViewer === 'function') {
+  );
-    GBS_insertEmbeddedViewer(bookId, width, height);
+  viewer.load('<!--{$id|escape:'html'}-->');
+}
+if (typeof google !== 'undefined' && google.books) {
+  google.books.load();
+  google.books.setOnLoadCallback(initializeGoogleBooksViewer);
 }
 /* ]]> */
 </script>
 </includeonly>