Using a Brain for Web Site Navigation

August 13, 2009
Other posts by:

www150_1.gifWant to build a Web site without having to worry about how people are going to navigate around it? Would you like to just put your Brain up on your site and have the linked pages show up in an area on your site? This slightly more involved than basic Brain publishing and embedding, but not difficult really. This short tutorial will walk you through everything needed to get TheBrain’s slick navigation, visualization and search up on your site quickly and easily.

To build a Brain and set it up for use as your web site navigator, you will need the following:

  • A web site 🙂
  • PersonalBrain 5
  • The ability to edit the source code for the home page of the site
  • A basic understanding of HTML, including how to layout a page using div tags

Ready? Let’s get started…

Create Your Brain

A Brain for web site navigation is usually a little different from other Brains because you want to make sure every Thought has a page attached. If you don’t add a page to a Thought, the web site content won’t update when the thought is clicked and this might confuse your users. Make sure to add one URL attachment for each Thought. If you add more than one, the user won’t see the attached page immediately, but instead will see a list of the attachments to choose from.

Make sure to set the home Thought to the place where you’d like visitors to start from. If you like, create some pins for the major areas of your site also.

Remember that the setting you use in your Brain will appear on your site, so pick some nice wallpaper and setup the color scheme to match your site’s branding.

Publish Your Brain on WebBrain.com

Even if you are not planning to have people go to WebBrain.com to view your Brain this is the site where it will be hosted. Visitors to your site don’t necessarily have to know that, but that’s how it works behind the scenes.

When you publish, make your Brain either "public" or "unlisted" set it to "private" as this would prevent it from showing on your web site. Setting it as "unlisted" will prevent people from finding on the WebBrain.com public listing of Brains – meaning the only way they’ll see it is through your site unless you send them a link to it on WebBrain directly.

Setup Your Home Page

OK, this is the hardest part, but it’s really not that complex, so stick with me. A Brain-based web site is different from most in that the home page is really a framework page that holds the area where your Brain appears and the area where your content appears. Note: none of the Thoughts in your Brain should have a link to your home page as attachments – doing this could create a "feedback" loop, similar to pointing a video camera at the TV that is displaying the camera’s view.

You framework page could be as simple as an empty page with nothing on it except your Brain, in which case you really just need a blank HTML page with the appropriate title tag. If you decide to do this, it makes the rest a little simpler, but it also limits the amount of creativity you can put into the layout of your site.

If you want to make your site a little fancier, create a header with your logo and other elements that you want to be visible at all times. Put a div tag on the page where you want your Brain to appear and size it appropriately. You can make it a fixed size or make it resize with the page. The second element you need on your page is an iframe wherein the pages attached to the Thoughts in your Brain will appear. Add a unique name attribute to the iframe. You’ll need this name later so you can tell your Brain about it.

If you’re an advanced web developer, you might be wondering, "Won’t the use of an iframe decrease the ability of search engines to effectively index my site?" The short answer is "Yes, normally that would be a problem, but not in this case. WebBrain overcomes this by presenting search engines with a special version of your site that is frameless and optimized for searchability." The long answer, including why and how this works is covered in my next blog post.

Embed Your Brain

Now that you’ve got the framework home page ready, you all have to do is get the embedding code for your Brain and paste it in. Open your Brain from WebBrain.com. All your published Brains are listed on the My Account page.

Got it open? Click the Share button and setup the options you want.

Brain-Site-Nav.png

  1. Link to "This Brain" to have it start on your home Thought.
  2. Check "Customize embedded Brain" to show the advanced options.
  3. You don’t need to set the size – instead edit the code when you are done. Set the width and height each to "100%" and your Brain will simply fill up the div you paste it in.
  4. Uncheck "Toolbar" to make it really seamless – this hides the toolbar at the top of your Brain so the only thing your site’s visitors will see is the content you created.
  5. Check "Auto-open attachments". This will make your linked pages appear as soon as your site’s visitors click on the Thoughts. If you don’t want visitors to be able to open attachments by clicking on icons (as opposed to activating the Thought), uncheck "Icon clicks".
  6. If you want to, you can turn off extras like the past thought list and pins but they’re pretty handy in most cases.
  7. Leave the "Search" option selected to give your visitors a fast, built in way of searching all the content that’s linked in your Brain. As of today, this will let them search all the names of your Thoughts using the instant activate feature. Plus, in the near future the search capabilities of WebBrains will be enhanced to allow searching of all attached web pages also. By leaving this option selected, you’ll be adding a full search engine to your site at the same time as you add your Brain.
  8. Put the name of the iframe you created in the preview step in under "External content frame". If you didn’t create an iframe and instead are going to set your Brain up to take over the whole page, leave this field empty.
  9. Enter the URL of the framework page which will contain this Brain. Make sure you type it correctly. This link will be used to send people to your site from external search engines. If your framework page is the default page of your site, you don’t need to enter the full name. (For example, if your framework page is at http://www.mysite.com/index.html, and this is the page that is loaded when you go to http://www.mysite.com, then you don’t need to add the "index.html" part.)
  10. Select and copy the embedding code into the clipboard with [Ctrl+C]
  11. Open your framework page back up in your HTML editor and paste the copied code inside the div for your Brain. Don’t forget to alter the width and height parameters to 100%.

Your Brain-Based Web Site Is Ready

That’s all there is to it. Open up your site in your favorite browser and give it a try. If you have trouble with any of the settings, you can manually edit the embedding code without too much difficulty, but be careful as any typos will cause the relevant setting to be ignored. If you get into trouble, just go back to WebBrain.com and regenerate the embedding code with the Share button.

When you want to update your site, just republish your Brain. You don’t need to change the embedding code unless you actually create a new Brain. WebBrain uses a Brain’s GUID to identify it so no matter how many changes you make, whether you change the wallpaper, the home Thought, the name of the Brain, or even every single Thought, as long as the GUID is the same it will still continue to show on your web site. FYI. you can see the GUID for your Brain from PersonalBrain via the File > Utilities > Statistics command.

For more information on how your published Brain works with search engines, see my blog post about search engines and WebBrain.

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • email
  • RSS
  • Twitter

Filed under: Feature Focus and How Tos, WebBrain | Posted on August 13th, 2009 by Harlan Hugh

Trackback URI:
https://blog.thebrain.com/webbbrain-site-navigation/trackback/

We appreciate your feedback

Subscribe without commenting

Categories

Copyright © TheBrain Technologies LP.