remove the footer in Google Books Embedded Viewer API

This Google book preview example will display “book not found” message if the Google book preview API did not find the book based on the isbn number. If the book is found, it will display the book preview WITHOUT the (Google books BUY THIS BOOK More about this book) footer.

googlePreview.html, displays the Google Preview directly when page loads.

<html>
  <head>
    <title>Removing the Footer in Google Books Embedded Viewer API Example</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("books", "0");

      function initialize() {
	    var display_options = {showLinkChrome: false};
        var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'),display_options);
        
		//This load function, will run the 2nd para if the book is not found, and run the 3rd parameter if the book is found.
		viewer.load('ISBN:0738531367', bookNotFound, removePreviewFooter);
      }
	  
	  function bookNotFound()
	  {
		document.getElementById('viewerCanvas').innerHTML="<h1>Oops! Preview not found for this book!</h1>";
	  }
	  
	  function removePreviewFooter()
	  {
		$('#viewerCanvas > div > div:nth-child(2)').css('display','none');
	  }

      google.setOnLoadCallback(initialize);
    </script>
  </head>
  <body>
    <div id="viewerCanvas" style="width: 500px; height: 700px"></div>
  </body>
</html>

customGooglePreview.html, shows the Google Preview Button when the page loads, popup a custom jQuery dialog contain the Google Book Preview when clicked. 

<html>
<head>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<style>
	  .ui-dialog,.ui-dialog, .ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {}
</style>
</head>
<body>
<div id="viewerCanvass" style="width: 88px; height: 31px"></div>
<script type="text/javascript">
	google.load("books", "0");
	//var bookFound=0;
	function alertNotFound() {
	//alert("could not embed the book!");

	}

	function alertInitialized() {
	  //var msg="book found!";
	  //bookfound=1;
	  //alert(msg);
	  document.getElementById('viewerCanvass').innerHTML='<input type="image" src="https://www.google.com/intl/en/googlebooks/images/gbs_preview_button1.gif?hl=ja" id="googlePreview" onClick="showDialog();" />';
	}

	function initialize() {
	var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvass'));
	viewer.load('ISBN:0738531367', alertNotFound, alertInitialized);
	}

	google.setOnLoadCallback(initialize);

</script>

<script type="text/javascript">
function showDialog()
{

    $('<iframe scrolling="no" id="googlePreviewIframe" src="googlePreview.html"/>').dialog(
    {
		title: 'Book Preview',
        width: 540,
        height: 700,
		modal: true,
		resizable: false,
		autoResize: false,
        open: function(event, ui){}
     });
}
</script>
<style>#googlePreviewIframe {width:510px !important; height:740px !important;}</style>
</body>
</html>

Search within Codexpedia

Custom Search

Search the entire web

Custom Search