How To Use SBI!'s Built-in Functions in Your Pages

Contents

Upload Your Own HTML Overview

Step 1: Prepare Your Page

SBI! Integration Guidelines

How To Use SBI!'s Built-in Functions in Your Pages

Setting Up Page Info/Content

Step 2: Upload Your Page

Page Information/Options

Select and Upload Your Page

Step 3: Upload Images and Supporting Files

Browse/Upload Associated 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...

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...

Directions for Use
  • 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

SBI!'s TOC

Directions for Use
  • 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, if you have one). 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 (if you have one) 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

SBI! Includes

Directions for Use
  • 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 file.
  • Save and upload the HTML file.
  • When prompted, upload the .shtml Include 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...

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's custom 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 the 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 file (we'll call this page "contact-us.html"), add ***navigation.shtml*** (including the three stars on either side) 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.

You can also upload your Includes on their own, before or after uploading a page file, with Quick Upload It!. Click on the link below for the help with QUI!...

http://help.sitesell.com/webftp/quick-upload-it.html

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 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...

Include files cannot contain...

Tips

Maintaining Includes

Use Quick Upload It! if you've made changes in any of the Include files. If you add new images or support files or media files to the Include, remember to upload those files as well using QUI! (it will not remind you to do so). If you want that reminder, edit an existing page file, upload the updated Include file, and then upload the remaining files when prompted to do so.

When you re-upload an Include file, SBI! automatically re-builds your site.

(Please note: The changes may take 60 minutes or longer to appear on your site, depending on the number of pages on your site, since they all need to be rebuilt.)

Includes in SBI! Templates

All 3-column SBI! templates have had 21 SBI! Include tags coded into the HTML file for the template you select. For a closer look at those Includes, read this help.

Socialize It!

Directions for Use
  • Copy the ***SOCIALIZEIT*** tag and paste it into a page or Include file at the desired location.
  • Upload the page. (Upload existing page files using Quick Upload It!.)
  • If you use a new Include for the tag, use Quick Upload It! to upload the Include and your page files (after adding the Include tag).

Socialize It! allows you to add a 2-button (2-Pack) or 8-button (8-Pack) button bar (plus an optional "Pay It Forward" link) on any page of your site with the use of the ***SOCIALIZEIT*** tag. The button bars look like this...

Socialize It! screenshot of Facebook and Twitter buttons

Socialize It! screenshot of 8 buttons

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 upload/build the page. (If you're adding the tag to an existing page, use Quick Upload It! to upload the page again.) Continue to create/edit and upload your remaining pages.

If you have an Include tag in your preferred location (ex., z-socializeit.shtml), add the tag to the Include file and use Quick Upload It!. Or add it to a new Include and upload that new file with QUI!. Then upload all of your pages again with QUI!. Depending on the number of pages your site has, you should see the button bar on all pages after 60-120 minutes.

Important Notes

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.

If you want to add the Pay It Forward link text, you must activate Socialize It! from within the tool itself.

Face It!

Face It! allows you to put up to 3 Facebook Like buttons plus Facebook comments (we call it Commenting in Face It!) on any page of your site (with certain exceptions) that has the ***SOCIALIZEIT*** tag, simply by adding one or more tags to the page (or to SBI! Includes).

Commenting will not appear on Content 2.0 submission pages. That option will appear in a future release of Face It!

You'll need to set up Face It! before the tags will work. Do that here...

http://help.sitesell.com/face-it.html

Once the Like buttons and Commenting have been activated, you're ready to add their tags to your site's pages.

There are up to four tags you can add to each page, or to relevant Includes...

Each tag delivers the settings that you chose at Facebook and then in Face It!.

If you want a Facebook Like button (or more than one) on your pages, add one or more of the Like tags where you want the button(s) to appear. Where you put each of the three tags depends on which type of button you created in Face It! for Like Button 1, Like Button 2 and Like Button 3. Each tag corresponds to the same button in Face It!.

Place each tag approximately where you indicated in "Location" in Face It!. For example, if you indicated that you want a button below your NavBar, paste the tag there (if you're using an Include, add it to the one that corresponds with the bottom of the NavBar).

Why? Because a future version of Face It! will include tracking software that tells you which button(s) is/are getting the Likes. It will be location-based.

We recommend that you add the tags to SBI! Includes, for easy removal or relocation in the future (especially if the tracking software indicates that a location isn't a good one).

If you're using one of the official SBI! 3-column templates, there are Includes added in the locations where your buttons would go. Paste the tag into the corresponding Include file...

Add the Commenting tag at the bottom of your page, just above your ***SOCIALIZEIT*** tag. If you're using one of the official SBI! 3-column templates, add it to the z-above-socialize-it.shtml Include file. You may need to add some white space before the Socialize It! tag, with a <br> or with a margin-bottom.

If you plan to add Commenting only to the home page, paste the code itself directly to the page, just above the ***SOCIALIZEIT*** tag.

Tip

Very Important Notice

If you never added Facebook Like buttons and comments manually (without using Face It!, you can ignore this notice.

However, if you already have buttons or comments boxes, or other XFBML-based social plugins on your pages, continue reading this notice.

Face It! does the following when rebuilding your pages...

  • It removes multiple sets of <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1" async="true"></script> tags from each page, and replaces them with just one set.
  • It removes multiple <meta property="fb:admins" ... /> tags from the head of your pages, and replaces them with one meta tag containing all the admin usernames or profile IDs found on the page, separated by commas.

  • If your <html> tag doesn't contain xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/", Face It! adds these namespaces to the tag.

    This ensures that visitors using old versions of Internet Explorer will see your Like buttons and comments box. If your pages had only one of the namespaces (xmlns:fb or xmlns:og), Face It! adds the other one.

If it does any of the above, you'll receive a message after using Face It! that SBI! is cleaning up your HTML.

RSS/Blog It!

Directions for Use
  • 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 Upload It!.)
  • If you use a new Include for the ***RSSIT*** tag, use Quick Upload It! to upload it and then all of the page files (after adding the new Include tag).
  • If you add the ***RSSIT*** tag to an existing Include, upload only the Include file using Quick 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 Upload It! to upload the page.)

If you add the ***RSSIT*** tag to a new Include, upload the new Include file with Quick Upload It!. After adding the Include tag to your page files, upload them with QUI! as well.

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 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

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.

Directions for Use
  • 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...

Email

Name

Then

Don't worry -- your e-mail address is totally secure.
I promise to use it only to send you Garden News!

Tips

The MailOut Subscription Thank You Web Page

Directions for Use
  • 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)...

  1. 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.

  2. 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

The MailOut Confirmation Thank You Web Page

Directions for Use
  • 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)...

  1. 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.

  2. 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

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.

Directions for Use
  • 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

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.

Directions for Use
  • Create a new HTML page and insert this tag <<THANKYOU>> in the body of the page (if you want to use the form's Thank You page text).
  • 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 can also contain this specific tag: <<THANKYOU>>, which you will insert into the body of your HTML page. Use this tag if you want to use the form's Thank You page text, which you edited while building the form. You don't have to use the tag, however. You can write the text for this page directly in the file.

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

Content 2.0 Invitation

Directions for Use
  • 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

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...

Setting Up Your Content