Notes to help maintain this Website! Please DO NOT delete!
|
posted Sep 25, 2012, 8:54 AM by Daniel Lavoie
posted Sep 25, 2012, 5:27 AM by Daniel Lavoie
[
updated Sep 28, 2012, 7:58 PM
]
Taken from:
https://sites.google.com/site/mori79/html-gadgets/how-tos/comment-form-board
The system is comprised of two widgets... One for posting
to a spreadsheet, the second to display the posts... It is Black
Magic! (But instructions are Complete and clear!
|
Comment
Form & Board
posted May 11, 2011 8:39 AM by
Morteza Mirmojarabian [ updated Aug 29, 2012 10:11 AM ] The
comment system at the bottom of this page is a live example of my
approach to viewers comments in Google Sites.

Comment
Form
A form to receive comments
Insert
Click
Edit page ► Insert ► More gadgets ► Public
► Search Templates: "Comment Form" by Mori ►
Select.
Some settings
Google form key Go to your
Google Docs ► click Create ► From template ►
search Public Templates: "Comment Form & Board"
► Use this template ► copy the form
key, which is at the bottom of the page. For example:
dEZzbmM1V21IdWcwYm9RWFNFeTJ1SVE6MA (For me:
dEtyemhJaDlCZDZkdWpxOGpzWkI2RlE6MA
)
Speech bubble border color You can pick any HTML
color and its darker/lighter shades.
Form elements background image The default is
a 1×50px gradient image. Feel free to use it or create
yours.
On submit As an alternative to displaying the
confirmation message, you can redirect users to
a custom 'thank you' page, to the same page where the form is, or
anywhere else you wish.
Width 800px, i.e. multi-line text field
width:492px + single-line text fields width:244px +
margins and borders:64px
Include a border around gadget Uncheck it.
Display title on gadget Uncheck
it.
Comment
Board
A guestbook to display comments
Insert
Click
Edit page ► Insert ► More gadgets ► Public
► Search Templates: "Comment Board" by Mori ►
Select.
Some settings
Google spreadsheet URL Get back to your Google Docs ►
open the template copy ► click File
► Publish to the web ► select Comments
under Sheets to publish ► uncheck Automatically
republish when changes are made if you're going to moderate
comments before they appear on the board and then manually republish
them ► click Start publishing ► copy the
generated link. For
example: https://docs.google.com/spreadsheet/pub?key=0Aliqp0kGPjWsdEZzbmM1V21IdWcwYm9RWFNFeTJ1SVE&single=true&gid=1&output=html
(For me:
https://docs.google.com/spreadsheet/pub?key=0At1jNP0rWU-EdEtyemhJaDlCZDZkdWpxOGpzWkI2RlE&single=true&gid=1&output=html)
Feed URL Select ATOM under Get
a link to the published data ► copy the generated
link and click Close. (DL's note, there is an issue with
that. The spreadsheet has to be shared with another user. Once that
user receives the email notification that a file has been shared,
simply click on the link provided and once in the spreadsheet, click
File, Publish to the Web and select ATOM from the selection box that
is defaulted to "Web Page". For me:
https://spreadsheets.google.com/feeds/list/0At1jNP0rWU-EdEtyemhJaDlCZDZkdWpxOGpzWkI2RlE/od7/public/basic)
For example:
https://spreadsheets.google.com/feeds/list/0Aliqp0kGPjWsdEZzbmM1V21IdWcwYm9RWFNFeTJ1SVE/od7/public/basic
Option: Activate your feed at Google FeedBurner to get more
subscription options and keep track of your statistics. Go
to FeedBurner ►
change https to http on your ATOM link and paste it ►
click Next ► click Next ► copy
the feed URL. For
example: http://feeds.feedburner.com/google/fWTL (For me:
http://feeds.feedburner.com/google/jQtv
) Click Skip directly to feed
management ► Publicize ► Email
Subscriptions ► Activate. You're done although
there are still many other things to customize on FeedBurner.
Dynamic height
Feed icon All your icons should be 16×16px.
Include a border around gadget Uncheck it.
Display title on gadget Uncheck
it.
Hide Comments sheet
It
makes your spreadsheet interface cleaner. But before that there are
two things you might want to do:
Customize the timestamps format Click on the Comments
sheet tab
► click the Timestamp column
letter to highlight the entire column ► click Format ►
Number.
Rename the
sheet Select Rename from the same sheet
tab menu.
Now
select Hide sheet from the same menu.
Note: To unhide it at any time, click View ► Hidden
sheets.
Format Source sheet
It
improves the spreadsheet usability.
Resize columns There are two ways to change column width:
Place your mouse pointer on the columns dividing
border ►
click and drag the arrow in the direction you'd like your column to
expand or contract.
Click on the column letter menu ►
select Resize column ► enter a new value ► click
OK.
Highlight admin's
comments Click on the Name column letter menu ►
select Conditional formatting ► select Text
is exactly from the drop-down menu ► enter the admin
display name ► set a text color and/or cell background
color ► click Save rules.
Define the
correct TimeZone: File, Spreadsheet Settings, select GMT-5
Get
notifications
Here are a
couple of options:
Click Subscribe to comments to get updates in your
feed reader or via email.
Define a notification rule on
the spreadsheet Click the Tools drop-down
menu ► Notification rules ► check A
user submits a form and Email - right away ► click
Save ► Done.
Answer
comments
Simply
type in your answer on the row below the viewer's comment. If the row
below is already filled, right-click the comment
row number to highlight the entire row ► select Insert 1
below from the drop-down menu ► enter your comment.
Remove
spam
Right-click the spam comment row number to
highlight the entire row ► select Delete row from the
drop-down menu.
Republish
comments
After you've
done moderating comments, click the File drop-down menu ►
Publish to the web ► Republish now. |
posted Sep 25, 2012, 2:51 AM by Daniel Lavoie
The Announcement Templates creates a link to "Subscribe to Posts", however the link sent for Posts looks like: https://sites.google.com/a/afterhourswoodshop.com/home/admin-notes/posts.xml.... Is it possible to tweak the configuration so that my registered domain name is used instead of the Google domain? |
posted Sep 25, 2012, 1:15 AM by Daniel Lavoie
Recipe taken from http://www.h3ather.com/add-twitter-feed-widget-to-google-sites-pages Phi Remi · Performer at Carnival EpsilonThey recently updated the widgets, so now the code generated is now something like <a class="stuff"><script>! function *more stuff*</script>.
So, here's what I did: ----------copy everything below this line------------ <Module> <ModulePrefs title="Twitter"/> <Content type="html"> <![CDATA[ Replace this entire line with the code generated from the twitter widgets page. ]]> </Content> </Module> ----------copy everything above this line---------------
Save that file as an xml (filename.xml).
Upload to the public folder in DropBox and copy the public link. You can also upload the xml to your google sites account, and copy the download location (remove the? redirect junk after the xml when pasting though). AND replace "https://" with "http://" after pasting the Link.
In the google sites page editor go to. Insert -> More Gadgets -> Add Gadget by URL. Paste in the link from DropBox or your google upload and save the gadget. Also, save the google sites page.
In Chrome, reload the page (it will still only display Tweets from @Username). Right click the page, and select Inspect Element. Make sure Elements is the selected Tab in the window. Click on the little red x or yellow triangle in the bottom right corner. One of the error messages will say something along the lines of. 'randomnumbersandletters-a-sites-opensocial.googleusercontent.com' is not whitelisted on this domain.
Copy that address, and paste it into the Domains section of the widget editor on Twitter. Save the widget, and refresh the Google sites page.
I made the mistake of just listing sites.google.com in the domains section! Hopefully this will help some of you getting the same error! |
Note the (4) Domains listed!
The Code produced is: <a class="twitter-timeline" href="https://twitter.com/LavoieDan" data-widget-id="249048191134208001">Tweets by @LavoieDan</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>NOTE: It is possible to go back to that TWITTER page and make changes to the Widget by clicking Edit
To obtain the Inspect element string... Right click on the Gadget that looks like a blank Gadget from the Website page and Inspect Element. (Note that the Gadget will be blank when you do this, since it is not working without that 4th Domain added to the Widget Creation parameters)
The XML file needed is: (Yellow Stuff Taken from Twitter Widget " Creator") <Module> <ModulePrefs title="Twitter"/> <Content type="html"> <![CDATA[ <a class="twitter-timeline" href="https://twitter.com/LavoieDan" data-widget-id="249048191134208001">Tweets by @LavoieDan</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> ]]> </Content> </Module> |
Upload (Manage Site, Attachments, Upload) the XML file to: sites.google.com/site/lavoiedan/ Public Access to the Site was enabled when I did this. Editor's NOTE: The above has all the necessary content but should be cleaned up... Now it is only a matter of deciding where I will put that new Gadget on my Site versus the News Blog and External Blog Page...(!) |
|