Snap! Documentation

(Snap! logo)The Snap! Documentation book was written to help you use your Snap! website.

The book also describes the management of your Snap! features which is done on our made company website (for security reasons.)

If you have any question or comment about one of the points discussed here, please, feel free to post a comment on the very page that has the problem. Your participation is what will help us ameliorate this document and Snap! as a whole.

Many questions are also answered in our Frequently Asked Questions pages.

Content

Learn how to manage your content.

With Snap! maintaining your pages is particularly easy since you can just go to a page to edit it and change:

Snap! also supports drafts, revisions and scheduled content1.

The following pages explain each of the entries found on a page edit form, what its purpose is, and some gotchas in the last article.

CKeditor

CKeditor, the text editor for Internet

Introduction

(Small Snap! Logo) Snap! uses the CKeditor as its WYSIWYG editor. It allows you to create posts that are formatted as in your Word processor.

This page helps you understand and makes full use of the widgets available in your editor.

Adding a space between an Image and text

When adding an image with a Left or Right alignment, the image is added along your paragraph text. This means it may touch your text or be really close to it.

There are two solutions to fix this problem.

CSS Margin (Harder to learn, much faster to run)

For people who are not familiar with HTML and CSS, this solution is a little harder. However, it means loading just and only an extra 40 characters or so, which means it will run faster than the other solution proposed here.

Steps to implement the image margin:

  1. Edit the page to correct.
  2. Right-click on the image to fix and select Image Properties1.
  3. Once the image window is loaded, click on the Advanced tab.
  4. Now you see the Style text field, enter the CSS code as shown below.
  5. Click on OK.
  6. Save your changes by saving the page.

The CSS code includes margins. The margins will vary depending on whether you want to show the image on the left side or the right side. Note that with a list in your text, we strongly suggest that you place the image on the right side as some browser do not properly indent lists when an image is on their left.

The code we use for an image on the right side is like this:

   margin-left: 10px; margin-bottom: 10px;

The 10px means 10 pixels. You may make this smaller or larger. For images pushed to the left side, the margin-left becomes margin-right.

Why not use padding?

At times, people ask why did we choose margin rather than padding? Simple! When you want to add a nice border, you also use a style and if you have a padding, the border will appear away from your image. To add a nice border with the style feature, use this code:

   border: 1px solid black;

CSS accepts colors with the hash character as well. Black is represented as all zeroes: #000000. The first two digits represent red, the two middle ones represent green and the last two represent blue.

It works in the editor, but once I save it looks like it has no effect?

Try editing again, and make sure that the Input format you selected allows all HTML tags.

When you use a strong Input format, Snap! removes all the style references and thus your margin specification will be removed before display.

Can I use the same technique to push the image away from the edge?

Absolutely! The margin-left and margin-right can be used to push the image from the edge it is shown against. Since margins can also be negative, it is possible to push them in the page margins. You have to be careful with that capability though. And some browsers (IE 6.x and older) are likely to crop those images to the page (it will depend on your theme.)

Image Margin (edit the source image)

Although we do not recommend this solution, some people find it easier. The idea is very simple. You first edit your image and add some edges within the image. If you use a theme with a plain color background, then you can simply fill the added edges with that color (i.e. we would use white for our website.) If your background has gradients or an image, you want to use transparent edges.

The edges will be of the size you want them to be to push the text away from the actual image. You should add an edge at the bottom and on the left or right sides as required.

Save and reload the image to your website page. Don't forget to save the page.

One obvious drawback with this solution is that the image generally becomes much bigger. It will add more than the 40 bytes of the CSS Margin solution.

  • 1. You may also click on the image with the left mouse button and then click on the Image icon in the toolbar.

Inserting a link in your text

Link Basics

The FCKeditor let you insert links with the use of the link icon.

First, select the text you want to activate, then click the icon.

A pop-up window appears asking you to enter your link information.

By default the window is in Link mode. It is possible to change it to enter an anchor or an email instead.

An anchor is a named location within your page. For example, a page with a table of contents at the top will send you to a different location in that page whenever you click on a link inside the table of contents.

Email links are used to send your users to their mail system such as Outlook or Thunderbird.

Links Details

Link type: URL

Enter your link on the provided line. For external link, it is often a good idea to make a copy of the URL from the Location bar of your browser and pasting that information in the Link URL box. In this case, the protocol will automatically change, you can also change it manually when necessary. In most cases, HTTP is the correct protocol. Once in a while, you are sending users to an encrypted page. In that case, use the HTTPS entry. The other entries are for experts and should be self explanatory.

In order to create a local link (opposed to an external link, in other words, to create a link that points to another page on your website,) use the path to that page starting with a slash character. For example, to go back to your home page, use "/" by itself. To go to the user log in page, use "/user", etc.

When you see a Browse Server button at the bottom of the pop-up window, you can add a link to a file that you uploaded earlier. For example, you could upload a PDF file and then add an inline link to that PDF file.

Link type: Link to anchor in the text

The link will send your users to another location on the same page. Before you can add such links, you must add anchors (see the anchor icon?)

The system gives you a choice only of the existing anchors. This means you probably want to create all your anchors first, then add in-page links.

Link type: E-Mail

The pop-up window changes the interface to show email fields address, message subject and message body.

The email address is required. The other fields are optional.

It is generally a good idea to enter a default subject line as most users will otherwise not enter any subject for your emails.

Link Target

Target Name

Did you notice this tab? It is used to define the target: where the destination should be loaded and shown.

The target name represents the name give to a FRAME or IFRAME object. By default, links are viewed as _self meaning that the destination is to be opened in the current frame.

There are a few other special target names:

The _blank target is one of the mostly used targets. It forces the opening of a new window when the user clicks the link.

The _parent target opens the destination in the parent frame.

The _top target opens the destination in the main window ignoring all the existing frames.

In Snap!, you are not likely to have frames as dynamic websites don't generally make use of them. This means you generally will use the _blank target only.

Relative information

When defining a link, it is possible to mark it as a Follow link (default) or a No Follow link.

You want to use Follow links in most cases. However, No Follow are important for your SEO rank.

The main reason to use the No Follow is to link to a page (or website) that links to you. If you don't do that, you generally lose the SEO increase that this link was giving you.

Advanced Features

Most of the advanced features of a link are not very necessary in the Snap! environment.

Still, there is one advanced feature you want to fill: the Advisory Title.

This title shows up as a tooltip when someone navigates over the link giving additional information about the link (i.e. incentive to click that link.)

If you are an expert, feel free to use the other options to your liking.

Languages and their abbreviation

The following are the 2 letters abbreviations used for languages in the world. This table does not include all languages referenced in ISO 639. It only shows the languages with a 2 letter abbreviation.

Remember that languages are not directly tight to countries. For examples, the UK, US and Canadian countries speak English, French, Spanish, Irish, Welch, Scottish, and many other less known languages.

Note also that there is duplication in the abbreviations. For example, the "cu" abbreviation references 3 distinct Old Slavonic languages.

Language Name ISO 639-1
Abkhazian ab
Afar aa
Afrikaans af
Akan ak
Albanian sq
Amharic am
Arabic ar
Aragonese an
Armenian hy
Assamese as
Avaric av
Avestan ae
Aymara ay
Azerbaijani az
Bambara bm
Bashkir ba
Basque eu
Belarusian be
Bengali bn
Bihari languages bh
Bislama bi
Bokmål, Norwegian nb
Bosnian bs
Breton br
Bulgarian bg
Burmese my
Castilian es
Catalan ca
Central Khmer km
Chamorro ch
Chechen ce
Chewa ny
Chichewa ny
Chinese zh
Chuang za
Church Slavic cu
Church Slavonic cu
Chuvash cv
Cornish kw
Corsican co
Cree cr
Croatian hr
Czech cs
Danish da
Dhivehi dv
Divehi dv
Dutch nl
Dzongkha dz
English en
Esperanto eo
Estonian et
Ewe ee
Faroese fo
Fijian fj
Finnish fi
Flemish nl
French fr
Fulah ff
Gaelic gd
Galician gl
Ganda lg
Georgian ka
German de
Gikuyu ki
Greek el
Greenlandic kl
Guarani gn
Gujarati gu
Haitian ht
Haitian Creole ht
Hausa ha
Hebrew he
Herero hz
Hindi hi
Hiri Motu ho
Hungarian hu
Icelandic is
Ido io
Igbo ig
Indonesian id
Interlingua ia
Interlingue ie
Inuktitut iu
Inupiaq ik
Irish ga
Italian it
Japanese ja
Javanese jv
Kalaallisut kl
Kannada kn
Kanuri kr
Kashmiri ks
Kazakh kk
Kikuyu ki
Kinyarwanda rw
Kirghiz ky
Komi kv
Kongo kg
Korean ko
Kuanyama kj
Kurdish ku
Kwanyama kj
Kyrgyz ky
Lao lo
Latin la
Latvian lv
Letzeburgesch lb
Limburgan li
Limburger li
Limburgish li
Lingala ln
Lithuanian lt
Luba-Katanga lu
Luxembourgish lb
Macedonian mk
Malagasy mg
Malay ms
Malayalam ml
Maldivian dv
Maltese mt
Manx gv
Maori mi
Marathi mr
Marshallese mh
Moldavian ro
Moldovan ro
Mongolian mn
Nauru na
Navaho nv
Navajo nv
Ndebele, North nd
Ndebele, South nr
Ndonga ng
Nepali ne
North Ndebele nd
Northern Sami se
Norwegian no
Norwegian Bokmål nb
Norwegian Nynorsk nn
Nuosu ii
Nyanja ny
Nynorsk, Norwegian nn
Occidental ie
Occitan (post 1500) oc
Ojibwa oj
Old Bulgarian cu
Old Church Slavonic cu
Old Slavonic cu
Oriya or
Oromo om
Ossetian os
Ossetic os
Pali pi
Panjabi pa
Pashto ps
Persian fa
Polish pl
Portuguese pt
Punjabi pa
Pushto ps
Quechua qu
Romanian ro
Romansh rm
Rundi rn
Russian ru
Samoan sm
Sango sg
Sanskrit sa
Sardinian sc
Scottish Gaelic gd
Serbian sr
Shona sn
Sichuan Yi ii
Sindhi sd
Sinhala si
Sinhalese si
Slovak sk
Slovenian sl
Somali so
Sotho, Southern st
South Ndebele nr
Spanish es
Sundanese su
Swahili sw
Swati ss
Swedish sv
Tagalog tl
Tahitian ty
Tajik tg
Tamil ta
Tatar tt
Telugu te
Thai th
Tibetan bo
Tigrinya ti
Tonga (Tonga Islands) to
Tsonga ts
Tswana tn
Turkish tr
Turkmen tk
Twi tw
Uighur ug
Ukrainian uk
Urdu ur
Uyghur ug
Uzbek uz
Valencian ca
Venda ve
Vietnamese vi
Volapük vo
Walloon wa
Welsh cy
Western Frisian fy
Wolof wo
Xhosa xh
Yiddish yi
Yoruba yo
Zhuang za
Zulu zu

Complete table available at Codes for the Representation of Names of Languages

Meta Tags (keywords, descriptions, etc.)

Snap! offers all the necessary meta tags, especially the tags that are important for SEO1. The following describes the three meta tags main areas. There is a brief outline:

  1. Basic meta tags

Basic meta tags include the one meta tag that you always hear about: keywords. Snap! offers two means to enter keywords: (a) an input area to enter the keywords manually; (b) a taxonomy of tags that are automatically transformed in keywords.

The other basic meta tags that are important are: a page abstract, a description and a copyright.

Snap! also offers some more meta tags that are generally less important but may be of interest to you. For example, the author of an article can be mentioned using the Author meta tag.

It is also possible to define a default value which means that you won't have to manually enter your copyright on each page. For example, the copyright meta tag is most often setup for the entire website (i.e. © 2011 by Made to Order Software Corporation.)

  1. Advanced meta tags

Snap! actually offers many meta tags. The advanced meta tags are really only necessary on advanced websites. It will generally not add much of anything to your website to use them. For example, on a website describing your vacation all over the world, you might want to include the location meta tags. By default no location is offered in a message. With the location meta tags, you can enter the longitude and latitude. We also offer an extension to enter a complete address, a description of the area and a few other similar parameters.

  1. Automatic meta tags

Snap! automatically fills a certain number of meta tags for you. This makes your life a lot simpler and ensures a good set of meta tags. Among the automatic meta tags are the canonical URL to each one of your pages, the content type of the page (text/UTF-8), the author of the page, and when available a short URL.

As you grow the number of features on your Snap! website, so does the number of automatic meta tags.

Snap! Meta Tag: Description

The Snap! system includes the Description Meta Tag.

The description appears as a text area where you can enter a few sentences representing the resume of your page. This is used in 2 different places:

1) In search engines when a result is shown about that one page, the search engine may decide to show your description instead of the content of the page itself;

2) When your page is pinged and the received decides to show your page, it may either pick the page teaser or the description.

When writing with SEO in mind, you want to remember that the description should not include the question and answer of your post. If you give away the answer, why would I click on the link to get to the full article?

To access the description of a page click on the "Meta tag" field set while editing the page then enter the description in the field of that name.

Snap! Meta Tag: Keywords

In general, large search engines such as Google, Yahoo!, and Bing, do not take your keywords in account. At least, so they say. Yet, most SEO expert will tell you that including keywords on your pages is a very important idea. The main reason why is that those words are viewed as words being highlighted.

To make an analogy: by adding keywords in the Snap! Keyword Meta Data you make all those keywords bold face.

Keywords are written one after another and separated by commas.

For example, this very page can use the following keywords: keywords, meta data, Snap!, SEO

Note that in most cases keywords are entered in lowercase unless they represent an invariant name such as Snap! in our example, or an abbreviation usually written in uppercase, such as SEO in our example.

Keywords can be multiple words, as shown in our example: meta data. It should not be a sentence, however.

Snap! also offers the option to enter tags on a page. These tags can then be added to the Keyword Meta Data field. When used along the Automatic Add Terms feature, it is very powerful since the most used words automatically become your page keywords.

Thus, this meta tag can either be used manually or as the automatic keywords gatherer.

Snap! Meta Tag: Page Title

The Meta Tag support by the Snap! system includes the Page Title Meta Tag.

In generally, this option is not necessary because the <title> tag is already present on all pages. However, the title meta tag is different.

The <title> tag is defined as:

  • The title of the page1
  • A vertical bar (|) character
  • The name of your website2

In comparison, the Page Title Meta Tag only includes the title of the page (first bullet point.)

The title is automatically added to your meta tags when the dc.title meta tag is turned on.

  • 1. The title is what you enter in the Title box when creating/editing a page.
  • 2. When we create your website, we generate a default name. Once your website is ready, you should first go to your Site Information page to edit the name of your website to your liking.

Snap! Meta Tag: Special Pages

Most websites will have a certain number of special pages. For example, the default front page does not offer an "Edit" link since the page is automatically generated from the latest 10 posts. That page cannot be assigned meta tags by editing the page, instead you need to go to the administrative screens of the Meta Tags extension.

Click on the Admin tab of your Toolbar, then click on Settings.

In the list of settings, look for Meta tags under Content management. (Admin » Settings » Content Management » Meta tags) Click on it to enter the Meta tags administration screen.

At the top you see a set of tabs, click on Custom Pages Meta Tags.

That page lists all the pages that you already customized. Click the edit link to modify the Meta tags on those pages.

To add new pages, use Add tab at the top. This brings you to the Meta tags editor. The following are the different entries you want to fill:

  • Enter a name that makes sense to you (usually the title of the page you're editing,)
  • Enter the path to your page1,
  • Ignore the weight unless you use the asterisk (*) in your paths,
  • The other fields are the same as what you otherwise see on your pages, fill them you otherwise would for that one page.

Future versions may include an easy link on all pages so one can edit the Meta tags without having to go to the administration screen.

  • 1. Note that you can actually enter multiple paths. Generally this is not a good idea because Google doesn't like it when you define the exact same title, description, keywords on different pages.

Snap! Blocks

In your Snap! Website, Blocks are used to add content on the edges, the top and the bottom of your content.

For example, the Snap! Websites we show our Facebook page widget on the side. This is done with blocks.

You may create HTML blocks, in which case you can enter HTML code directly in the block. This is useful when someone sends you HTML code for their ad, a widget (such as the Facebook widget), or some block that would otherwise be very difficult to format with the editor.

By default blocks appear on all your pages. It is customary to hide some blocks from the administration pages, but it is not required. At times, although, you may want a block to only appear on a specific page. This is done by adding the path of the page at the bottom. For example, this page is snap-documentation/content/snap-blocks (you can see that in your location bar of your browser at the top, anything after the domain name. Note that you do not include the starting / character.)

Snap! Creating new pages

Creating a Page: the basics

By default, you get 3 icons in the MO Toolbar that give you a mean to add pages to your website. These are the Primary, Secondary and Journal icons (this may vary depending on your website.)

The following shows you an example where you get the Journal, a (primary) Page, and Ads (which are also pages!)

Specialized toolbar showing the Journal, Page and Ad icons.

When you click on one of those icons, you get a form to fill out to create the page. The form includes 4 main items that you want to take care of:

Title (required)

The title appears first and is a descriptive of your new page. The content of the page should dictate the title, but you have several points to follow to make your website as SEO as possible. One is to include your product or service name in the title. If you website name already includes such, then it is not necessary to do that.

The title should be long enough (16 characters) and not too long (63 characters is the suggested maximum, because Google shows up to 63 or 64 characters of your title in their search results.)

See also: Snap! Page Title

Menu settings

The menu entry appears next. It is a good idea to fill in the menu if you want the item to appear in a specific place. In other words, for a Primary or Secondary Page, they will automatically be placed in a menu as expected for such a page.

There are also some special type of pages that you do not want in a menu: especially your Journal or Blog posts, it also applies to Ads and Book pages (other than the root page of the book.) These are not put in a menu because they instead appear in a list on a specialized page. For example, on the Snap! website, we have a Blog page that presents you with the last 10 posts written about Snap!

For these reasons, by default the Menu form is hidden. You have to click on the Menu field set title to open it and enter information.

You can enter the menu title. This is generally similar to the page title, but shorter.

The "Parent item" indicates the menu in which this page appears. The menu is organized as a tree, and you are free to define any other item as the parent of this new item. The tree may be displayed as a drop down menu, or just a tree on your screen.

The Weight parameter indicates the position of the item (the order.) A smaller weight (negative) places the item before others. A larger weight (positive) places the item after others. By default, the weight is set to 0 and items with the same weight are ordered alphabetically. In other words, if you never change the weight, your menu will be sorted alphabetically.

Advanced websites will get the Menu item attributes feature. This allows you to define entries such as extra HTML classes, the shortcut key (Alt+L could send your users to a Location page showing your store location in a Google map.) There is also a Target feature which, when set to "_blank", allows you to force the opening of a new window when the user clicks on the menu link.

See also: Snap! Menus

Body (at times called Description)

The Body of your page is the actual content. For example, what you are reading right now is part of the body of the page.

You are more than welcome to enter all the necessary content on your pages. There is one thing to be aware of, however:

If you paste content from MS-Word, you MUST use the paste from Word feature. If you do not, the content of your node will not work as expected. MS-Word adds a very large number of tags that are not well supported by any browser other than Internet Explorer.

The body can be of any length, although, frankly, a page of more than 64Kb of text is HUGE. You won't get very many people reading that page since it will take a long time to load and most of the people will leave after the 4th or 5th paragraph, at the most.

Input format (VERY IMPORTANT)

Your Body is followed by an option called Input format. This is hidden by default (mainly to avoid taking too much space.)

Formats are used to control the content that can be posted. This allows for much higher security by preventing lesser users from posting things that could hurt others. However, the default Input format is generally not what you want because it filters out most of the formatting that you apply in your posts (all the formatting that is considered not safe.) Especially, you will lose colors, flash animations, font and size specifications.

When you create a new page, make sure to click on Input format to open the field set, and then click on Full HTML to make sure that your formatting gets saved.

Creating a Page: Advance Topics

Administrators, editors and authors have access to the other features. These are less important meaning that if you do not edit them, your page will still work just fine. However, using them will generally enhance your website.

Meta Tags

The meta tags field set includes several boxes. One to enter a brief description of your article and another to enter keywords. Advanced websites may include many more fields.

The meta tags are shown when you ask for the Page Information. Search engines use them to determine different details about your website. For example, Snap! can offer a Copyright and an Author meta tag entry. These define the owner of the copyright and the name of the author(s) of that page.

Revision information

Information about the changes made to a page. In general you do not use this field while creating a new page. It is much more useful when making an update to explain what was modified and why. This is particularly useful if you have many users working on the same website and want to enforce a review process.

URL path settings

By default, the URL is created based on the title of the page. Spaces are transformed in dashes and small words such as "of", "the", etc. are removed.

You may click on this link and uncheck to enter your own URL. Dashes should be used for spaces and you should avoid any special characters (limit your URL to letters A-Z, a-z and digits 0-9).

Comment settings

Depending on the type of page you are creating, adding comments may or may not be possible. For example, a primary or secondary page does not accept comments by default. A journal accepts all comments.

You have three choices available: Disabled, Read Only and Read/Write.

You are free to change the settings when a page retires and you do not want to get any comments on that page.

File attachment

It is possible to attach one or more files to a page. The attachments appear at the bottom of the page once the page is saved. You can then copy the path to the file, edit and paste the path to a place of your choosing in your page.

By default Snap! offers a limited amount of space for uploads, mainly to protect us from hackers. If uploading your file attachment generates errors, contact us and we'll look into it.

Authoring information

The Authoring information field set includes the author of this node. The author is the person who created a page. It also includes the date when the node was written.

Publishing Options

When publishing a page on Snap! it can be mark as Sticky. This means the page stays at the top your lists. This is particularly useful for Journals since those posts would otherwise scroll down, possibly faster than you'd like too.

The Promote to front page flag is used to post the page in your RSS feed and if you are showing your Journal posts on your front page, new items appear there too.

Snap! Form Country Component

Creating a Country Component

The (Small Snap! Logo) Snap! Form feature is useful to create a form that your visitors fill up with information that you can then access in your website submissions and receive in an email.

When you want to ask the user to enter the name of their country, you can offer a freestyle text field. The problem with those is that people can enter anything they want...

Another way is to create a Select widget and enter the list of countries you accept. When the list of countries is limited, this is acceptable. If you want to accept all the countries in the world, however, that's about 240 names!

To help you with that, we offer the complete list of countries in a text file.

Creating the widget

Go to your (Small Snap! Logo) Snap! Form and click on Edit.

Once the editor appears, you have a new tab at the top Form components, click on it.

Adding new component

New component sample.This gives you the list of existing components. At the bottom of the list, you can notice a text field, a drop-down, check boxes and the Add button. Enter Country in the text field and Select in the drop-down. Mark the field mandatory and to be sent by email depending on your needs.

Setting up component options

Component form.Once you clicked on Add, you reach the component form. Here, you can enter the name of the component, its default value, and for a select the list of accepted value which is what will appear in your drop-down widget.

As you can see in our screenshot on the right side, we entered Country as the field name and United States as the default value.

Then the Options field includes all the options that appear in our drop-down. In our case, those are the country names as found in the list of countries.

Make the widget a drop-down box

Mark the widget as a list.Finally, lower in this form, you want to check the Select list box as shown on the figure. Otherwise, you will get a very long list of radio buttons (the default with the Select type.)

Don't forget to Save. Then move the the component to the place where you want it to be and save again.

You are done.

AttachmentSize
countries.txt2.61 KB

Snap! Menus

Introduction

(Small Snap! Logo) Snap! comes with a menu system that allows you to create any number of menus and add any number of items in each menu. This being said, you should limit yourself to a reasonable number of items to make it easier for your users to navigate your website (a menu with 100 items is very difficult to navigate unless you are using it as your site.)

We offer several different types of menus, two of which are administration menus.

This documentation will explain the menu system in details. There are a few things to know of when working with menus that we hope we explain well enough here. If you still have any question, feel free to post a comment.

Menus

(please, make sure to check out Menu Items below!)

By default, we offer you the Snap! Toolbar that appears at the top-right corner. This is the Toolbar menu.

Sample of the Administration toolbar menu.

You are welcome to change the content of the bar, just be careful as messing it a bit too much will make it a bit harder for you to find the different features available in your website.

Notice the Menus entry in the Admin tab. That entry takes you to the list of available menus on your system. By default, you have the following menus available:

  • Primary links
  • Secondary links
  • Navigation
  • Toolbar

Rarely will you need more, although you are free to use the Add menu tab to add more. Remember that these menus are not the actual links. Menus contain a large number of links.

Primary links

The primary links are used as the main menu. In general it appears in or around the header of the website, or at the top of the sidebar. In most cases, you want to keep this menu relatively small. At this time, Snap! uses the primary links with the following:

  • Plans
  • Blog
  • Contact

As you can see, it is very small. Too large a menu will scare off your users (unless you are writing a very technical document in which case you're probably doing what you are supposed to do.)

Secondary links

This menu is used to complement the primary links. It is often used for things such as your Sitemap, terms & conditions, a link to your log in screen1, etc.

Snap! has a secondary menu at the bottom of the page. It includes things that we deem important for our users, but not as important for our website than those things shown in the Primary menu.

Navigation

On Snap!, the navigation menu is hidden by default. The navigation is dynamically defined with all the features available to you. The problem is that it is really large and scary. Therefore, by default we hide it. Instead, we offer you the Toolbar menu which is also dynamically modified, but is much small and really only shows you the most important things that you will have to work with.

Toolbar

The Snap! Toolbar is created from the items found in the Toolbar menu. The items of the Toolbar menu can be assigned an icon as you can see in the toolbar picture.

At this time, the toolbar only supports 2 levels. We are planning to support a 3rd level at some point.

Buttons

A top level item without any sub-items is taken as a button. The light icon is an example. It points to the Snap! Document (i.e. this very book!) You may replace that one or create your own links to other website or a page you use often on your website (i.e. your comments moderation queue.) At this level, the icon is expected to be 16x16 pixels. It will be resized by the browser if too large or too small. Note that the title is used as the image title only. It will not otherwise be shown.

Tabs

A top-level item with sub-items becomes a tab like the Content and the Admin tabs. The name should be kept short so it fits in the tab area. There are no provisions to have more space for the tabs. If too wide, it will go over the buttons on the right and then wrap. The icon for a tab has the same characteristics as the button icons.

Again, the only difference between a button and a tab is that a tab has sub-items. So when you create a new tab it first will be shown as a button until you create the first sub-item under that tab.

Icons

The 1st level sub-items are the icons visible under each tab. These are links that take you to a page or another. The default toolbar includes what we know most people use all the time. However, you are very welcome to change those links, icons, add new links and remove existing links. These sub-items make use of a 32x32 pixels icon.

Drop down

At this time, adding a 2nd level of sub-items will prevent you from clicking on the 1st level sub-item but it won't show the 2nd level. Therefore, do you use them yet. These items will be shown in a drop down under the item when you hover your mouse over that 1st level sub-item.

Your Own Menu

Form "Add menu"You may create your own Snap! menu. For this, click the Admin tab and then the Menus icon. On that screen, near the top, you will see a tab named Add menu (see sample on right.)

A menu includes two names: the system name (called Menu name) and a title. The system name must be letters (a-z), digits (0-9) and dashes:

my-own-snap-menu

The restrictions are there for technical reasons (i.e. this name can be used as the CSS class name of that menu.) It is customary to use all lowercase characters for the system name. Capital letters area also accepted.

The title can be pretty much anything you want. Again, it is suggested that you use a short name. The title is shown at the top of the menu by default. It is possible to hide it when you show the menu block on the screen.

A menu definition also includes a description. This is just for administrative purposes. Enter anything that makes sense to you as the description of the menu. It remains private to the administrators. The description appears in the Menus screen and may appear while you hover your Snap! Toolbar.

Click on Save to create the menu in your website.

At that point, you have a new, but it will not yet appear anywhere. A menu is a block that you need to place on the screen in order to see it2. But before you do so, you probably want to insert items in that menu (See below.) A menu without items remains hidden.

Simplemenu

As I mentioned, you have two administration menus available to you: Snap! Toolbar and Simplemenu. We think that the Snap! Toolbar is easier and more practical to use so we offer it by default. However, by turning on the Simplemenu feature and turning off the Snap! Toolbar, you can switch to the Simplemenu administration menu.

There are a few differences:

  • Simplemenu is shown at the top-right of your screen and you cannot move it anywhere else
  • Simplemenu shows the complete Navigation menu (which means many more links!)
  • Simplemenu is less appealing, although it shows you all the Navigation menu items using drop-down menus
  • Simplemenu cannot be hidden like the toolbar, although it doesn't cover any content
  • Simplemenu grows each time you add new features, the toolbar only grows to show you important features

Yet, many people (like me) prefer Simplemenu to the Toolbar.

To switch between the Snap! Toolbar and Simplemenu, go to your Made to Order Software Account and click on My Websites. There select your site and change the options (i.e. unselect the Snap! Toolbar) then Save. Within 5 minutes, the Snap! Toolbar will be gone and in its place you will see the Simplemenu at the top of the screen.

List of menu items as shown when editing a menu.Menu Items

Click on the picture to see it full scale.

Now is time to talk about the menu items. Items are what fills the menu with content. Without them, the menu is considered empty and it is not shown.

In a website, menu items are actually links that send you to another page on your website, someone else's website, or even a document such as a PDF file or a JPEG image. The link can really be anything you want and include parameters (after the ? character) and an anchor (after the # character).

To add items to a menu, click on the menu name after you went to the Menus page (i.e. click on the Admin tab, then Menus.) That shows you a list of the existing items (Click on Navigation3 or Toolbar to see their existing items. )

When you created a new menu, or look at the Primary or Secondary menu the first time, it is empty. That means you don't see any items. To add new items, click on the Add item tab at the top of the list.

Once items were added, you can organize them from the list:

  • Order them using the cross (+),
  • Disable them by clicking on the checkbox (no checkmark means disabled or hidden,) and
  • Auto-expand the sub-menu.

The ordering feature is used whenever you add a new item and you want it in a specific location in the menu4.

The disable feature is particularly useful for the Navigation menu because you cannot delete those items (since they are created by software.) So to hide those menus, disable them.

The auto-expand feature is very rarely used. It will show the item and its sub-items which are otherwise hidden by default until the item is clicked on.

The example shown here shows an example of Snap! Toolbar. As you can see, there is a Content menu at the top with different entries such as Primary and Secondary (to create pages that will automatically be added to those menus.) The items that appear under the Content tab are defined with an indentation in the menu list. That represents sub-items. Similarly, you can create sub-sub-items, sub-sub-sub-items, etc. up to 9 levels.

9 levels of indentation is plenty for a menu, although in case of the Snap! Toolbar, the example shows you the current limit of the toolbar: 2 levels (top-level and sub-items.)

Adding a Menu Item

Form to edit a Menu Item.There are several different ways to add a menu item. It depends on the context you're in. Many pages are created and given a URL by software. For instance, My Account is found under /user and my bio at /users/alexis-wilke. For those pages, you have to use the Add item tab.

First click on the Admin tab of your Snap! Toolbar. Then click on the Menus icon to go to the list of menus. In that list, pick the menu where you can to add a new link (for instance, a link to go to your Contact page.)

On that page, you see a tab at the top that says Add item. Click on it to get to the menu item form (see picture on right, click to enlarge.)

The first entry in a menu item is the path. A local path is the URL without any http:// or domain name. In this example, we have a link going to the contact page. A path to another website will include the full URL (with the http://www.example.com/index.html). With your Snap! Website, paths are always created in lowercase. There are only very few exceptions, so if you have a doubt, try with lowercase first. It is more than likely to work first time.

The second entry is also mandatory and is called the menu title. This is the text that actually appears in the menu. The title can be anything you want, however, it cannot include any HTML tags.

The description of the menu is used as the title of the link. When no description is offered, the menu title is used instead. It is a good idea to enter a description since it helps people understand better what this menu entry is about (especially blind people who don't have other visual clues.)

Then you recognize the Enabled and Expanded flags as shown in the list. These are exactly the same flags and they have the same functions here: a disabled menu item is hidden, a menu that has sub-items and is marked as expanded always shows all of its sub-items.

The Parent menu (item) indicates the menu or menu item where this item appears. This drop down will show you all the possibilities offered including other menus. In other words, using this drop down, you may move an item from one menu to another (i.e. say you first placed an item in your Secondary Menu and released that it was actually very important to your users. At that point you'd want to move the item to your Primary Menu. Edit the Secondary Menu, cilck on the edit link of the item you want to move, in the drop down, select Primary Menu as the parent, then click Save. Voilà! The item was moved from one menu to the other.)

We discuss the menu weight below.

The menu attributes are part of an additional feature and that feature is documented separately.

Placing a Page in a Menu

Fortunately, whenever you create a new page, you may select in which menu it shall be added without having to go to the menu area each time (which would take a lot of time!)

Whenever you create or edit a page, notice near the top there is a line with the words Menu settings in blue like this:

Menu Settings found on each Page

Click on it to open the menu form. That shows you a set of boxes that you can fill with the menu information for that page. This includes the menu title, parent menu or menu item, and the weight.

In most cases, you just have to enter a menu title and you'll be good to go.

If you use the Primary or Secondary buttons found on your Snap! Toolbar, then you do not need to use the Menu settings since the system will automatically add such pages to the Primary or Secondary menu.

Limits of the Page Menu settings

Note that the Menu settings do not give you a way to enter the menu description or position the menu item without a wild guess (using the weight.)

If you want to enter that information (and you really should for your Primary menu,) take the time to go to your Menus, and edit each item that is not yet fully defined.

The Weight of a Menu Item

Each menu item includes a weight. This is used to sort the items in a user defined order. By default, menu items will be sorted in alphabetical order, but when you add items such as Log In, Log Out, Contact, Help, you often want to place them toward the end of the menu. Similarly, you most certainly want the Home menu item first. To do so, you can tweak the weight of each item to define the order (i.e. their position.)

Each weight defines a group and the items within that group are sorted alphabetically. By default, all the items are placed in group zero (0).  The weight goes from -50 to +50. The items with the smallest weight (i.e. -50) go first (i.e. on the left or on the top.) And the items with the largest weight (i.e. +50) go last.

Note that in some circumstances you may want to avoid using the sort feature of the menu and instead move a few items where you want them to be using the weight within the menu item edit form. For instance, you could set your Home menu item to weight -10 to make sure it always appears first and your Contact menu item would receive a weight of +10 to appear last.

Using the list feature, you can use the cross (+) icon to move items where you want them to be. This is very practical, however, it has the side effect of defining all the weights of all the items in that menu. Now the first item has a weight of -50, the second -49, the third -48, etc. up to the last item in your menu. This often means new items with a weight of 0 will appear at the end of your menu (unless you already more than 50 items in that menu?!)

It is advised that you create all the items in your menu, then position them exactly the way you want them to be. It will generally take you a lot less time to do it in this order.

  • 1. To create a Log in link, use user/login as the path. The link will be hidden whenever you are logged in. If you'd rather have a My account link, use the user path (without the /login).
  • 2. The primary and secondary menus are often automatically handled by the theme that you choose to use. This makes it a lot easier as you do not have to wonder where to place those blocks. The other menus give you full flexibility which means that you've got to place them in one of the available areas.
  • 3. Although, we recommend that you do not change the Navigation menu, it is possible to do so.
  • 4. Note that by default menus are sorted alphabetically. Once ordered in the list, you lose that capability altogether. Afterward, you'll always have to maintain the order yourself by editing the menu list of items. Unfortunately, there isn't an easy way to otherwise organize the order of all the items. Although you may want to read the paragraph about the menu weight.

Snap! Page Title

Title Text Field

All Snap! Pages must have a title. It is mandatory. Depending on the type of page and/or the theme, the title is displayed in different places, however, it should always use an H1 tag1.

The title text field looks as follow:

Page Title Text Field Sample.

Notice the little asterisk after the word Title:? This indicates that the title is required. Any field that is required will show such an asterisk. The color may vary depending on the theme you're using, but it generally is red.

The title can include any character, however, it cannot include HTML code. The < and > characters will be shown as such instead. Similarly, entering an entity such as &trade; (™) won't work. Instead you want to enter the character itself. You may have more ease to enter special characters in the Body field2 (see under the Title) than in the Title itself, then copy and paste the character in the Title.

What should the title be?

The title should be as descriptive as possible in about 63 characters. The threshold is in link with search engines that will cut your title at that length. It is important that all the important keywords for that page appear within those 63 characters.

Snap! automatically transforms your title into an SEO friendly URL (words that describe the page separated by dashes.) However, for some pages (i.e. /about, /contact, etc.) it may be preferable to enter the URL yourself. We will learn how to do that in a different page. However, if you write a journal, remember that the URL will be set to your title and this is a another place where your title appears.

Remember the RSS Feed

One thing to remember is that this title will be sent to all your RSS feed subscribers. This means it needs to be compatible with their feed system. Website based feeds will generally work pretty well, although Feedburner is known to transform your special characters the wrong way. Desktop based feeds will often to properly interpret special characters.

To stay on the safe side, try to limit yourself to ISO-8859-1 (i.e. the ASCII characters and basic accentuated letters.) Other characters such as the long dash (—) won't make it.

Of course, this only applies to the pages that are sent to any one of your RSS feeds. For instance, Primary and Secondary pages are not being broadcast.

Other Uses of the Title

There are other places where the title will appear. For instance, when writing a Journal entry, the title and a teaser of your new journal entry appear on your front page. When creating an FAQ page, the title will show as the question (and the body is the answer.)

As an administrator, you also can get to lists of your posts (i.e. the Pages link in the toolbar Content tab.)

In most cases, when those titles appear anywhere on your website, they will show up just fine, whatever the characters used.

  • 1. If you notice a theme that uses an H2 or other tag, let us know and we'll fix it. This is very important for your website SEO!
  • 2. The Body shows a toolbar that includes a special character button. However, if you cannot find your special character in that list, try with another system such as Microsoft Word or OpenOffice which have a similar window with all the characters available on your computer.

Snap! Remote Access

Introduction

(Small Snap! Logo) Snap! supports remote posting.

Remote posting is composed of two parts:

  • A website that lets your editor connect to create new posts
  • A client (i.e. an editor) running on your computer

(Small Snap! Logo) Snap! is such a website and it works with different editors as listed below.

Available Editors

BlogJet is a standalone editor for MS-Windows.

BlogDesk is a standalone editor that runs under MS-Windows.

Ecto is a standalone editor that runs under Mac OS/X1.

Zoundry is a standalone editor for MS-Windows that works with Internet Explorer 5.5 or better.

Windows Live Writer is a standalone editor by Microsoft that runs under MS-Windows.

Semagic is a standalone and Open Source editor for MS-Windows.

w.bloggar is a standalone HTML editor (not WYSIWYG!) for MS-Windows.

Limits of remote blogging

Advanced formatting is generally not well supported.

The basic formats: bold, italic, underline, left, center or right justified, indentation, quotation, lists will generally work as expected.

Changing fonts, colors, highlights will generally not work right.

You will have to test with your editor and see what you can use and what you cannot use.

  • 1. It looks like there was a MS-Windows version of Ecto, yet it is either not available any more or never was.

Administration

The following chapters describe how to best administer your Snap! Website. We have done our best to make it simple, but all systems always have a tricky feature that is not so easy to fathom. This documentation exposes all the tricks that you can use to make your website go ahead of your competition.

AdSense Setup

Setup Snap! AdSense

(Small Snap! Logo) Snap! Websites offers Google AdSense as a feature to help you monetize your website.

Google AdSense
Click to Enlarge

The Google AdSense feature eases the setup of your ads on your website. Instead of having to deal with HTML, you only have to copy your publisher number and ad slot numbers in the right places.

The publisher number is found at the top-right of your Google AdSense control page. It starts with pub- followed by a rather long number.

To find your ad slot numbers, click on AdSense Setup. By default, the tab brings you to the Get Ads screen, where you can create new ads. If you do not yet an ad, then go ahead and create one now. Note that Google AdSense gives you a last screen with HTML in a text area. Please ignore that screen!

Once you have ads, click on the Manage Ads tab. This gives you a table of your ads with their name and their slot number in parenthesis.

Click on the AdSense screenshot at the top-right. We marked the publisher identifier with a red arrow and the slot ads with green arrows.

Administer » Site configuration » AdSense
PublisherID tab
Google AdSense Settings (publisher number)
Click to Enlarge
      Administer » Site building » Blocks
Configure any AdSense Block

Click to Enlarge

Administrator, Authors & Editors

Privileges

The (Small Snap! Logo) Snap! Website system gives different people different privileges on your website. As the administrator, you can offer other users to become authors and editors.

The privileges are defined in each user account.

IMPORTANT

You want to watch out who you offer to become an author or an editor. Although, a little hand here and there can greatly help you enhance your work, offering the wrong person to help can be disastrous.

Authors

An author can create a new post, and later: edit or delete his own posts. Whenever you find high level contributors, it is a good idea to give them direct access so they can contribute faster.

Authors can also post non-moderated comments.

Editors

There are two kinds of editors. The moderators and actual editors (i.e. people who verify your writing.)

Editors can edit any page on your website, which in effect empowers them to moderate any post from any user such as your authors. They cannot otherwise administer the website (i.e. edit other users, change the slogan or title, choose the RSS capabilities, etc.)

Moderators

Moderators are people who can help you moderate your website by verifying all the changes: new posts by authors, new comments, new support requests, etc.

Editors

An editors on your website can also be a person who verifies that posts are well written. Computers can generally tell you about improper spelling such as badlie writen. However, it will not tell you whether you used the wrong word or misplaced a word on your web sight personal1.

Administrator

You are the only administrator on your website. You cannot assign someone else administration rights and you shouldn't need to anyway.

Made to Order Software also has administrative rights to access your website for support purposes. We do not otherwise use our rights, except if we find unwanted content or activities.

Assigning these roles

The Author and Editor privileges are offered using roles. A role acts as a group. You can thus put different people in a group or another.

As the administrator, you can review the accounts of all your users. There are several ways to find users as follow.

Administration: List of users (Administer » User management » Users)

Administration toolbarGo to the User management screen by clicking on Admin and then Users as found in your toolbar.  Search the user to visit and click on edit to reach the edit screen for that user.

This list sorts users in the order they registered an account, the newest registration first. You can also filter users using different categories.

User identifier number

With the user identifier (a number such as 123), you can reach his or her account with a URL similar to the following:

   http://my-site.example.com/user/<uid>

<uid> is always a number.

User name

The user log in name can be used with a URL similar to the following:

   http://my-site.example.com/member/<name>

For instance, the user John Smith who used his own name to create his account will be found at /member/john-smith2.

Post or comment with the user information

Whenever a user posts something on your website while he's logged in, he leaves his user account information behind. Generally, the link to the author will appear at the top of the post or comment. Some themes may move that information at the bottom.

Clicking on that link directly brings you to the user's page.

Note that hidden accounts (from users who do not want to share their information) do not generate that link. Since you are the administrator, you should still see the link, but that depends on the theme.

Editing

The user page shows a set of tabs at the top. The second one is Edit. That tab let you modify the user's settings3.

Once on the Edit page, scroll down until you see the Roles entry as shown in the following figure:

Sample screenshot showing the role selection area.

The Roles area has two checkboxes: author user, and editor user. The checkboxes can be clicked to select one or the other. Note that an editor has all the rights that an author has so it is not required to give an editor both permissions.

NOTE

You can see these flags in your own account. You already have all those permissions so marking yourself as an author and/or an editor will have no effect.

  • 1. Note that the word personal would be found at the end of the sentence in French.
  • 2. To make URLs as portable as possible (i.e. so they work with as many systems as possible,) all special characters are either removed or transformed to a dash and uppercase characters are changed to lowercase.
  • 3. We suggest that you do not make changes to user accounts without letting them know, unless you are blocking a user.

Snap! Site Information

The Info icon on the Snap! Toolbar sends you to your Snap! Website Information page.

This page includes a few site wide entries that you may want to tweak once in a while.

Name

The name of the website. This name appears in the title at the top and in the <title> tag in the HTML header1.

A name is mandatory so when you create a Snap! Website, we enter a default name for you. You are more than welcome to change the name to your liking.

E-Mail Address

This is your email address by default. If you get a new email address and want to enter it here, feel free to do so. This email is used in several different areas on the website but it is rarely used. This email address is considered the best email address to use to contact the primary administrator of the website.

Slogan

Your website slogan. It is okay if you do not have one.

Different themes will show your slogan in different ways. The slogan is a simple string such as "Just Do It!"

Mission

Your website mission, why did you create it, etc.

This is most often shown at the top of a page, maybe only on the front page.

This feature is seldom used because it often doesn't get rendered the way you'd like to it to be rendered. Most of the time, using a block is a better solution.

Footer Message

Message shown in the footer of your website. Although some themes do not include a footer, most do.

The footer is often the name of your company, contact information, and a copyright line.

Anonymous User

The name used to represent an anonymous user. By default, this is set to Anonymous.

For example, if you are using Snap! for your restaurant, you could call your anonymous users Patron.

Default front page

By default, Snap! works in a way very similar to a blog. This means the front page shows a list of the latest 10 articles.

Most often, if you are creating a business website, you will want a front page that shows you a very specific Home page or what is often referenced as the HTML Index.

This option let you change the page to any other one you created on your website. The page needs to exist and be published for this feature to work right. You can enter the path of the page and the system will take care of transforming it to the node number as required internally.

For example, the page you are reading now has this URL:

   http://snapwebsites.info/snap-documentation/administration/snap-site-inf...

If I were to make it the front page of the Snap! Websites, then I would use the full path like this:

   /snap-documentation/administration/snap-site-information

(i.e. I removed the domain and first slash (/) character from the URL.)

It is safe to change the home page at any time. Note however that the Snap! system makes use of caches to ensure a faster response to queries by your viewers. This means the change is immediate for you, but not to your users. Depending on the cache duration, the front page may change in a few minutes or within a few days. If you have a problem in that regard, don't hesitate to contact us and we'll reset the cache for you.

  • 1. See the title information and Page Title Meta Tag for more details about your website name.

Snap! Toolbar

Snap! Toolbar & Simplemenu

In order to manage your website, we offer two menus: Toolbar and Simplemenu. By default, you will see the toolbar. If you'd rather use a regular menu (like those menus available on your desktop) then go to your controller panel and unselect the Toolbar feature. Within 5 minutes the toolbar should be gone.

The following shows you how each item looks. Depending on your account, it may look different as you may have more or less features available and thus more or less icons in the toolbar.

Content tab

Toolbar: Content Tab

The content tab lets you create new pages, manage your existing pages and comments. You have one icon per type of page you can create. Those have a plus (+) sign at the bottom right corner. The Draft icon displays a list of your drafts. Whenever you create a new page, you can either publish it immediately or save it as a draft. This icon lets you manage those pages you did not yet publish. The Pages icon shows you a list of published pages. This list has a filter capability which lets you sort pages by type, status, etc. The Comments icon sends you to the list of comments present on your website. In that window, there is a tab at the top Approval queue. Click on that tab to see the list of comments you did not yet approve.

As you get more and more features for your website, you get new icons. Most of the time it will be a new type of page you can create. For instance, you can create a primary page which is automatically inserted in your primary menu. The following screenshot shows you the toolbar with additional page types:

Toolbar: Additional page types

Administration tab

Toolbar: administration tab

The administration tab shows you the most used/accessed administration pages. The Settings icon lets you access all the administration pages available on your website. Feel free to click on that button and change anything you want there.

The Blocks icon brings you to the block administration. This page allows you to change the blocks on the sides, your header and footer. It also lets you create new blocks including blocks if HTML.

The Info icon sends you to the page where you can change the global website information.

The Menu icon sends you to the menus of your website. A menu is a block you can display by going to the Blocks administration screen. By default menus are hidden. The Menu administration screen especially gives you an opportunity to easily reorder your menu items (instead of trying to adjust their weight.)

The Themes icon is used to choose a new theme. A theme defines the look of your website.

The To do icon sends you to the list of tasks you still have to do to complete your website installation. Most are really quick to do! You can also use that feature to add your own To do tasks so as to keep track of what you need to do next.

The Users icon lets you manage your users. By default, your website will not let new users create accounts automatically. However, you can still create accounts for your editor and authors if you work with other people (delegate!)

The Log out is obviously to log out of your website account. If you are using a public or friend's computer, you should log out before leaving the computer. Otherwise the system keeps you logged in for 2 or 3 days after the last time you accessed the website.

Buttons

You may have noticed that there are buttons at the top-right of the toolbar. These buttons are used to move the toolbar around (arrows) or hide it (cross). The little light bulb is the help button that opens this documentation in a new window.

Adding, removing, re-ordering toolbar items

The toolbar is created from a regular menu. When you click on the Menu icon of the administration tab you get to a complete list of your menus. One of them is called Toolbar. That's the menu used to display your toolbar.

Although the default should be sufficient and should include pretty much everything you need, yet, each one of us have different needs...

To add a a new item, go to Menu, click on Toolbar, and then click on the Add item tab at the top. By default items will not be assigned an icon. A default error icon will appear instead. To assign an icon, you can use the drop-down menu which by default includes the system icons. You can also use the Browse button to upload new icons from your computer. For this purpose, you can get free icons from the Internet (see our Pictures category in our Directory.)

Adding a button

A button is a stand-along top item. With the default menu, you will see the Help item as a stand alone item.

Note that the arrows and close buttons are internal features and thus they do not appear in your Toolbar menu.

Buttons are 16x16 pixels images. The default is to use a black circle with a graphic inside. One reason for doing this is that some themes have a black or white background in different locations. Having such an icon makes it visible whatever the background.

Adding a new tab

A tab is created once a stand alone item is assigned sub-items. So first you want to create a new stand alone item which is first going to appear as button. Then create another item and assign that new stand alone item as its parent. Now that the new tab has a child item, it is rendered as a tab!

Tabs use icons that are 16x16 pixels. Full color with transparency PNGs work with your toolbar. The background of the tabs change from a gradient going from light gray to white to a dark gray gradient. Icons show shine when they are on the white background.

Adding a new item in the tab

Once you've got a new tab, you can add new items within that tab. You have to make sure to assign the tab as the parent of the new item so it appears as the icon of that tab.

Note that the number of items is not limited. If more than about 8 (depending on the length of the title) are used, then the height of the menu will grow to show two lines of icons.

The icon of an item is 32x32 pixels. Full color transparency PNGs work with your toolbar. The toolbar background is always white.

Adding a sub-item in an item drop down1

This is an advanced feature.

The toolbar supports a 3rd level, although it isn't used by default. This 3rd level appears as a drop down of an item. This gives you the possibility to have many more functions right there in your toolbar.

Note that the item is changed so clicking on it does not send you anywhere. Instead we will open the drop-down menu. This means if you want to go to the place where that item would otherwise bring you, you'll have to add an item in the drop-down menu with that same link.

  • 1. This feature is available but may not always work. If you experience any problem, send us feedback or enter a support ticket.

Snap! and Caching

Introduction about Caches

In order to make you and your viewers web experience as good as possible when visiting a Snap! Website, we use different cache technologies which at times can end up in your way.

The following documentation is expected to help you deal with the caches while you work on your website.

Note that by default everything is automatic and you should not have to do anything. However, once in a while a page needs to quickly be changed and the following should give you all the necessary tools to fix such problems.

If you still cannot figure it out or you think that there is another problem, do not hesitate to contact us for support.

Server Side Caches or Snap! Caches

On the Snap! server, we make use of 3 levels of caches. One of which you can control very effectively.

Snap! Static Cache

This Cache is also called Boost.

When the first anonymous user comes to your website, the Snap! system builds the page and saves the resulting HTML on disk. The result is that all the following anonymous users do not see much latency at all when visiting the same pages as previous visitors. This makes for a close to instantaneous browsing.

This cache lasts between 1 whole day and 1 whole week. After that amount of time, the page is automatically deleted and rebuilt. This means that for that long period of time, all the anonymous users see the same thing, whether you make changes to the blocks on the sides or not.

We offer a set of blocks that allow you to reduce the amount of time such pages are cached (although the minimum remains 1 day) and a way for you to erase this cache on a per page basis. This is done with the Boost Blocks.

Boost: Pages cache configuration

Use the Pages Cache Configuration block to change the duration of the cache for a page. You may want to change the cache for your front page or your most visited page, whichever page this might be.

Boost Flush Page and information.Boost: Pages cache status

Use the Pages Cache Status block to know whether a page is cached in the Snap! Static Cache. If so, you will be shown a Flush Page button.

Multiple Domains

When we create your new Snap! Website we assign it a free Snap! Sub-domain using your new website number. It looks something like this:

http://snap123.snapwebsites.info/

If you own a domain name, then you will want to use it instead. (How to do so is a different topic...) Once you assigned your own domain to your website, the pages are saved in a new Snap! Static Cache named after your domain. In other words, you end up with two somewhat different websites (although both show you the exact same thing when you are logged in, if you are not, the caches being different you may see quite different things on both sites!)

The full clear the static cache you want to log in both websites and click the Flush Page button on each page that needs to be refreshed. In general, the site using the Snap! Sub-Domain doesn't need to be flushed, it will happen automatically and it can always be late, it shouldn't matter. Just use your domain name to access your site.

Snap! Dynamic Caches

Snap! runs with a strong database system which is used to cache pages and forms shown in a Snap! Website. These caches are handled by the system and you have no direct access to them.

It is really rare that these caches cause problems as the system is really robust and knows perfectly when such caches need to be deleted.

Snap! File Caches

Snap! compresses all the JavaScript and CSS files used by your website. This saves a lot of space and generally renders the upload of the pages as a whole faster. Again, these caches are handled by the system and you have no direct access to them.

It is really rare that these caches cause problems to end users like you. Web designers who create themes may run into problems when this cache system is activated. Deactivating this cache capability is their best bet. In our case, however, there should be no problem related to these files.

Client Side Caches or Your Browser Caches

Whenever a website is loaded, the pages are cached by your browser. In most cases, those pages go out of scope and thus get reloaded only when the date they were assigned when loaded is past, although most browsers will keep any one file only for a set amount of time (i.e. 2 weeks.)

When you are logged in your Snap! website, the pages of content (the HTML code) is always marked as out of date. In other words, your browser will never cache those pages. However, when you are navigating to your website before logging in, you are likely to see pages from the Snap! Static Cache which are remembered for a while (1 to 7 days.) If you want to reset your browser cache for those pages, there are a few things you can do1:

  • First you'll want to hit Reload to make sure that the page is considered up to date by your browser
  • Assuming the page still looks out of date, try clicking on the Flush Page button from the Boost: Page cache status block (Remember that you need to be logged in and have the Boost: Page cache status block setup to see that button! By default that button is hidden.)
  • The browser Reload button is expected to clear the browser cache but that does not always work; to fix that last problem, you will want to clear the browser caches, how to do so varies from browser to browser (they even use different terminology for the cache data such as "offline data"!)
    • Clear your Firefox Cache
  • 1. Do not forget that testing your cache needs to be done as an anonymous user, so if you are currently logged in (you see your toolbar on your pages) then log out first! On my end, I generally make use of two different browsers such as Chrome and Firefox. I am logged in with say Firefox, and check as an anonymous with Chrome.

Clear your Firefox Cache

Please follow these steps to clear the cache of Firefox on your computer.

Note: The screenshots are from MS-Windows. The menus may vary on other platforms such as Mac OS/X or Linux.

1. Select the Options menu item in the Tools menu

Select the Options window in the Tools menu

 

2. Select the Privacy tab and click on clear your recent history

Privacy tab with the "clear your recent history"

 

3. Select Everything in the drop down at the top and select what you want to delete then click Clear Now

This window is the one allowing you to clear your Firefox cache (or history).

Firefox caches:

  • Browsing & Download History — This cache is not important in regard to your display it is your history (Back button) and the list of websites you visited before.
  • Form & Search History — In most cases you can leave this content alone although the forms auto-fill can be a problem in some circumstances and thus deleting it may be useful.
  • Cookies — I suggest you do not delete your cookies; if you are logged in an account on some website, deleting all your cookies will log you out! Cookies very rarely participate in a rendering problem of your Snap! pages.
  • Cache — You definitively want to clear this cache as well, these are the HTML files, images, CSS data, JavaScript, etc. This is the part that in most cases generate a visual problem
  • Active Logins — Like cookies, I suggest you don't delete those; active logins are similar to cookies used to keep connected with different websites.
  • Offline Website Data — I would delete offline website data because like the standard cache, it may get used if data is missing from the source website, which is not what we want.
  • Site Preferences — In most cases you do not want to delete this data. It includes your Firefox preferences when using different websites and it will not affect the rarely rendering of the site.

How to clear the entire cache of Firefox

Once you are satisfied with your selection, click on the Clear Now button.

Advanced Capabilities

The following set of pages give you information of capabilities available to you. Some of those capabilities require you to have specific features installed. Feel free to ask us to help getting those installed on your website if you do not see them as described in the following pages.

Folds and Cute Menu

The Folds theme has a hidden feature when you use the Primary Links menu. It is possible to add a dropdown menu at the bottom of that Primary Links menu block. All you have to do is create a new menu named "resources".

Requirements:

  • Folds Theme
  • Cute Menu
  • Primary Links1
  • A Resources Menu

By default we install the Primary Links menu in the Folds theme (if you decided to use that one as the default). If the Primary Links menu is not already selected, then click on Admin, Blocks, and move it to the Left or Right sidebars.

Now create a Resources menu: click on Admin and Menu. That page includes an Add Menu tab at the top. Click on it and fill out the form with the following (without the quotes):

  • Menu name: "resources"
  • Title: "Resources" (you may use any other name here, although it is never shown)
  • Description: "Additional menu to show under the Primary Links"

Please ignore the MO Toolbar settings. These are to create a toolbar as you see at the top-right.

Now click the Save button. By default the menu is empty so nothing appears. Now you want to add items to the menu. After the Save, you are in the menu settings. It should say Resources at the top (or whatever else you entered as the Title of the menu). One of the tabs on that screen says "Add item". Click on it to add new menu links. The links added to your menu can point anywhere you want. It can even be a link to another website.

The following is a quick reminder of the data you can enter in a menu item:

  • Path: the destination link; it is also called the URL or Location
  • Menu link title: the title that is shown for that link; it will appear in the dropdown
  • Description: You may leave the description empty; it is shown by the browser when the user hover this menu item;

The other parameters can be left alone. The weight is used to sort the menu items, although that can be done while editing the list of menu items instead.

The very first item you create is the one that appears under the Primary Links menu (at the bottom of that block.) Give it a short title that fits there (the characters are pretty big!)

Now add new items and make them children of that very first item you created. After you saved a new item, you can use the crosses to move the new items at the right location. The image below shows you a valid resource menu for the Folds theme.

Sample of Primary Links with a Resource menu in the Folds theme.

  • 1. Note that the Primary Links menu has to be part of the Left sidebar and it is called "Menu" by default.

Snap! Features

Snap! comes in with many features. The administration of your website is not based on a per feature basis because it is not always one to one. Plus some features do not have or require any administration, they just work by themselves.

So the following list includes all the features available and what each features offers you on your Snap! Website.

Snap! Feedback Feature

Snap! Feedback

You probably noticed the blue Feedback button on the left side of the Snap! screen. You can also get that button on your very own Snap! Website.

The default looks just like the Snap! Website Feedback button. You can change it with your own graphics and also another one of the graphics we offer as part of Snap! Feedback.

The Snap! Feedback works with your Contact Us page (you get both at the same time.) When you install the feature it automatically installs the page that you can access by going to /contact (i.e. http://snapwebsites.com/contact ) The Snap! Feedback feature makes use of Lightbox2 which is capable of opening your contact page in a local pop-up window (it works even when browsers anti-pop-ups features are turned on.)

Creating a Snap! Feedback Image

As you will notice, when hovering your mouse over the Feedback button, the text changes colors and the button grows inward. This effect is obtained by flipping between "two" images. Technically, we use only one image to avoid flashing effects. We still consider having a left and a right image. The left image is the default one. The right image is shown at the time you hover your mouse over the button.

The following are examples of Feedback images as you want to upload them to change the default Snap! Feedback button:

Feedback left side button.The 2 images of the default Snap! Feedback button.

Bottom Feedback Button for Snap! WebsitesThe 2 images of the bottom Snap! Feedback feature.

A bottom-right corner feedback button with a red background. You define the position of the Snap! Feedback button so you can place it in a corner.

Top Snap! Feedback button.The 2 images of the top Snap! Feedback feature.

We attached the PNG files of those buttons at the bottom of this page. You can simple download them from here and re-load them in your website to make use of them.

In case you wanted to change the colors or text, we also attached the source SVG files (vector graphics files.) You can use them with Inkscape or Illustrator and other software that support vector graphics.

To create a button:

  • Choose the width and height including any shadow and other glowing effects.
  • Create an image of (width × 2) x height pixels (with Inkscape, setup the pixel size in Document Properties)
  • Create the two versions of the image, remember, the hover look is on the right (this is true whether the button is added to the sizes, or the top/bottom, or a corner.)
  • Save the result as a PNG image with Alpha (assuming it is required which is very likely)
  • Upload that image on your site from within the MO Feedback settings screen (see below)

Snap! Feedback Settings

Contact Form

Snap! Contact Form accessWhen you install the Snap! Feedback feature on your Snap! Website (automatic when you get a Snap! Business Website) then you get a Contact Form.

We automatically install a Feedback category for you, but you may want to add other categories such as Support and Returns. Plus, you definitively want to enter your address, a contact email address, phone number and other contact information in the form.

To do so, click on the Admin tab of your Snap! Toolbar and click on the Settings icon (second icon from the left.) In that window, look for Site building under which there is a Contact form link. Click on that link to access your Contact form settings.

That screen gives you a list of existing categories and 3 tabs at the top. The tabs are

  • List (of categories)
  • Add category
  • Settings

Snap! Contact Form

The following describes the functionality of those three tabs.

List

Lists the existing Snap! Contact categories. Click on the edit link of a category to edit it. You can change the default settings (what is selected by default when someone goes to your contact page,) and all the elements as defined under Add categories.

Add categories

To add new categories use the Add category button and enter the name of the category to add.

The name appears first. The list of recipients are plain email addresses (i.e. scott@example.com) where the contact messages will be sent.

The Auto-reply box is used to enter a message to send to anyone who posts a contact message. It is automatically sent and will usually tell the user that you received the contact message and you will respond within the next X number of days, or something of the sort.

The Weight defines the order in which the contact categories are going to be displayed. I suggest you leave all of them at 0 so they get sorted in alphabetical order. Then, to make an item the first use -1 and an item the last, use 1.

The Selected drop-down is a flag (Yes or No) used to determine which of the categories should be shown first when a user arrives on the contact page. Only one category can be selected.

Settings

This is certainly the most important tab for you, at this point. This is where you want to enter your information such as phone number, location and email address. It is suggested that you keep it short so it doesn't overflow in the pop-up window.

The top text box, named Additional Information, is the place where you enter your contact information and thank the user for being willing to send you feedback. Remember that your text should not be specific to one category. It won't change depending on the category selected.

Hourly threshold defines the maximum number of messages someone can send you within one hour. That does not work well to prevent spam since spammers use many different computers each with a different IP address. To fight spam we use a Hidden CAPTCHA instead. That works well.

Snap! Feedback Form

This Feedback form is actually the MO Feedback block configuration form. To reach this form, click on the Admin tab of your Snap! Toolbar, then click on Blocks.

Here you see a complete list of blocks. By default, we place the MO Feedback block in the footer since that's generally less intrusive there. Scroll down until you see the Footer region with the MO Feedback. Look for the configuration link on the same line, on the far right. Click on it to enter the form.

The MO Feedback block in your list of Snap! blocks.

Most of the MO Feedback form elements look a usual Block form. Note that the title is always kept hidden since the button will generally not be in a location where a standard block title would otherwise appear1.

MO Feedback Settings in your Snap! BlocksThe MO Feedback button can be placed on any one side of your screen. You choose that with the drop down that gives you a choice of Top, Left, Right, and Bottom. By default, your Feedback button will be attached to the left side of the screen.

The next parameter is the position of your button on that side. It can be expressed as a percent (i.e. 30%) or a pixel position (i.e. 320px.) It is generally a good idea to use a percent value for it works even in small windows. However, there are times when your theme uses graphics on the same edge you want to place your Feedback button on. In such a case defining the position as a hard coded pixel location may be wise.

Click the image to see a larger version.

To place the button in a corner, use 0% or 100% and one of the sides linked with that corner (i.e. to place something in the top-right corner, choose Top and use 100% in the position, or choose Right and use 0% in the position.)

The Feedback URL is set to contact by default. If you want to use a different system to gather your users feedback, you are free to change the path to anything you want. This can even be a full URL to a 3rd party website.

The Feedback URL Query and Fragment are the part after the ? character and # respectively. In my example, I use edit[cid]=2 which is the category identifier I want to show by default when my Snap! Feedback button is clicked.

You can determine the identifier of a category when you go to the edit the contact form category (see the previous chapter of this document.) At the time you edit a category, your URL looks something like this:

    /admin/build/contact/edit/2

I marked in red the category identifier. This is what you want to use in the Feedback URL Query field as shown earlier.

Finally, you have the Snap! Feedback dual image. We already talked about creating your own feedback button. I will assume you have such. So... click on the Browse... button under Feedback button image and search for your image file on your hard drive. Select it and save on your website by clicking Open (in most cases, the file browser will say Open when ready to select a file.)

Now you are ready to save the MO Feedback settings. Scroll to the bottom and click on Save. You're done.

Note that you may also select "authenticated user" inside the Role specific visibility settings text field if you only want users who have an account on your website to see the MO Feedback button. It is also possible to show or hide the button on specific pages with the last text field initialization.

  • 1. Say you use a Top feedback button and put the MO Feedback block your Snap! Website Footer, the title would appear in your footer when the Feedback button would appear at the top of your screen...
AttachmentSize
feedback-blue.xcf20.17 KB
bottom.svg8.11 KB
top.svg8.19 KB
top-right-corner.svg4.21 KB
top.png10.1 KB
feedback.png7.35 KB
bottom.png10.36 KB
top-right-corner.png5.12 KB
bottom-right-corner.png5.09 KB

Manage Features and Payments

Whenever you sign up for a Snap! Website you get an account on the Made to Order Software website. This is done for security reasons since we need to deal with highly sensitive data directly affecting your website back-end. All of the work you do on your website when logged in at Made to Order Software is done with a secure connection. This includes your payments if you have a paid for website and all the management of the features that you are using with your website. Features give your website more functionality. Yet, some features are not automatically installed because the majority of our users do not use them. It is therefore a good idea to go and check which features are currently available to you.

The chapter of the Snap! Documentation book proposes to explain how to handle your Made to Order Software account.

External Extensions

The following pages list external resources such as features you can mix between your website and sites such as Facebook or Squidoo.

It is important for SEO purpose to have links from websites such as Facebook to your business website. It generally increases the number of clicks and your credibility.

Adding HTML on your Facebook Page (all tags supported.)

To add any kind of HTML code, including JavaScript, IFRAME and OBJECT/EMBED tags, you need to use a 3rd party application.

Although the application allows you to add anything you want, remember that there are a certain number of things that are not allowed. For example, you cannot include a video that automatically starts (you can embed a video but the user has to click on Play if he/she wants to listen.

The authors of the Static HTML allow you to create up to 12 boxes. That should be a lot more than you need. It also supports FBML code (widgets from other pages, embed data, etc.)

To enter the HTML data in the Static HTML boxes, first click on one of the links presented here and install the application on one of your pages (you can re-use the same link for different pages, you can use only one link only once on a page.)

Once installed, you end up on your page and you see a little star with the word Welcome next to it. That means it installed properly on your page. Click on Welcome and the box opens an HTML editor. Enter your HTML there. Start with a small snippet if you have problems with a large page that doesn't want to save.

Once saved, you have links that let you view the tab as your users will see it. Make sure to always test!

The editor let you choose whether scrollbars should be added or not and whether your HTML code includes FBML. Also, you'll notice two boxes. When both are filled, one is only visible by non-fans and the other by fans.

At the top of the editor there is an orange bar that gives you help about the Static HTML. I suggest you read those information to change the word "Welcome" to you liking and other such things.

Adding HTML on your Facebook Page

Introduction

By default, when you create a Facebook page, you are limited by what Facebook offers by default. This means no nice HTML to welcome your users.

Here I give you a few insights on how you can add HTML to your Facebook page. This HTML code will render nicely with whatever necessary colors, borders, images, videos, etc. Just don't over do it...

For images, it is smart to put them on your website first to make sure you can edit them as required.

Videos, I'd suggest YouTube or a similar website and use their Embedded Link feature.

All styles must appear inline or you will have to upload the CSS file on your website. Having it inline will give you an easy way to modify it in realtime. When in a CSS file, changing the CSS file is not seen immediately by browsers (because of caches.)

Adding an HTML box1

For some reasons, with my account I cannot currently search for an application to add it. In any event, you can add up to 10 HTML boxes to each one of your pages. Note that you can add a given box only once to a page. After that, it's there and it cannot just be duplicated.

The following 10 links allow you to add up to 10 HTML boxes to your pages. Note that Facebook calls it an FBML box. This is because you can include Facebook codes too. (i.e. to add Facebook buttons, gadgets, etc.)

HTML Box 1

HTML Box 2

HTML Box 3

HTML Box 4

HTML Box 5

HTML Box 6

HTML Box 7

HTML Box 8

HTML Box 9

HTML Box 10

Editing the HTML Box

Once you added the HTML box, it is empty and called FBML which is rather ugly.

1. Go to your Facebook page and click on Edit Info.

Screenshot of the Snap! page with the Edit Info link showing.

2. This shows you a list of editable data on the left side of the screen. Click on Apps.

Go to your page application settings.

3. Scroll to the FBML application and click on the Go to App. link.

Go to the application to actually make use of it.

4. Enter the box title and contents

The contents of the box can include HTML. There are limits to which HTML codes you can use, but most are acceptable. For example, you can include an anchor (A), an image (IMG) and many other codes that are often refused on other systems. You may even add a registration form to your HTML!

The FBML box title and contents.

I strongly advise that you create the HTML with a different tool (such as your Snap! website by creating a page on your site,) and then copy and past the HTML code to your Facebook FBML contents. It is not unlikely very difficult to find HTML errors in an edit box like this one!

Once the HTML was entered, click Save Changes.

To see the result, click on the name of your page at the top-left, then on the new title you gave to your HTML box. It should appear on the left side along Wall, Description, etc.

5. Make your new box the one users see first when they come to your page

Once your box looks good, it is time to move it as the first thing people should see when to find your page. This is easy to do but is currently in a rather strange location...

Click on Edit Info for your page (see 1.) and then click on Manage Permissions (got to think about that one each time!)

How to select your Landing Page.

In the picture, my Default Landing Tab: says "Wall". This is often the default. Some people set it to Info instead. Click the drop down and select your new HTML box.

Advanced Features

1. Adding a YouTube movie

As mentioned earlier, advanced HTML tags are refused for security reasons. Still, facebook allows for Flash videos to be inserted in your HTML pages. This actually requires a special feature called swf (which is the Flash format magic name.)

Unfortunately, your standard editors will not help you in entering this tag, so you'll be on your own to write it. It makes use of the FBML language extensions. The tag looks like this:

<fb:swf
  swfbgcolor="000000"
  swfsrc="http://www.youtube.com/v/<identifier>"

  imgstyle="border-width: <size>px; border-color: white;"
  imgsrc="http://img.youtube.com/vi/<identifier>/2.jpg"
  width="520"
  height="410"
/>

The size shown here is the maximum recommended (i.e. the width and height parameters.) The ratio of a movie on YouTube is generally 4/3. If you know the widget, multiply it by 3 and then divide by 4 and round the result to the nearest integer (no decimal in the size, it's in pixels and pixels cannot be divided for video.) Then add about 20 pixels for the bar at the bottom. Adjust until you're satisfied2.

The imgstyle attribute shows information about the image to show when someone accesses your Facebook page. It is used to display the image defined with imgsrc. Replace the <size> with the width of the border. In most cases, you want to use 1. If you want to actually see the border, make sure to change the color from white to something else (i.e. blue, green, red, orange...)

The swfbgcolor is the color of the background for the Flash player. For video it is usual to use black (000000) and some times white (FFFFFF).

The swfsrc attribute is the link to your YouTube video. Note that you probably want the shorter URL notation which uses the /v/ path and your video identifier. When you usually go to a video the URL ends with ?v=WeIrD-NuMbEr-HeRe what appears after the equal sign up to the end of the next ampersand (&) character. The best is to try your URLs before saving your code in your Facebook page to make sure they work.

  • 1. Please, let us know if one or more of the following links stop working. Thank you.
  • 2. Note that YouTube will give you the correct sizes if you use their embedded code feature. That is generally the best way to define the width and the height parameters.