Integrate Solo Build It!'s Built-in Functions

Contents

Upload Your Own HTML Overview

Solo Build It! Integration Guidelines

Set Up Your Page Information and Content

Integrate Solo Build It!'s Built-in Functions

Upload Your Page

Upload Images and Supporting Files

You have access to the following built-in modules of Solo Build It! (SBI!), 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 tools.

In general, you'll be either adding a simple tag, or copying-and-pasting some SBI!-provided code into your HTML pages before you upload them.

Directions for Use
  • Customize the NavBar in Site Designer. Place the ***NAVBAR*** tag into your HTML page where you want the NavBar to appear.

    Or customize the Horizontal Menu in Site Designer. Place the ***NAVBAR orientation=horizontal*** tag into your page where you want the navigation menu to appear.

    Or customize the Horizontal Menu in your CSS file. Upload the CSS file. Place the ***NAVBAR orientation=horizontal*** tag into your page where you want the navigation menu to appear.

You can either design and maintain your own navigation scheme, or use SBI!'s built-in vertical NavBar or horizontal menu navigation (with a Menu button if you're using a responsive design).

If you're not integrating the NavBar or horizontal menu navigation, 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.

SBI! has an automatic navigation creation system built into SiteBuilder. (See Site Navigation in Site Central, in the All Pages section, for details on re-ordering your navigation and adding Nav Headers.) You have access to the NavBar and horizontal navigation options.

You create (and customize, if you wish) the buttons by selecting/saving a specific style in Site Designer or with your HTML/CSS editor. These buttons/menu items link to Tier 2 pages (no Tier 3 pages). You determine how many and in what order they appear in the navigation.

If you use the horizontal navigation menu, you must style it with CSS in either Site Designer or your CSS file.

When you include the ***NAVBAR*** tag in your HTML pages, SBI! will replace that tag with all of your vertical NavBar buttons. And if you set up RSS/Blog It! on your site, the RSS Box is added to each page along with the NavBar. However, we recommend that you use the more modern-looking What's New Box.

When you include the ***NAVBAR orientation=horizontal*** tag in your HTML pages, SBI! will replace that tag with all of your horizontal navigation menu items. The RSS Box is not added to each page along with the menu. So be sure to use the ***WHATSNEW*** tag if you want to add the SBI!-built What's New Box to your pages. (See RSS/Blog It!, below.)

Are you using the SBI! template based on a Site Designer style and customization? The ***NAVBAR*** tag and ***NAVBAR orientation=horizontal*** tags are already inserted in the correct positions. Simply delete the one you don't want to use.

If you're using either tag in a responsive design, you can turn the navigation into a Menu button when someone views your pages on a phone. Use the relevant code, depending on which type of navigation you're using...

***NAVBAR menu=Menu***
***NAVBAR orientation=horizontal menu=Menu***

You can change what the button says by changing menu=Menu to anything you want. We recommend that you continue to use the word "Menu" if your site is in English. If your site is in another language, use that language's equivalent of "Menu," or whatever the common term is for the menu button on a mobile phone.

To change the word, replace menu=Menu with menu=XXXXX, where XXXXX is the word(s) you want to display in the button.

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 website, such as...

Once set up, all you have to do is edit the Include file to update all of the pages that have the Include tag, and then upload just the Include file with Quick Upload It!.

An 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 ("z-navigation.shtml"), and save it as a plain text file. (Important note: no <html>, <head>, <title> or <body> tags -- just the code for the navigation 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 ***z-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're using an Include tag (***z-navigation.shtml***) and prompt you to upload the associated file.

    You can also upload your Include files on their own, before or after uploading a page file, with Quick Upload It!, found in the WebFTP section of Site Central.

  4. Select and upload the z-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'll 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'll 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 z-navigation.shtml file and use Quick Upload It! to upload it. SBI! will automatically update and re-build any page that has the ***z-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 with UYOH, 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.

Socialize It!

Directions for Use
  • Copy the ***SOCIAL-SHARING*** 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).

The ***SOCIAL-SHARING*** tag allows you to add a vertical (sticky) or horizontal (with or without platform names) button bar on any page of your site. These buttons let your visitors share your content on their social media account(s).

The ***SOCIAL-DESTINATIONS*** tag lets you add a horizontal button bar on any page of your site. These buttons let your visitors visit and follow your social media pages or accounts.

For details about where to put each tag, see the Socialize It! help.

There are six different social sharing tags, depending on what type of sharing bar you want to add to your pages. Copy the one you want to use and paste it into the page or into an SBI! Include.

Important Note

You must select the buttons you want to display in the sharing bar in Socialize It! before they will appear on your page(s). If you have not yet selected the buttons, do that now.

Although the sticky bar is usually stuck to the left or right side of the page, you can also stick it to the top or bottom of the page.

To add the social destinations bar to your page(s), copy this tag...

***SOCIAL-DESTINATIONS***

Paste the tag into the page or SBI! Include where you want the destinations buttons to appear.

Important Note

You must create the buttons you want to display in the destinations bar before they will appear on your page(s). If you have not yet created the buttons, do that now.

Go to Socialize It!, click on the Destinations tab, and paste or type in the URLs (Facebook and YouTube) or handles (Twitter, Pinterest and Instagram) of your social media accounts or pages. Also add the Tooltip text for each destination.

(If you're adding the sharing and/or destinations 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 SBI! Include tag in your preferred location (e.g., z-socializeit.shtml), add the tag to the Include file and upload it with Quick Upload It!. Or add it to a new Include and upload that new file with QUI!.

Add the new Include's tag to your pages and upload all of them 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 either bar from all your uploaded pages, you must remove its tag from the page files or the Include.

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), simply by adding one or more tags to the page (or to SBI! Includes).

Commenting does not appear on Content 2.0 submission pages.

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

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

We recommend that you add the tags to SBI! Includes, for easy removal or relocation in the future.

If you're using one of the official SBI! 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! 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 CSS styling.

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

Tips

Pin It! (Pinterest Save Button)

With the popularity of Pinterest, making it easy for your visitors to pin your photos to their boards can mean more exposure and more traffic for your site.

Only pin photos that your visitors will love to add to their boards. That means very unusual/intriguing photos, or very beautiful ones, or ones that help fulfill a want or desire.

Do not add a Save button to photos that you purchased from iStock, Dreamstime or any other stock photo agency. You bought the right to display those photos on your pages, not the right to encourage others to display them on Pinterest boards.

And do not add the Save button to every photo on every page. Add it to one photo, two at the most, on a page, and only on those pages where photos meet the criteria mentioned above.

That said, you have another option. Pinterest has some code that shows no Save button until a visitor hovers over an image on the page. Then the image can be pinned. This code is useful to add to your pages, as it lets visitors decide whether an image is good enough to be pinned.

If you want to add the hover version of the Save button, add the following code to the last SBI! Include at the end of the page file.

<script async defer data-pin-hover="true" data-pin-save="true" src="//assets.pinterest.com/js/pinit.js"></script>

Important Note: Do not add this code to any page where you have stock images displayed. This will protect your interests against the stock image companies.

See the Pinterest Action Guide in the TNT HQ for more about using Pinterest to drive traffic to your site.

Directions for Use
  • Inside the <img> tag, add ***PINIT***="description".
  • Replace description with a description (up to 250 characters) of the image.

To add the Save button to an image, you'll need to add this code inside the <img> tag...

***PINIT***="description"

Then you'll replace the word description with a description of the image.

Once you're done, the image tag will look like this...

<img src="image-files/file-name.jpg" width="###" height="###" alt="alt text" ***PINIT***="A description of the image that pre-fills the Description box whenever anyone clicks on the Save button.">

What does adding a description do? When a visitor clicks on the Save button below one of your photos, it opens a small Pinterest window. This window displays a thumbnail of the image along with the description that you provide...

Many Pinterest users do not change the description included with images that they pin from websites. By providing what you want them to show when they pin your image, you increase the chances of other Pinterest users finding and visiting your images in Pinterest searches. And finding your images can lead to more traffic (targeted traffic) to your site.

Tips

You can create a gallery of all or some of the photos on each page of your site (each page can have its own gallery).

Directions for Use
  • Inside the <img> tag, add ***GALLERY***="description".
  • Replace description with a description (up to 250 characters) of the image.

As you did with the Pinterest Save button above, just add a tag and description to the <img> tag...

<img src="image-name.jpg" alt="alt text" ***GALLERY***="description">

Tip

RSS/Blog It!

Directions for Use
  • Copy the ***WHATSNEW*** tag and paste it into an existing Include file at the desired location. Save the file.

    If you add the tag to an existing Include, upload only the Include file using Quick Upload It!.

    If you use a new Include for the tag, use Quick Upload It! to upload it and then all of the page files (after adding the new Include tag to them).

You can add a What's New Box by adding the ***WHATS-NEW*** tag (and its 10 parts).

If you have not yet set up RSS/Blog It!, do that now.

Copy the What's New Box tag (and all of its parts) and paste it into the HTML code where you want the What's New 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.)

Click here for the tag code and the code to style the box, which you'll need to add to your style.css file.

If you already have an Include tag in your preferred location (e.g., 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 What's New Box on all pages after 60-120 minutes.

If you add the ***WHATS-NEW*** 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.

The Newsletter Opt-in Subscription Form

You must first set up your newsletter in MailOut Manager (found in the BusinessCenter of Site Central) before you can add an opt-in newsletter subscription form into your HTML page.

Or connect to Mailchimp or AWeber in Connected Services, located in Site Central.

Directions for Use
  • Click the button to display the tag and its elements.
  • Copy and paste the tag into your HTML page at the desired location, then edit the text if desired.

To add the opt-in form for your newsletter, click to view the tag. Copy all of it.

In your HTML file or SBI! Include, paste in the tag, where you want the form to appear. Edit any of the text to translate it into another language.

***EZINE2 show_email_label="1"
show_name_label="1"
show_name_field="1"
show_gdpr_fields="1"
orientation="horizontal"
alignment=""
button_text="Add"
email_label="Enter Your E-mail Address"
name_label="Enter Your First Name (optional)"
gdpr_age_consent_label="I am at least 16 years of age."
gdpr_privacy_policy_consent_label="I have read and accept the <a href='/privacy-policy.html' target='_new'>privacy policy</a>."
gdpr_information_purpose_label="I understand that you will use my information to send me a newsletter." ***

Do not touch the privacy policy link unless your page has a different URL. And we recommend that you do not change the wording of the first two statements unless you need to translate them into another language.

For the Edit the Purpose statement, if desired, edit it to include the name of your newsletter. Also include the frequency of mailings (weekly, monthly, etc.).

So that visitors know they're not "trapped" into receiving your newsletter forever, also include something like "I understand that I can unsubscribe at any time by clicking the unsubscribe link at the bottom of any email."

So a completed Purpose statement might read like this...

I consent to you using my information only to send me your monthly Anguilla Beach Lovers newsletter. I understand that I can unsubscribe at any time by clicking the unsubscribe link at the bottom of any email.

Tips

Mailchimp Lists

Directions for Use
  • Click the Select List... menu.
  • Click on the Mailchimp list you want to use for this opt-in form.

If you activated Mailchimp in Connected Services, this is where you select which list to attached your newsletter opt-in form to.

Click on the Mailchimp Lists menu. Select the list you want to connect to the form.

AWeber Lists

Directions for Use
  • Click the Select List... menu.
  • Click on the AWeber list you want to use for this opt-in form.

If you activated AWeber in Connected Services, this is where you select which list to attached your newsletter opt-in form to.

Click on the AWeber Lists menu. Select the list you want to connect to the form.

The MailOut Thank You Web Pages

Directions for Use
  • Create a new HTML page. Save it as sbi-mom-thankyou-template.html.
  • Paste ***sbi-head*** into the head of the page, before the CSS file reference. Remove the title, meta description and meta keywords tags from the head.
  • Remove all the content from the Content Column, starting with the H1 headline tag and all SBI! Include tags with content in them. Also remove social media Include tags in the Content Column.
  • Remove all SBI! Include tags for Includes that have AdSense or other ad code in them.
  • Paste ***sbi-content*** into the Content Column.
  • Save and upload the page.

Start by creating a page and saving it as sbi-mom-thankyou-template.html. Remove the title, meta description and meta keywords tag.

Add ***sbi-head*** to the head, before the CSS file reference.

Remove all content from the Content Column, starting with the H1 headline, and social media SBI! Include tags.

Paste ***sbi-content*** into the Content Column.

Satisfied with the page? Save it, and then upload it.

FBI! Form

You must first complete the Form Build It! process (as outlined in the Form Build It! Library help) before you can get the HTML code for a specific form.

Directions for Use
  • In the Form Build It! Forms row, select the form from the menu.
  • Copy and paste the form's tag into your HTML page wherever you want your form to appear.

Tips

FBI! Thank You Page

Upload a template file that will work with every Thank You page.

You must first complete the FBI! process (as outlined in the Form Build It! Library help) before the Thank You page will work.

Directions for Use
  • Create a new HTML page and save it with the name sbi-fbi-thankyou-template.html.
  • Paste ***sbi-head*** into the head of the page, before the CSS file reference. Remove the title, meta description and meta keywords tags from the head.
  • Remove all the content from the Content Column, starting with the H1 headline, and social media SBI! Include tags.
  • Remove all SBI! Include tags for Includes that have AdSense or other ad code in them.
  • Paste ***sbi-content*** into the Content Column.
  • Save and upload the page.

SBI! displays a Thank You page after a visitor submits a form on your page.

To ensure that those pages use the same design as the rest of your site, you have to build a Thank You page for each form, or upload a template file that every Thank You page will use.

Template Method

The template method is the simplest method, as you upload just one file, which every Thank You page will use when it's required.

Open your site template in your HTML editor. Remove the title, meta description and meta keywords tags from the head section.

Copy ***sbi-head*** and paste it into the head, before all the CSS file references.

Remove all content from the Content Column, starting with the H1 headline, and social media SBI! Include tags.

Add ***sbi-content*** in the Content Column where you want the message you created for each Thank You page to appear.

Then delete every Include tag for Includes that contain AdSense or other ad code.

Save the file with the name sbi-fbi-thankyou-template.html. Upload it with Quick Upload It!.

The template then appears in Site Central's Page Manager, with the name of FBI! Thank You Pages.

Tips

Content 2.0 Invitations

Directions for Use
  • Upload and build your submissions, standalone comments, and Thank You page/comment-form page templates.
  • In the Content 2.0 Invitations row, click on Select Invitation to choose the invitation for which you want the tag.
  • Copy the highlighted tag and paste it into your Tier 2 or 3 page wherever you want your invitation to appear. Save the file.
  • Upload the file. After uploading it, preview it to ensure that the invitation displays properly.

You must first complete the Content 2.0 Invitation process before you can get the HTML tag for that specific invitation.

You must also upload and build your 3 Content 2.0 templates before any invitations will work. Click here for help with the templates.

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.

Each breadcrumb in the Breadcrumb Trail Library is assigned a tag here in UYOH.

At the bottom of the Integrate SBI!'s Built-in Functions page is a menu labeled Select Trail.... Click on it to see the list of pages with a breadcrumb trail (Tier 2 pages and Tier 4 pages).

Select a trail by clicking on it. In the small box that appears, copy the comment and the tag. If it's a Tier 2 page tag, paste that into the Tier 2 file in your HTML editor. Also paste it into every Tier 3 file that the Tier 2 page links to.

Select another trail in the menu and copy the comment and tag. Paste into the Tier 2 file and all linked Tier 3 files.

If the trail is for a Tier 4 page, copy the comment and tag, open the Tier 4 file in your editor, and paste in.

Repeat for all pages of your site. When you're done with all the trails in the menu, every file should have a tag pasted in.

Tier 2 pages use the navigation label you assigned as the crumb text. Tier 3 and Tier 4 pages use the page's Specific Keyword. If you want to change the crumb text on any page, you'll do that on the Upload Your Page page or the Edit Your Uploaded [file name] HTML Page page.

If you don't need to edit the crumb text, you can upload all existing pages using Quick Upload It!. If you do bulk upload, review all the live pages to see what the crumb text is.

If you need to change any crumb text, edit each page from Page Manager and add the custom crumb text (label) and rebuild the page.