How To Use SBI!'s Built-in Functions in Your Pages
Contents
Step 1: Prepare Your Page
How To Use SBI!'s Built-in Functions in Your Pages
- SBI!'s NavBar & TOC
- SBI! Includes
- SBI!'s Socialize It!
- RSS/Blog It!
- MailOut's Opt-in Subscription Form
- MailOut's Subscription Thank You Web Page
- MailOut's Confirmation Thank You Web Page
- FBI! Form
- FBI! Thank You Page
- Content 2.0 Invitation
Step 2: Upload Your Page
Step 3: Upload Images and Supporting Files
You have access to the following built-in modules of Site Build It!, if you wish to use them in your Upload Your Own HTML pages...
- SBI!'s NavBar & TOC
- SBI! Includes
- SBI!'s Socialize It!
- RSS/Blog It!
- MailOut's Opt-in Subscription Form & Thank You Pages
- Form Build It! Forms & Thank You Pages
- Content 2.0 Invitations
There are some very basic rules that you must follow to use these powerful tools. In general, you will be either adding a simple tag, or copying-and-pasting some SBI!-provided code into your HTML pages before you upload them.
Even if you have no immediate need for any of these functions, it's a good idea to find out what's available for future reference.
Let's begin...
SBI!'s NavBar
- Select a Look & Feel and customize the NavBar.
- Place the ***NAVBAR*** tag (including 3 stars on either side) into your HTML page where you want the NavBar to appear.
You can either design and maintain your own navigation scheme, or use SBI!'s built-in NavBar and Navigation Options.
If you are not integrating the NavBar, feel free to skip this part. But do read the SBI! Includes section (below) to learn about another convenient way to plan and maintain your site navigation.
Are you using SBI!'s Transition template? The ***NAVBAR*** tag is already inserted in the correct position. Feel free to skip this section. Or, skim through the following pointers and refresh your memory.
What Is an "SBI! NavBar"?
SBI! has an automatic navigation creation system built into its SiteBuilder. (See Navigation Options in Site Central, in the All Pages section, for complete details.) You have access to the graphical left-hand side NavBar option.
You create (and customize, if you wish) its buttons by selecting/saving a specific style in the Look & Feel Selector tool (also in the All Pages section). These buttons link to TIER 2 pages (no TIER 3 pages). You determine how many buttons and in what order they appear on the NavBar.
When you include the ***NAVBAR*** tag in your HTML pages, SBI! will replace that tag with all of your navigation buttons. And if you set up RSS/Blog It! on your site, the RSS Box is added to each page along with the NavBar. (If you want to have a custom NavBar and still use the default RSS Box, see RSS/Blog It!, below, for the tag to add to your pages. If you want a custom RSS box instead, the RSS/Blog It! help contains a link to a personalized help page with the button codes you need.
As you add, remove, or re-order your pages, SBI! will automatically re-build all of your HTML pages to reflect your updated navigation.
Tips
- Use the ***NAVBAR*** tag as is, without any modifications.
- The width of the SBI!-generated NavBar is 130 pixels. (The length of your NavBar will vary depending on how many buttons it has.)
- Do not confuse using a ***NAVBAR*** tag on your uploaded pages, with adding a page to your NavBar. That decision is made in Step 2: Upload Your Page. For more information on doing that, read the Page Information/Options help.
SBI!'s TOC
- Place the ***TOC*** tag (including 3 stars on either side) and table code at the bottom of your index.html page, immediately after the last of your text.
SBI!'s Table of Contents (TOC) is located in the very bottom section of your home page (just above your footer). It contains a list of text links to your site's TIER 2 pages. And under each text link, there is a very short description about its destination page.
If you are not integrating a TOC, feel free to skip this part.
Do you want to use this function? Simply add the ***TOC*** tag (copy the code below) at the bottom of your index.html page, immediately after the last of your text, before your footer or any closing table tags (</td></tr></table>)...
If you're using a custom width for your site, you can change the table width in the code below to suit your needs.
SBI! will now create and modify your Table of Contents whenever you add or remove a TIER 2 page from your site.
Tips
- Offering a NavBar and a TOC, known as "redundant navigation," on your home page is a good thing. It helps SE spiders to deep-crawl your site (easily moving from your TIER 2 pages to their associated TIER 3 pages). It gives visitors two ways to explore your site. Of course, the short description with each text link will entice them to find out more!
- Restrict the ***TOC*** tag to your home page. Too many series of text links throughout your site may irritate the Search Engines and affect your ranking negatively.
SBI! Includes
- Create a plain text file that contains the element(s) you want displayed across multiple pages (i.e., HTML, javascript, images, etc.).
- Name the file with all lowercase letters (no capitals) with no spaces or non-standard characters. Do not use the same name as a current file (page or graphic) on your site.
- Save the file with the .shtml extension.
- In the location you choose, add the ***file-name.shtml*** tag (including the three stars on either side) to your HTML page.
- Upload the HTML file.
- When prompted, upload the .shtml file.
- Upload image and supporting files, if applicable. Then preview, analyze and build the page.
SBI! Includes are useful for adding and maintaining common elements across multiple pages of your Web site such as...
- your logo/top image
- your own custom navigation
- a custom footer
- a custom RSS box
- Google AdSense ads
Once set up, all you have to do is edit the Include file to update all of the pages that "include the include" tag, and then upload just the Include file. A great time saver!
Example
Let's say you want to use an SBI! Include to easily maintain your site navigation, which needs to be updated every time you add or remove a TIER 2 page on your site. Here's how you would set this up...
1) In your HTML editor, create your Include file that has your navigation in it, name it ("navigation.shtml"), and save it as a plain text file. (Important note: no <html>, <head>, <title> or <body> tags -- just the navigation table that you want to "include" in all of your HTML pages).
2) In your HTML page (we'll call this page "contact-us.html"), add ***navigation.shtml*** in the spot where you want your navigation to appear.
3) Using the Upload Your Own HTML tool, upload your contact-us.html page in Step 2, as you would for any HTML file. When you click the Upload Your HTML button, SBI! will recognize that you are using an Include tag (***navigation.shtml***) and prompt you to upload it.
4) Select and upload the ***navigation.shtml*** file and continue with the rest of the uploading process, previewing, analyzing, and submitting. (If the Include file has references to any new images, media or support files, you will be prompted to upload them in Step 3, an additional step that appears after you have uploaded your Include file.)
5) When you click the Preview button, you will see that the contents of your navigation.shtml file have been included in your contact-us.html page...
From here on in, any time you need to make a site-wide navigation change, all you have to do is update the ***navigation.shtml*** file and use Quick Re-upload It! to upload it. SBI! will automatically update and re-build any page that has the ***navigation.shtml*** tag.
What are you allowed to put in an Include file?
Include files can contain...
- Any HTML, CSS, or Javascript code
- Any image, media or supporting files (remember to reference them as you would on any Upload Your Own HTML page (see the Integration Guidelines for details)
-
Any of SBI!'s special tags (ex., ***NAVBAR***)
Important Note: Content 2.0 special tags (ex., ***C2_invitation_2006649***) cannot be used here. Do not place them in Include files.
Include files cannot contain...
- other Include files
- <html>, <head>, <title> or <body> tags
- Content 2.0 special tags (ex., ***C2_invitation_2006649***).
Tips
- Each HTML page can contain as many Includes as you wish.
- Analyze It! does not factor in the text contained in Include files when making its report.
- Include files can be used side-by-side in the live page (ex., to display two images next to each other), but the Include files must be separated by a carriage return in the HTML or Source window of your HTML editor.
- The first time you use a particular Include file, you cannot use Quick Re-Upload It!. You must use the Upload Your Own HTML Page process.
Maintaining Includes
Use Quick Re-Upload It! if you have made text-only changes on the files.
If you add any new images or other supporting files, you must use the Edit this page link in Page Manager.
When you re-upload an Include file (use Quick Re-Upload It! for minor changes), SBI! automatically regenerates all pages containing that Include. (Please note: The changes may take up to 60 minutes or longer to appear on your site, depending on the number of pages that need to be rebuilt.)
Socialize It!
- Copy the ***SOCIALIZEIT*** tag and paste it into a page or Include file at the desired location. If you use CSS to style your site, place the tag inside a div. Save the file.
- Upload the page. (Upload existing page files using Quick Re-Upload It!.)
- If you use a new Include for the tag, upload one page using Upload Your Own HTML. Then use Quick Re-Upload It! to upload the remaining page files (after adding the Include tag).
-
If you add the tag to an existing Include, upload only the Include file using Quick
Re-Upload It!.
Socialize It! allows you to add an "8-button" button bar (plus an optional "Pay It Forward" link on any page of your site with the use of the ***SOCIALIZEIT*** tag. The button bar looks like this...
For details about where to put the Socialize It! tag, and for articles about social marketing, see the Socialize It! help.
Copy the tag above and paste it into the page code where you want the button bar to appear. Save the file and build the page. (If you're adding the tag to an existing page, use Quick Re-Upload It! to upload the page again.) Continue to create/edit and upload your remaining pages.
If you add the ***SOCIALIZEIT*** tag to a new Include, upload one page file with Upload Your Own HTML. SBI! will ask you to upload the new Include file before you build the page. Once done, add the Include tag to your remaining page files and upload them with Quick Re-Upload It!.
If you already have an Include tag in your preferred location (ex., your footer include), add the tag to the Include file and use Quick Re-Upload It! to upload it. Depending on the number of pages your site has, you should see the button bar on all pages after 30-120 minutes.
Important Note
If you want to remove the button bar from all your uploaded pages, you must remove the tag from the page files. Deactivating the Socialize It! module will not remove the button bar from your uploaded pages. However, if you want to customize the Pay It Forward link text, you must activate Socialize It!.
RSS/Blog It!
- Copy the ***RSSIT*** and paste it into a page or an existing Include file at the desired location. Save the file.
- Upload the page. (Upload each existing page file using Quick Re-Upload It!.)
- If you use a new Include for the tag, upload one page using Upload Your Own HTML. Then use Quick Re-Upload It! to upload the remaining page files (after adding the new Include tag).
-
If you add the tag to an existing Include, upload only the Include file using Quick
Re-Upload It!.
You must first set up your RSS feed (as outlined in the RSS/Blog It! section of Site Central) before you have access to the HTML code for the RSS box.
You can add an RSS box to your pages, and the auto-discovery tag to the head section of those pages, by adding the ***RSSIT*** tag to them.
If you have not yet set up RSS/Blog It!, you should do that now.
Copy the tag above and paste it into the HTML code where you want the RSS box to appear on your page. Save the file and upload it. (If this is an existing page, use Quick Re-Upload It! to upload the page.)
If you add the ***RSSIT*** tag to a new Include, upload one page file with Upload Your Own HTML. SBI! will ask you to upload the new Include file before you build the page. Once done, add the Include tag to your remaining page files and upload them with Quick Re-Upload It!.
If you already have an Include tag in your preferred location (ex., your NavBar include), add the tag to the Include file and use Quick Re-Upload It! to upload it. Depending on the number of pages your site has, you should see the button bar on all pages after 30-120 minutes.
Tips
- If you chose to have a custom explanation page when you set up your feed, you will need to change the text and the L&F of that page to suit your needs. Click here for help with RSS/Blog It!.
The MailOut Opt-in Subscription Form
You must first set up your e-zine in the MailOut Manager (found in the BusinessCenter of Site Central) before you can integrate an SBI! Opt-In e-zine subscription form into your HTML page.
- Click the Get Code button.
- Copy and paste the highlighted code into your HTML page at the desired location.
- Close the code window.
Here is an example of the subscription form...
Tips
- You may change the size, wording, background color (etc.) of the subscription form. But do not alter any of the code. Your form will not work if you do. And the words "Email" and "Name" must remain as the final words before the text boxes, or the form will not work.
- No need to restrict yourself to a couple of sign-up forms on your site. Give your visitors several opportunities. You just never know when they will react favorably! See DAY 8 of the Action Guide for more strategies.
The MailOut Subscription Thank You Web Page
- Create a new page, customizing the subscription thank you message.
- Name the page thank-you-sbi-zine.html (exact wording).
- Upload the page.
You have two choices for the Thank You Web Page (displayed after a visitor completes the subscription form)...
-
SBI! automatically generates a default page for you.
If you decide to use the default page, be sure to review the second tip below to customize the L&F.
-
You create your own page, and customize the Thank You message the way you want it.
If you decide to customize the message, there are two things you need to mention in it (review the default message in the Customize Subscription Thank You Web Page tool in MailOut Manager for more details).
- That your subscribers will be receiving a confirmation e-mail, and why.
- What to do if they do not receive that message, including checking the trash and the junk folder, and to whitelist your domain name.
Once you have the necessary information, add any special offer. You may want to add a free download here, or wait and offer it after they confirm their subscription (see the next section). Or, as a sign of your appreciation, you want to say thanks and highlight a special offering on your site.
You may also want to suggest that they subscribe to your RSS feed to stay current with your site updates.
Satisfied with the page? Name the file thank-you-sbi-zine.html, and then upload as per usual.
SBI! looks for this file name on your domain whenever someone completes the subscription form and then displays your customized Subscription Thank You Web Page. (If you name the file incorrectly, SBI! displays the default Thank You Web Page instead.)
Tips
- Update or change the content of your Subscription Thank You Web Page whenever you want!
-
First create a knocked-down simple version of your site's L&F using SiteBuilder. SBI! will then merge it into all of the other post-signup communication pages (ex., the opt-in confirmation page). Here's how to use SiteBuilder...
1) In Site Central, click on the Look & Feel Selector button. On its tool page, choose the Style: Custom option.
2) Now take screenshots of your current Logo and Left Hand Side Image. Size per the online L&F help. Plug them, along with your Background Image, into this custom style to simulate your full-HTML L&F.
3) Next go to FooterBuilder (click on the Footer button in Site Central) and do the same for your footer.
-
Any internal links (ones that you would normally use a relative reference for) and any images with internal, relative references need absolute references. (This includes ones that you place in Include files, such as a custom NavBar, a custom top image or footer). The Thank You page is pulled from another source, not the root of your site.
Relative references will result in broken images and "No Such URL" messages when links are clicked on.
The MailOut Confirmation Thank You Web Page
- Create a new page, customizing the confirmation thank you message.
- Name the page confirmation-sbi-zine.html (exact wording).
- Upload the page.
You have two choices for this Thank You Web Page as well (displayed after visitors confirm the subscription via the e-mail they receive)...
-
SBI! automatically generates a default page for you.
If you decide to use the default page, be sure to review the second tip above (in the MailOut Subscription Thank You Web Page section) to customize the L&F.
- You create your own page, and customize the Thank You message the way you want it.
This is where you can provide a link to a free incentive offer, such as a PDF or audio download. You may also want to highlight another special offering on your site.
Satisfied with the page? Name the file confirmation-sbi-zine.html, and then upload as per usual.
SBI! looks for this file name on your domain whenever someone confirms the subscription. It then displays your customized Confirmation Thank You Web Page. (If you name the file incorrectly, SBI! displays the default Thank You Web Page instead.)
Tips
- Update or change the content of your Confirmation Thank You Web Page whenever you want!
- If you haven't already created a simple version of your site's L&F using SiteBuilder, you should do so now. See the instructions above, in Integrating the MailOut Subscription Thank You Web Page.
-
Any internal links (ones that you would normally use a relative reference for) and any images with internal, relative references need absolute references. (This includes ones that you place in Include files, such as a custom NavBar, a custom top image or footer). The Thank You page is pulled from another source, not the root of your site.
Relative references will result in broken images and "No Such URL" messages when links are clicked on.
FBI! Form
You must first complete the Form Build It! process (as outlined in the Form Build It! Library section of Site Central) before you can get the HTML code for a specific form.
- On the Upload Your Own HTML tool page, in the Form Build It! Forms row, select the form for which you want the code.
- Click the Get Code button. Copy and paste the highlighted code into your HTML page wherever you want your form to appear.
- Close the code window.
Tips
- If you plan to display a form on a page more than once (ex., at the top and bottom of a very long page), you must collect the code separately for each appearance. You cannot simply paste the same code in twice. Neither form will work if you do.
- If you also want to use a customized Thank You page (after your visitor submits this form), see the next section below.
- You may change the size, wording, background color, etc., of the form. But do not alter any of the form field names, the Form action, the javascript, or any of the field variables. Your form will not work if you do.
- See DAY 8 of the Action Guide for more strategies.
FBI! Thank You Page
You must first complete the Form Build It! process (as outlined in the Form Build It! Library section of Site Central) before you can get the page name for a specific form's Thank You page.
- Create a new HTML page and insert this tag <<THANKYOU>> in the body of the page.
- On the Upload Your Own HTML tool page, in the Form Build It! Thank You Pages row, select the Form for which you want to create a custom Thank You Page.
- Click the Get Code button next to that form. Copy the file name provided and save your custom Thank You page with that file name.
- Close the code window.
- Upload this page as usual.
SBI! displays a Thank You Page after a visitor submits a form on your page.
To create and upload a custom Thank You page, SBI! requires that this HTML page have a specific file name. SBI! provides you with this name.
It must also contain this specific tag: <<THANKYOU>>, which you will insert into the body of your HTML page.
You can personalize your customized Thank You page by adding a <<FIRSTNAME>> tag. This will enter the first name of the form user into the text of the Thank You page. Note: If you plan to use this tag, make the First Name a required field in your form.
Tips
- Maintain your site's L&F on your Thank You page for a unified familiar presentation.
- Review DAY 8 of the Action Guide for Form/Autoresponder strategies.
-
Any internal links (ones that you would normally use a relative reference for) and any images with internal, relative references need absolute references. (This includes ones that you place in Include files, such as a custom NavBar, a custom top image or footer). Your CSS file reference must also be absolute.
Thank You pages are pulled from another source, not the root of your site. So relative references will result in broken images and "No Such URL" messages when links are clicked on.
Content 2.0 Invitation
- Upload and build your utility page.
- In the Built-In Functions section of the Upload Your Own HTML tool page, in the Content 2.0 Invitations row, click on Select Invitation to choose the invitation for which you want the tag.
- Click the Get Code button.
- Copy and paste the highlighted tag into your HTML page wherever you want your invitation to appear. Save the file.
- Close the code window.
- After uploading the page, preview it to ensure that the invitation displays properly.
You must first complete the Content 2.0 Invitation process (as outlined in the Content 2.0 Library section of Site Central) before you can get the HTML tag for a specific invitation.
You must also upload and build your Content 2.0 utility page before any invitations will work. Click here for help with the utility page.
Tip
- Put only one invitation on each content page. This ensures that the content of the invitation is related to the topic of the page, and focuses your visitors on only that idea or topic.
Important Note
Take the time to ensure that you're placing an invitation on the best page for it. You can switch it later to another page, but it could change your page rankings at the engines, and possibly upset those visitors who have come to expect it at the original location.
Now that you know how to integrate SBI!'s built-in functions, you can move forward to the last and very important part of the Integration Guidelines...