Want to know how to create a blog post in Umbraco? Just follow these steps:

1. Go to the “Content” section of Umbraco, find “Blog” under “Home”

2. Right click “Blog” and choose “Create”

3. Enter the title of your post and click “Create”

3a. The post will be automatically placed into the correct date folder in the content tree

4. Enter the content of your blog post

5. Enter tags for your post

6. When you’re done, click “Save and Publish” to get your post on your website

And that’s it! Happy blogging! If you have any questions feel free to ask.

This is a series of notes and what I could cobble together from various Umbraco upgrade articles and sources.  I also found a few issues that weren’t documented by anyone that gave me some grief.  I’ll likely add any 4.7 specific items as well when I get a chance to test this process with that version.

I’ve found that you may want to upgrade from 4.0.x to 4.5.2 then to 4.7 because the upgrade install script didn’t seem to run in the 4.6.1 upgrade I performed.  Basically, the database wasn’t updated properly when I went straight to 4.6.1.

My Notes:

From http://our.umbraco.org/wiki/install-and-setup/upgrading-an-umbraco-installation

• Backup DB and Files of existing site
• Create new web site and db for “upgrade” site
• Manually merge web.config for new 4.0 changes to upgrade site (use Beyond Compare)
• Manually merge /config files
  • Remove /bin from xlstExtensions.config
  • Remove /bin/ from restExtensions.config
• Copy Merge these from the 4.6.1 base install on codeplex or 4.7 base code to the new site
  • I have found it better to copy using beyond compare so my packages don’t disappear and any UI.xml or locale changes don’t get lost.  But if you prefer, copy away!
  • /app_data
  • /app_browsers
  • /app_code
  • /bin
  • /data
  • /install
  • /umbraco
  • /umbraco_client
  • default.aspx

• Republish the content
  • From the Content section/folder in Umbraco
  • Or: http://our.umbraco.org/wiki/reference/api-cheatsheet/publishing-and-republishing

Other upgrade notes:

• Verify your /umbraco/config/create/UI.xml still has your custom items in it.  It may have been over-written by the copy above.

http://our.umbraco.org/wiki/about/roadmap/umbraco-45/upgrading-to-umbraco-45

• Delete App_global.asax.dll
• Verify “UseLegacyXmlSchema” element in umbracoSettings.config is set properly (false if no XSLT conversion has been done)
• Go to http://www.yourupgradesite.com/install/
  • Go through the upgrade install script

http://www.littlewebempire.com/blog/2010/10/29/update-umbraco-from-4021-to-452

• You may need to add the Media Recycle bin to the UmbracoAppTree and UmbracoNode tables in the DB

• Verify the \App_Data\TEMP\ClientDependency folder has stuff in it.  Delete anything in the folder and reload the website

Package Upgrades / Changes

• Copy old /data/packages/ folder contents to /App_Data/Packages/

Then you need to test that your packages work and are compatible with this latest version.  Here is a place to start: http://our.umbraco.org/wiki/reference/packaging/umbraco-45-compatibility/umbraco-45-package-testing

Articles that may be helpful for package issue:

• Fix ‘Yet Another Media Picker 4′ For Upgrade From Umbraco 4.0.x to 4.5.2

Umbraco 4.7 Additions:

• There are quite a few dlls to remove to keep your XSLT working.  This forum article was VERY helpful in identifying the specific URLs to remove: XSLT macros not getting rendered after upgrading to 4.7 RC
  • Remove:
    • Iron*.dll (all dlls in your /bin directory starting with “Iron”, like IronPython.dll and IronRuby.dll)
    • Microsoft.Scripting*.dll
    • Microsoft.Dynamic.dll
    • umbraco.macroEngines.legacy.dll
    • RazorEngine.Core.dll
    • RazorEngine.Templates.dll
    • VistaDB*.dll
    • I’ll add more if they are mentioned…
    • From comments:
    • umbraco.standardFormhandlers.dll

That’s it so far.  Please feel free to add anything you needed to do.  I’ll edit as I find further issues.

1. Earn TRUST – how important are relationships to your business?
2. Merit CREDIBILITY – how do you prove expertise?
3. Demonstrate you CARE – do you care enough to share?
4. Invite FEEDBACK – are phone & email enough for your customers?
5. Grow your online PRESENCE – how do your customers find you online?
6. Make someone say “WOW” – is it valuable to be remarkable?
7. Support your COMMUNITY – we all want a business fan club right?

Sources for Blog Post Topics

13 Blog Post Topic Ideas for Your Business

1. Explain how a recent news event will affect your industry.
2. List essential resources related to your industry and summarize why.
3. List and debunk the most common myths in your industry.
4. Promptly deliver a report from an industry related event.
5. Compare something complex or misunderstood to something simple or commonly understood.
6. Deliver timely advice or news relevant to an upcoming holiday or event.
7. Share a list of changes you are considering for your business.
8. Make a list of valuable products or services that are complimentary to your business/industry.
9. Share a list of your favorite replies on Blog, Twitter and/or Facebook.
10. Share a list of your favorite photos or videos related to your business/industry.
11. Answer a list of the most commonly asked questions you receive.
12. Create simple step-by-step directions how to do something.
13. Invite someone interesting to write a post.

A Few Good Examples

• Drawing from a personal experience: The Why by eROI
• Challenge an industry myth: Online Privacy is an Illusion by Fast Wonder Blog
• Report on (or from) an industry event: CES 2010: Surprised in Vegas by Johnflurry Blog
• Step-by-step and how-to: Design a Print Ready Label in Adobe Illustrator at Tuts Plus

Here is an example of a custom player that is set to play a specific playlist. As videos are added to this playlist they will automically be added to this custom player. Cool, huh?

Make Your Own YouTube Custom Player at http://www.youtube.com/custom_player

Tip: Login to your YouTube account and create a playlist. You can add videos, your and others, to your playlist. Custom players can be set to display from a set playlist. The nice thing is that as you add new videos to your playlist, the plugin will be automatically updated no matter where its published at.

You can now decide whether you want to post on your Facebook Fan Page as yourself (your personal profile).

The old fan page forced you to post as your fan page persona if you were an admin of a fan page.  However, with this change you can switch between posting as yourself and posting as your fan page.

How to set it up:

1. Edit Your Page

2. Select the “Your Settings” menu item on the left menu and un-check the “Posting Preferences” checkbox.

That’s it.  Now you will post as your personal profile on your fan page!

If you want to post as your fan page in the future, then simply use the new “Use Facebook as Fan Page” feature to toggle between your fan page and your personal profile.

3. When logged in as yourself, click the “Use Facebook as…” link on the right side:

Now you will be able to comment, like, and post under the “Fan Page” profile.  If you go to your home page (news feed) you will see information for pages that your page likes as well as fans instead of your personal feed. Pretty cool.

4. You can switch back easily by simply clicking the same link (it will list your name):

Enjoy the new power and flexibility!

Try out our ProWorks Twilio demo now:  http://twiliodemo.proworks.com

The basic idea of Twilio is that voice narration and business logic can be controlled by the developer the same way they might code any application and there are a number of ways the text can either be read back by the talking Twilio text to speech voices or via playback of your own pre-recorded audio.

Where things get even more interesting is the ability to gather user input  (e.g., “Press 1 for option A,” etc.) and how those inputs can trigger different branches of code logic, which is of course application specific and usually determined by the client’s needs and or their processes.  This and other great features are supported via TwilML (Twilio Markup Lanaguage) which is pure XML that expresses a variety of “verbs” or actions that can be carried out by the Twilio service.

For example, let’s say I wanted to make sure that I’ve got a warm body on the other line – maybe my app needs to post a wake-up call or a reminder to someone.   Here’s how that might be expressed in TwilML:

<Response>

<Say voice="woman">Hi there.  Just checking to see if you are awake.</Say>

For this ProWorks/Twilio demo, I wrote a simple web app that utilized the Twilio REST API – Twilio provides a single TwilioRest.cs file for this on their site.  To enable reuse in different projects, I ended up wrapping it into a single .NET assembly but you can obviously just include the TwilioRest.cs file in your own project if that works for you.

I created a simple landing page in ASP.NET that looks like this:

You can access our demo from this URL: http://twiliodemo.proworks.com

When the user clicks the “Call My Phone Now” link, our demo page will validate that you’ve entered the expected info, etc.

Now lets look at a bit of code – you’ll want to put your Twilio account ID and authorization ticket in a safe place – the Web.config is perfect for this.

string twilioAcountSID = ConfigurationManager.AppSettings["twilioAcountSID"];

string twilioAuthToken = ConfigurationManager.AppSettings["twilioAuthToken"];

string twilioCallerID = ConfigurationManager.AppSettings["twilioCallerID"];

string twilioAPIVersion = ConfigurationManager.AppSettings["twilioAPIVersion"];

string demo1Url = ConfigurationManager.AppSettings["demo1Url"];

Once we have our application specific configuration values, including the url that the Twilio service will redirect to, we can instantiate the Twilio helper API.  Again, I’ve wrapped it in our own assembly:

PWTwilioWrapper.Account account = new PWTwilioWrapper.Account(twilioAcountSID, twilioAuthToken);

I made a slight modification to their helper class (TwilioRest.cs) to utilize a Dictionary rather than the typical Hashtable – this was my own preference:

Dictionary<string, string> h = new Dictionary<string, string>();

And one of the “gotchas” was that since we’re allowing users to enter free form text is that they can enter any stream of characters.  So to be safe, the text is run through a custom “safe” filter that weeds out potentially harmful characters.  This might not be necessary for a demo, but it’s often the case when we work with client input:

string safeMessage = PWTwilioHelper.SafeTwilioMessageText(this.ctrlMessage.Text);

Next, we need to gather the input values that will be passed to and injected into our TwilML page.  Note that Twilio seemed a bit fussy about encoding and white space, so the user entered text is  Url encoded – yet another one of the “gotchas” that I had to work through when putting this demo together:

string urlargs = string.Format(“?_message={0}&_voice={1}&_music={2}”, HttpUtility.UrlEncode(safeMessage), this.ctrlVoicePreference.SelectedValue == “man” ? “man” : “woman”, this.ctrlPlayMusic.Checked ? “1″ : “0″);

h.Add(“Url”, demo1Url + urlargs);

h.Add(“From”, twilioCallerID);

h.Add(“To”, this.ctrlPhoneNumber.Text);

With the Url, From, and To values packed up for Twilio, we can now invoke their service.  Here’s the next line:

string resultXML = account.request(String.Format(“/{0}/Accounts/{1}/Calls”, twilioAPIVersion, twilioAcountSID), “POST”, h);

Note that you might want to put the above in its own try/catch block.  If there’s an error invoking the Twilio API, chances are good that you’ll get the ASP.NET yellow screen of death.  Oh, well.  This is only a demo – next section:

Twilio will return XML back as the result.  Parsing it is optional of course, but we want to see what Twilio returns back to us so here’s one way to do this:

try

{

XDocument xDoc = XDocument.Parse(resultXML, LoadOptions.PreserveWhitespace);

string status = “Unknown”;

string message = “None”;

string code = “None”;

string moreInfo = “None”;

foreach (XElement element in xDoc.Descendants(“Status”))

{

status = element.Value;

}

foreach (XElement element in xDoc.Descendants(“Message”))

{

message = element.Value;

}

foreach (XElement element in xDoc.Descendants(“Code”))

{

code = element.Value;

}

foreach (XElement element in xDoc.Descendants(“MoreInfo”))

{

moreInfo = element.Value;

}

string msgDetails = string.Format(“<br />STATUS: {0}<br />MESSAGE: {1}<br />CODE: {2}<br />MORE INFO: {3}”, status, message, code, moreInfo);

this.ctrlFeedbackLabel.Text = string.Format(“<h4>Results of the attempt to call {0}:</h4><p><i>Twilio response: {1}</i></p>”, this.ctrlPhoneNumber.Text, msgDetails);

}

catch ( Exception x )

{

this.ctrlFeedbackLabel.Text = string.Format(“<h4>Results of the attempt to call {0}:</h4><p><i>Sorry, there was an exception parsing the Twilio response.  Details: {1}</i></p>”, this.ctrlPhoneNumber.Text, x.Message);

}

So that’s what I would call the “invocation” page – it bootstraps things up so that the Twilio service can redirect to the target Twilio XML (or TwilML) page.  But we’re writing a C# web app and we need to inject our custom logic into the XML, right?  We need the ASP.NET page to act like an XML stream.   So the approach we take is to simply create an ASPX page (demo1Script01.aspx) with no code behind and add in the appropriate “ContentType” value, which is “text/xml” .  Keep in mind that this is the page that the Twilio service will be calling to invoke the script to make the phone call and “speak” the text that was passed to the caller and potentially capture any of their input to (optionally) re-direct to other pages and scripts, etc., etc.  For this demo, we’re keeping it somewhat simple (just a single TwilML script page), but still want to explore and illustrate some possible techniques for dealing with this handy text to speech technology.

The first line of our target ASP.NET page (sans any code-behind) that will get called by Twilio looks like this:

<%@ Page Language=”C#” ContentType=”text/xml” Title=”Demo1″ %><?xml version=”1.0″ encoding=”utf-8″ ?><%

Here’s where we can write any C# we want.  For this demo the first thing I wanted to tackle was how to “speak” a date and time.  It’s simple enough in C# to get the current date and time, but we have to do just a bit  more work to make that date and time “speak” nicely (in English or any other language) – so here’s a hunk of code that might make a nice helper function:

DateTime dt = DateTime.Now;

string dayOfWeek = String.Format(“{0:dddd}”, dt);

string month = String.Format(“{0:MMMMM}”, dt);

string day = String.Format(“{0}”, dt.Day);

string hour = String.Format(“{0}”, dt.Hour <= 12 ? dt.Hour : dt.Hour-12);

string minute = String.Format(“{0:00}”, dt.Minute);

string amPM = String.Format(“{0}”, dt.Hour >= 12 ? “p m” : “a m”);

string[] args =

{

dayOfWeek,

month,

day,

hour,

minute,

amPM

};

// spaces represent pauses, e.g., “Thursday November 18 at 3 19 P M ”  (note no year)

string spokenDate = string.Format(“{0}  {1}  {2}   at {3}  {4}  {5}”, args);

And note that I’m not dealing with the year portion of the date/time to voice – doing so would muddy up the waters for the listener – besides this is intended to be a real-time message and hopefully they know what year it is!

Next, we’ll gather up the custom parameters that were passed to this URL and parse them to ensure we’ve got the correct values or at least some proper defaults:

string voicePref = Request["_voice"];

if (string.IsNullOrEmpty(voicePref))

{

voicePref = “woman”;

}

string message = Request["_message"];

bool hasMessage = true;

if (string.IsNullOrEmpty(message))

{

hasMessage = false;

}

string rawUrl = Request.RawUrl;

string sMusicValue = Request["_music"];

bool playMusic = string.IsNullOrEmpty(sMusicValue) == false && (sMusicValue.Trim() == “1″ || sMusicValue.ToLower().Trim() == “true” || sMusicValue.ToLower().Trim() == “yes”);

%>

And this marks the end of the param gathering portion of the page.  The params we’ve gathered can now be used, in part, to generate the TwilML the way we want it to play back over the phone to the person being called (and in the case of this demo, that’s you!).  So now we start the output of the TwilML, which is nothing more than pure XML with the appropriate TwilML tags.  As you can see, we’re injecting in the parameters in the appropriate places in the markup.  I realize that this looks a lot like classic ASP and I confess I’m not satisfied with this.  There are probably better approaches for sure (like having a TwilML C# library helper!) but I was neither able to fully test any that are out there nor write my own.

But what should be clear is that it’s fairly easy to block out the TwilML and then find the appropriate ASP.NET injection points and/or logic flow areas (if/else) blocks.  Here’s the TwilML with the ASP.NET params and logic included:

<Response>

<Say voice=”<%=voicePref %>”>Thank you for trying out the Pro  Works  Twilio demo.  The current date and time, Pacific Standard, is <%=spokenDate %></Say>

<% if (hasMessage)

{ %>

<Say voice=”<%=voicePref %>”>Here is the message text you wanted us to convey: </Say>

<Say voice=”<%=voicePref %>”><%=message%></Say>

<% } %>

<% else {%>

<Say voice=”<%=voicePref %>”>You did not have any special message to convey. Hey, whatever!</Say>

<% } %>

<% if ( playMusic ) { %>

<Say voice=”<%=voicePref %>”>You are clearly a person of style and taste,  so to conclude the demo, we invite you to sit back and enjoy the soothing tones of this jazzy music, written and performed by Rob Birdwell, a senior developer with Pro Works! Enjoy!</Say>

<Play>http://birdwellmusic.com/Data/Audio/Troubadour.mp3</Play>

<% } %>

<% else {%>

<Say voice=”<%=voicePref %>”>Ah-HA    you do not seem to be a fan of music – or maybe you were just uncertain.  That’s okay.  We will now assume that you have changed your mind and do want music; so sit back and enjoy the soothing tones of this jazzy music, written and performed by Rob Birdwell, a senior developer with Pro Works! Enjoy!</Say>

<Play>http://birdwellmusic.com/Data/Audio/Troubadour.mp3</Play>

<% } %>

</Response>

As you can see, we’ve incorporated some simple but non-trivial business logic into our little demo:  the preference for voice type (man or woman); the ability to read aloud a custom message; and of course the ability to listen to some music (written by me, Rob Birdwell) – which, as you discover, is no option at all!

In summary, the Twilio service is powerful and definitely something ProWorks will be looking to integrate into our existing and new clients as they express their need for such capabilities.

Commerce for Umbraco (C4U) has two custom creation dialogs for the Coupons and the Products. In Umbraco 4.0.x the dialog was closed after creation of the coupon/product and the tree refreshed by injecting the following javascript:

if (returnUrl == "") {
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "refresh", "<script>\ntop.reloadCurrentNode();\ntop.closeModal();</script>");
}
else {
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "refresh", "<script type=\"text/javascript\">\ntop.reloadCurrentNode();\ntop.right.location.href = '" + returnUrl + "';\ntop.closeModal();</script>");
}

However, this didn’t work in 4.5.2. I always thought this was a bit hacky, and although the code is probably actually doing the same thing the new way looks cleaner:

BasePage.Current.ClientTools
.ChangeContentFrameUrl(returnUrl)
.ChildNodeCreated()
.CloseModalWindow();

You will need to use the following namespaces as well:

using umbraco.cms.helpers;
using umbraco.BasePages;

So that is how you close and refresh a custom create dialog in your custom admin tree in Umbraco 4.5.2.

Feel free to ask questions in the comments.

Recently, we had a request to have comments be moderated.  That means any comment posted would be initially marked as spam and wouldn’t post live to the site.  The blog owner then has to go into the comments area and manually approve each comment.  I’m not big on this, but for some people its important.

Unfortunately, this doesn’t come out of the box in Blog 4 Umbraco.  Luckily, its easy to do.

To add this functionality all you have to do is add a new class that derives from the SpamChecker class.

I created a new class called “AlwaysMarkSpamChecker.cs” under the “Spam” folder.

The class contained the following code:

using System;
using System.Collections.Generic;
using System.Web;
using Umlaut.Umb.Blog.Interfaces;
using Joel.Net;

namespace Umlaut.Umb.Blog.Spam
{
    public class AlwaysMarkSpamChecker : SpamChecker
    {

        public AlwaysMarkSpamChecker()
        {
            this.ProviderName = "AlwaysSpam";
        }

        public override Boolean Check(int nodeid,
            string UserAgent, string UserIp, string Author,
            string AuthorEmail, string AuthorUrl, string Content)
        {
            return true;
        }

        public override void MarkAsHam(int nodeid, string Author, string AuthorEmail, string AuthorUrl, string Content)
        {

        }

        public override void MarkAsSpam(int nodeid, string Author, string AuthorEmail, string AuthorUrl, string Content)
        {

        }

    }
}

Then I edited the /umbraco/plugins/blog4umbraco/SpamChecker.config file in my Umbraco installation to look like this:

<?xml version="1.0"?>
<SpamChecker assembly="/bin/Umlaut.Umb.Blog" type="Umlaut.Umb.Blog.Spam.AlwaysMarkSpamChecker">
</SpamChecker>

Now when I add a new blog comment it will always be marked as Spam in the Comments tab.

If you have any questions or any problems, let me know!

using System;
using System.Collections.Generic;
using System.Web;
using Umlaut.Umb.Blog.Interfaces;
using Joel.Net;

namespace Umlaut.Umb.Blog.Spam
{
    public class AlwaysMarkSpamChecker : SpamChecker
    {

        public AlwaysMarkSpamChecker()
        {
            this.ProviderName = "AlwaysSpam";
        }

        public override Boolean Check(int nodeid,
            string UserAgent, string UserIp, string Author,
            string AuthorEmail, string AuthorUrl, string Content)
        {
            return true;
        }

        public override void MarkAsHam(int nodeid, string Author, string AuthorEmail, string AuthorUrl, string Content)
        {

        }

        public override void MarkAsSpam(int nodeid, string Author, string AuthorEmail, string AuthorUrl, string Content)
        {

        }

    }
}

The idea is this. If someone was to ask a question or mention something relevant to your brand, market, product or service on Facebook would you like to know about it? Hint: So you can do something about it.

Note that at this time content on personal profiles is private and protected from even Google. Content from Facebook Pages and groups are accessible to Google search.

Step 1. Customize Your Google Search

Take advantage of Google to customize a search matching your business. Use the Advanced Search (link is right next to the Search button) and/or the Google search operators to refine your search. Here is a Google Cheat Sheet with a list of operators.

To get results only from Facebook include “site:www.facebook.com” to your search.

In the example below we are asking Google to return all results that include the term financial or its synonyms AND Corvallis, limited to results from Facebook. Also note we have selected the Latest results option on the left of the Google search page.

In the example below we asking for results including the term Umbraco on Facebook sorted by date.

Yet another option is to get results based on geography. In this case we are requesting results from Corvallis, Oregon (see the option in the left most column below).

Once you have a search you like save the URL address or just keep the browser open in the results page. We’ll need the URL in Step 2.

Tips and Advice:

• Don’t discount of your search doesn’t yield many or even any results (right now).
• More searches with fewer focused results is better than fewer searches with many results. In this way you will have more fine control over your searches.
• Consider filtering your results by multiple cities rather than a larger region.
• You can exclude results from your own Facebook page by adding “-site:www.facebook.com/YourPageNameHere” to the search.

Step 2. Use Open Dapper to Create a New “Dapp”

Go to http://www.dapper.net/open/. I like to use a second browser tab here. I recommend you create an account to use for this so you can save your “Dapp” and adjust it later. Select “create a new Dapp”. You can choose a format at this stage but its not needed.

Dapper will ask you a URL. Copy and paste the URL from your Google search here. You can also select the RSS feed option at this stage. Click the Next Step button to continue.

Dapper will process the URL and you will see the Google results page inside of Dapper. Find the Add to Basket button to add this page to your Dapp. Click Next Step to continue. Dapper will ask you if you want to use just one page here. The answer is yes, you can keep going.

Using your mouse select the content for your RSS feed, the 1)title 2)summary and 3)date if its available from the Google search results page inside of Dapper.

You will select these three items separately, save them using the Save Field button and name them appropriately. Once you have selected your content click Next Step to continue.

Preview your feed and make sure everything looks OK. You should see your title, summary and date if it was available. Click Next Step if it looks good. Go Back if you need to reselect your content.

Save your Dapp. Give it a good name. Describe what you are searching for and from where so you can easily identify it later. A description and tags aren’t needed. Click Next Step to continue.

Under Create RSS Feed make sure your Item Title, Item Text and Date Published are assigned to the appropriate content you selected earlier. The URL next to the RSS button is your new customized RSS feed.

Save the RSS Feed URL. We’ll use it in the next step.

Step 3. Use an RSS Reader to View Your RSS Feed(s)

Google Reader is just one of many free RSS readers available to you. iGoogle is also free. Its really a matter of preference.

In Google Reader below you can subscribe to your RSS feed by clicking the Add a subscription button. Below is what it looks like after the RSS has been subscribed to. You can see the Google search results inside Google Reader. The title is a link to the original source. Clicking it will take you there.

And there you have it. With many RSS feeds automatically updating your RSS reader you will be able to monitor Facebook and just about any other web page that is publicly accessible. Even if it doesn’t publish an RSS feed. Yes, there are some very cool business applications here.

Do you have any question about this? Suggestions? Please share them here with us as a comment.

The Goal:

• Build some HTML/CSS that works within the new 520px width requirements set by Facebook
• Add a YouTube video
• Not use iFrames

The Process:

1. Get to the admin section of your Facebook Fan Page.

Simply click the “Edit Page” link below your Fan Page photo on the Wall tab:

2. Install the Static FBML Application.

At the bottom of the admin area, there is a “More Applications” section.

If you’re lucky the Static FBML app will be listed like above in the apps you might find useful.  If that is the case, click the “Static FBML” link.

If it isn’t, then click “Browse More” and search for “Static FBML” or “FBML”.

Again, click “Static FBML”.

When you’re on the Static FBML app page, simply click the “Add to my Page” link below the icon in the top left.

There will be a popup to select the Page you want to add it to.  Find the correct page and click  the “Add to Page” button next to it.

Now go back to the admin area of your Fan Page and lets add the template.

3. Add content to your tab.

Click the Edit link on your new FBML application:

You now should see the edit screen.  Edit your box title text which will be the new tab title so keep it short.

Now comes the tricky part.  Getting HTML and styling into your new tab FBML content area.

Luckily, I have a starter template to get you going

Download the html code here: http://www.proworks.com/facebook/proworksStarterKit.zip and copy/paste the code into the FBML textbox.  You can also get it from here: http://pastie.org/940569

I’ll explain this code below.  For now, just paste it in and click the “Save Changes” button.

Lets go back to the admin area of your fan page and get this tab live.  The easiest way is to click the “edit” link at the top of the FBML edit page. Now click the “Application Settings” link in the FBML box under Applications.  Then click the “remove” link next to “Box:” and the “add” link next to “Tab:” in the resulting popup. It should look something like this when you’re done:

Now you should see your new tab on your Facebook Fan Page!  If you have a lot of tabs you may need to click the >> arrows on the right side of the tabs.  You can drag tabs around to reorder them. It should look something like this:

4. Customize with your own stuff

OK, so now you have a new tab.  First thing to note is that this will not accept all HTML and styling.  However, you can add new photos, links, text, or even flash fairly easily.

First thing you’ll want to to is add your own image/text to the box on the right.  The image needs to be hosted on your server somewhere. Simply edit the <a href=”http://www.proworks.com”> to your site URL and change the <img alt=”" /> src to an image location of your choice.  The ideal image width for the right side boxes in this layout is 168 pixels.

YouTube Video

Changing the YouTube video to your video is actually very easy as well.  Simply find the video you want to show and copy the weird text after the “v=” in the URL.

In this case its the “sIFYPQjYhv8″ part. Then replace all occurrences of “sIFYPQjYhv8″ in the code below (in your tab FBML content).

Save the changes and your have your content in the starter template and you’re on your way!

If you want to get adventurous and get other crazy things like Flickr slideshows or Vimeo videos or other cool things, check out the list of blogs by HyperArts on FBML and Static FBML.  Its a really good resource.

Thanks and let me know if you have questions or comments below!