Advanced Content Management: Using AjaxIncludes, JSON feeds, and Texty together

Digging a little deeper, we find that Texty can even be used with more advanced features. Let me show you how to combine AjaxIncludes , JSON feeds from Zoho Creator , and Texty content management into a single powerful site-building tool.

First, you will want to use the AjaxIncludes scripts to build your site framework. Remember that these elements will not be indexed as part of your site, but that’s OK because they are just the design elements of your page. This can include items like your page banner, navigation structure, and a blank “block” for your page’s content. I’ll use the following assumptions in this example:

  • You are using Microsoft Office Live Basics (MOLB), so all of your files are stored in the same directory: http://yoursite.com/Documents/.
  • You have already saved a copy of the AjaxIncludes script from Dynamic Drive as a separate file in your site at http://yoursite.com/Documents/AjaxIncludes.txt (You don’t want to save files with the “.js” extension if you are using MOLB).
  • You have created the following files to provide the framework for your site:
    • banner.htm (The main banner for your page)
    • navigation.htm (The top navigation structure for your page)
    • footer.htm (The footer for your page)

With this structure in place, you are ready to build a blank page like this:

<html>

<head>

<title> Your Site Title </title>

<script type=”text/javascript” src=”AjaxIncludes.txt”></script>

</head>

<body>

<script>

ajaxincludes(“banner.htm”);

ajaxincludes(“navigation.htm”);

</script>

<script>

ajaxincludes(“footer.htm”);

</script>

</body>

</html>

Now, you have created a blank page template for your Web site with all of the background and navigation elements already in place. You are now ready to start building an advanced content management system to deliver the content to this page. This system includes two elements:

  1. Reading the parameters of your URL and matching your JSON feed to decide on the content to include
  2. Implementing the appropriate Texty script for the content chosen above, and displaying that content on your page

First, you will need a Zoho Creator application to build your JSON feed, and a Texty account with some content available. Your Zoho Creator application should have at least one field for the value you want to use in the URL, one field for the script code generated by Texty. Optionally, you can include a field for the page title (which will display in your browser window and/or the page tab). Here’s an example of some values you may want to use:

Value TextyCode Page title
Home <script type=”text/javascript” language=”javascript” src=”http://texty.com/cms/syndicate/ {Your unique URL} .js” ></script>
About <script type=”text/javascript” language=”javascript” src=”http://texty.com/cms/syndicate/ {Your unique URL} .js” ></script> About Texty: Simple Content Management and Syndication
Contact <script type=”text/javascript” language=”javascript” src=”http://texty.com/cms/syndicate/ {Your unique URL} .js”></script>
Contact Us to learn more about Texty!

The Texty scripts I have included here are for sample purposes only and will not work. Use your own values, which are provided to you whenever you create or edit a Texty, or when you click on the “Copy Texty” button next to one of the Texty’s available in your account. The values field should be either number or a short description (ideally without spaces or special characters, which will be corrupted by the Web browser). Keep your values short, easy to remember, and only one word long.

Now that you have your Zoho Creator database built, you can expand on it every time you write a new Texty. Just copy the Texty code generated and drop it into the texty script field. Assign a name or number for the “value” field and, optionally, a page title.

Next, you want to update your Web page to be able to read the values from your database by using a JSON feed. You will need to add a link to the JSON feed within the <head> section of your page, and a script inside the <body> of the page to process that information. You can find the link to your JSON feed by clicking on the “Export Data” link on the view you want to export. If your application is private, you may need to “Enable Private Hyperlinks” to give you a publicly-accessible link to your JSON feed.

You are now ready to update your “blank” Web page to include the codes necessary to process your JSON feed and deliver the appropriate content to your page (the items in RED will need to be customized to your needs):

<html>

<head>

//Optional: Your default page title, which can be changed based on the Texty you include

<title> Your Site Title </title>

//Load your JSON feed from your Zoho Creator application:

<script type=”text/javascript” src=”http://creator.zoho.com/ {Username} /json/ {View number} / {Private Link – Optional} /”></script>

<script type=”text/javascript” src=”/Documents/AjaxIncludes.txt”></script>

</head>

<body>

<script>

ajaxincludes(“banner.htm”);

ajaxincludes(“navigation.htm”);

</script>

<!–Identify and Insert the appropriate Texty from your list here–>

<script>

//Identify the parameters passed through the URL:

// Example – http://lockworldherald.com/Documents/articles.aspx?Home

var winloc=””+top.window.location;

var winsplit=winloc.split(“?”);

//If a value is found, match it to the appropriate Texty script from your Zoho Creator database

if (winsplit.length>1) {

for (var i=0; i<zoho{Username}view{View Number}.{Form Name}.length; i++){

var NewArray=zoho{Username}view{View Number}.{Form Name}[i];

var val=NewArray.Value;

var Texty=NewArray.TextyCode;

//It is a good idea to convert everything to lowercase, since javascript is case-sensitive. This way, if your page value is “superman,” your user could enter “Superman,” “SUPERMAN,” or “superman” and still get the the correct page:

val = val.toLowerCase();

var winval = winsplit[1].toLowerCase();

if (val==winval){

document.writeln(Texty);

}

//If you choose to change the Page Title for your records, include this code:

if (NewArray.Page_title>””) {

document.title=NewArray.Page_title;

}

}

}

//It is a good idea to add something here in case someone fails to enter a parameter into the page. Either redirect them to a page which will always exist, or else put the script for a fixed Texty here.

else {

location.replace(“http://yoursite.com/Documents/Testy.aspx?Value“);

// OR

document.writeln(‘<scr ‘+’ ipt type=”text/javascript” language=”javascript” src=”http://texty.com/cms/syndicate/ {Your Unique URL} .js”></scr ‘+’ ipt>’);

//NOTE: If you want to include the Texty within this code, you have to make sure you split up the <script> and </script> tags as I have done in the example above. Otherwise, your browser may get confused between a document.writeln(“</script>”); and a regular </script>, which can cause your javascript code to cease functioning.

}

</script>

<!–End Texty Script–>

<script>

ajaxincludes(“footer.htm”);

</script>

</body>

</html>

Suppose you saved this page as http://yoursite.com/Documents/texty.htm. Depending on how you’ve written the code above, your user will either be redirected to a new URL, or will see your “default” Texty that you’ve configured. However, if your user enters an appropriate parameter here (http://yoursite.com/Documents/texty.htm?About), they will see the Texty that corresponds to the parameter they have entered.

You can certainly do something like this without Zoho Creator, but you will have to hard-code all of the variables into your page header. It is much easier to add or change elements from within Zoho Creator, which is why I recommend using this service.

If you will be using more advanced content, you can even use a double-parameter, such as a content type and a parameter value. The content type can be used to determine which Zoho Creator JSON feed should be loaded. This is useful if you have a lot of different pages…Zoho only includes a maximum of 100 records in a JSON feed (I think). Also, this can help your load time…instead of loading variables for all of your content types in the header. If your pages are split into categories (for example: pages, products, articles, and resources), you can add a field to your Zoho Creator application to collect this value. Then, you can create separate views for each of the content types (set criteria on your Zoho Creator view to only display a particular content type). You can parse out the window location much the same way as above within the <head> section of your Web site to determine exactly which Zoho Creator JSON feed to load based on that parameter. To your user, the only change is how they get to the page…instead of http://yoursite.com/Documents/texty.htm?Contact, the URL would look more like this: http://yoursite.com/Documents/Texty.htm?page=Contact.

Don’t forget to manually type in the appropriate URL in your Texty account to ensure that anyone who comes across your content from a Web search will be redirected to your site. You can configure this “indexing” link for each of your Texty elements by clicking in the “Advanced Secret Options” section at the bottom of your Texty editor and entering the URL you want this content indexed to in the “URL to Texty for Search index” field. You will have to manually ensure that the URL you enter here matches your Zoho Creator database, of course.

Applications:

  • If you write a lot of articles on your Web site, this can be an easy way to add or edit articles without having to mess with the codes on your Web page very often.
  • If you don’t like HTML coding, you can build a single page and serve your entire site without ever editing the HTML again.
  • You can also use your Zoho Creator application to build a site map or navigation structure for your site, which I’ll discuss in my next post.

That’s all for today. I think Texty has a lot of potential, and I look forward to using it on my site to manage my content without sacrificing my Search Engine Optimization! In my next post, I’ll show you how to use the same Zoho Creator application you created to manage your Texty scripts into an automated sitemap-builder so you can create a navigation menu to allow people to find the content on your site.

Leave a Reply

Your email address will not be published. Required fields are marked *