The Summer Reader 2013 widgets will allow you to take basic Summer Reader functions and integrate them into your current website. For example you will be able to allow patrons to login to their program right from your home page or teen page. You will be able to post reviews of books your kids have done anywhere within your website. You can do this and more with a few cuts and pastes. So let’s get started.
To make the widgets work, you will need four files that we supply. They are located in the root folder of your Summer Reader program. Example URL: http://yourserver/evanced/sr/readerwidget.html. They can be read and saved locally with your browser. If you are using IE then you will be prompted to download the file. If you are using Firefox, the files are pulled into the browser window and have to copied and pasted.You can also download the latest files from our demo site:
The files readerwidget.css, readerwidget.js and srproxy.htm need to be placed in the same folder as your library's HTML files.
A little info about each of the files:
File 1: readerwidget.html (This is a sample page that contains the code that you will copy and paste within your website to activate the widgets.)
File 1: readerwidget.css (This is where the style sheet settings for the widgets are located.) Please note that you will be able to customize your widgets using the readerwidget.css style sheet file.
File 3: readwidget.js (This is the code that the widgets need in order to function.)
File 4: srproxy.htm (This file is only required if you are integrating with Facebook or Novelist Select. You must use "View Source” and copy and paste contents of the file into a text editor and save as "srproxy.htm” on your site.) So we need to figure out what to do with all the code in the .HTML file.
1. We need to define our variables so lets just copy (from readerwidget.html) and paste them before the <HTML> tag on our page (see graphic below).
Set the ServerPath within this section of code. This tells the code where to get the data from (the path to your Summer Reader installation). It should look something like this ‘http://yourserver/evanced/sr/’. Set the ReturnPage to the fully qualified URL of your library's HTML page. Set the ProgramID to point to the specific program you will be using.
NOTE: The ProgramID can be found by logging into Summer Reader. Click ‘System Maintenance’ then click ‘Edit Program’ and select your specific program. At the top is the Program ID.
The default PageLangID may also need to be changed. This is the default language used by the widgets. To determine the PageLangID to use, go to ‘System Maintenance’ then click ‘Edit Program’ and click on the ‘Language Setup’ button. Make note of your program’s default language. Now, go back to ‘System Maintenance’ and click on ‘Language Setup’ and then click on your program’s default language. The Language ID is located at the top of the page. Set the PageLangID to this value.
NOTE: In order to use the UTF character set for compliance with alternative languages, the following META tag must be set.
The arrScriptBlocks variables tell the page where to get the information from and then where to put it within your HTML page. arrScriptBlocks and arrScriptBlocks should not be altered or removed – these call housekeeping routines that are required. The other arrScriptBlocks variables can be removed if not being used. For example, to remove the "links” script block, the code would look like this:
The array declaration was changed from 4 to 3 and the arrScriptBlocks variables following the "links” script block variable were renumbered.
The "reviews” script block in this section controls the behavior of the reviews displayed on your HTML page. It contains two additional configuration URL parameters – random and limit. These can be set differently to change the behavior of the reviews displayed on your HTML page. If you set random=N then only the latest reviews determined by the date that they were submitted are pulled in rather than in a random fashion. If you set limit=10 then 10 reviews will be pulled in rather than the default of 3.
2. The following variables must be included in your html page.
3. The highlighted HTML below must be included if your program is set up for 2 or more languages. This widget provides a drop-down list of your program languages for the patron to select from.
4. The highlighted HTML below is the links widget. This widget pulls in your program’s links.
5. The highlighted HTML below is the prize message widget. This pulls in the program’s prize message when a patron is eligible for a prize. This assumes that the settings are set appropriately to show the prize message.
6. The highlighted HTML below is the certificate message widget. This pulls in the program’s certificate message when a patron is eligible print their certificate. This assumes that the settings are set appropriately to show the certificate message.
7. The highlighted HTML below is the login widget. Depending on whether the patron is logged in or out determines the various buttons that are displayed. Some buttons visibility is based on the various configuration settings in the program’s setup and whether the patron is logged in or out.
8. The highlighted HTML below is the messages widget. This widget pulls in your program messages.
9. The highlighted HTML below is the reviews widget. This widget pulls in accepted patron reviews and displays the buttons for patrons to submit (if program is configured appropriately) or view additional reviews.
10. The highlighted HTML below is necessary if you have enabled your program for Facebook integration. The file "srproxy.htm” also needs to be included on your site. This code should be placed within the "<body></body>” tags of your HTML page.
11. The highlighted HTML below is necessary if Novelist Select has been enabled. The file "srproxy.htm” also needs to be included on your site.
This is because you must change the div ID. The first can remain being named id=”divLinks” while you can name the second something else like id=”divLinks2”. See the screenshot below for an example:
This can be for several reasons:
You are able to do this within the readerwidget.css file. Please note that you must have a general knowledge of style sheets in order to use. (Review the style sheets section in the user manual for more info)
Article ID: 509
Created On: Tue, Apr 9, 2013 at 9:39 AM
Last Updated On: Thu, Jan 23, 2014 at 9:34 AM
Online URL: https://kb.demcosoftware.com/article.php?id=509