This is a guest post submitted by Denny Cave. Denny is the founder of LightIgnite, a valuable resource focused on helping LightCMS customers build amazing websites. With the power and flexibility of LightCMS, he has been exceeding customer expectations since 2008.

Years ago in times long forgotten, the web was a much uglier place — java applets here, flashing text there, animated GIFs everywhere, and lots of boring typography. Most of these problems were the result of poor taste or misguided content decisions and they have gradually disappeared as the collective consciousness has grown to despise them. However, one problem that has only recently been solved is the issue of lackluster typography. Read along to learn how to transform your headlines and body copy into unique works of art.

A Brief History of Fonts on the Web

When font tags (and later, CSS stylesheets) were introduced, a visitor had to have a specific font installed on their computer to be able to display text using that font. If they didn't, the web browser would render the text in its default font, which almost certainly resulted in a visual appearance undesirable to a site's developer.

As you can imagine, the list of web safe fonts (those that are installed by default in almost all operating systems and internet-enabled devices) is a small one. This led to the use of font stacks, which are essentially lists of reasonably similar fallback fonts used in the event that preferred fonts aren't available. The fonts in a stack still have to be present on the visitor's system, but being able to define several options gives the developer peace of mind that at least one of them will be available.

Font stacks are still used today. In a CSS file a typical font stack looks like this:

When CSS2 was released, techniques to allow font embedding finally began to emerge. Embedding allows fonts to be displayed even if they are not installed on the visitor's system. There are several ways to embed fonts, but the easiest by far is through the use of hosted font services. 

There are multiple reputable web font vendors out there, but we'll be using Google Web Fonts for this demonstration. It's extremely easy to use and, unlike many of the alternatives, it costs nothing.

Step 1: Choose Your Fonts

Before you embed fonts into your site, you need to browse Google's selection and pick the ones you want to use. Visit http://www.google.com/webfonts to start browsing. 

The type of font you pick depends on where it will be used in your site. Thick, bold fonts are great for headlines while thin, narrow fonts are generally better for body text. Fortunately, Google has included a nice interface that allows for filtering based on font properties. 

As you add fonts to your collection, they'll display in the bottom navigation panel. You can add as many fonts as you want to a page, but keep in mind that each font will slow the loading time of your site.

Step 2: Get the Code

In the bottom navigation bar, click the "Use" tab and Google will show you a summary of the fonts you've selected as well as their effect on page load time:

Scroll down a bit and you'll see the code snippet that has been generated for your selected font styles:

Step 3: Embed the Fonts on Your Site

Copy your code snippet and browse to your LightCMS site. You have two options for embedding the code:

1. If you are comfortable editing HTML, the code can be inserted directly into your site template. Paste the snippet anywhere inside the head section of the template.
2. If you don't know how to edit HTML, this code can be inserted site-wide using LightCMS's Google Analytics setting. This option is found on the Settings -> Advanced tab, then scroll down to Google Analytics:

Your site will now load the needed font resource files every time a page is visited. However, we still need to tell the browser the elements on which we want to activate the font.

Step 4: Apply the Fonts

This is the hardest part because it requires some CSS knowledge. We need to add the new fonts to the font-family attribute of the target elements on our site. If you're not comfortable editing your site's CSS files, you can make use of the Google Analytics setting again to insert the required code.

Since I chose a thicker font, I'll be applying it to the headings on the site. This is the code I'll insert into the Google Analytics setting on my LightCMS site:

That's all there is to it. Save the settings and preview any page on your site to see the headings in action. Here's how my demo turned out.

Go Forth and Beautify Your Typography

Now that you've seen the basics of implementing a web font I encourage you to branch out and find interesting ways to use your new found knowledge. Neat effects can be achieved by adding color or text shadows and by applying the fonts to different elements such as buttons or site navigation. Keep it tasteful but have fun!

Please note: This article was originally published on October 19, 2011 but has been updated and republished to reflect changes to Facebook's custom page tab layout for timeline view.

Keeping up with Facebook can be a challenge. It was just a couple of years ago that we published this tutorial on setting up custom tabs on Facebook pages using FBML. In the year following that article, Facebook announced they were deprecating the FBML standard and actually turning off all FBML page tabs by June 1, 2012. So, we spent some time figuring out how to convert our page tabs to the new iFrame standard, and put together this guide based on what we've learned in the process, publishing it in October of 2011. Now, a few months later, Facebook is again making changes as they shift all pages to timeline view. So, we've updated and republished this article to reflect these changes.

The Impact of Timeline View

The changes Facebook is making correspond to their migration of all brand pages to the new timeline view. The new timeline view affects how custom page tabs are integrated. Here are a few significant changes:

• Wider Content. Content on page tabs was previously restricted to 520px wide, but now content can be up to 810px wide, offering a much larger canvas for displaying content.
• No More Default Landing Tab. With Timeline, all traffic to a brand's Facebook page will end up on the main timeline, whether or not the visitor already likes the page. Previously, Facebook allowed the page owner to specify a tab to serve as the landing page for non-fans when they visited. This is no longer possible.
• New Branding Opportunities. Page tabs now provide an opportunity to insert additional branding onto the main timeline page. Each custom page tab can have a 110x74 cover image that can be displayed in the boxes below the timeline's main cover image. There are four boxes, of which one (the "photos" box) cannot be moved or changed. The other three can be replaced with custom imagery through the use of page tabs. You can see how we've replaced two boxes with custom artwork on the LightCMS Facebook page in the image below.

That's an overview of the most recent changes Facebook has made. Now, let's take a look at how you can put together your own custom page tabs.

Create Your Content

First, you need to determine what you want to include on your custom page tab and then create your content in HTML, CSS and JS standards. Whatever content you create, it needs to be no wider than 810px and you should remove any margin or padding around the body of your content so that it fits exactly in the space Facebook provides.

Host Your Content

You can host your tab content anywhere you like, but you must be able to provide secure hosting for your content or Facebook won't allow it. This is one reason that hosting the content on LightCMS is a convenient option. With LightCMS, SSL security is built into the publishpath.com domain and every LightCMS website can be accessed through the secure publishpath URL. You can provide your website's publishpath address to Facebook to retrieve the content without ever exposing the publishpath address to the public.

Of course, another plus for putting your content on LightCMS is that you can utilize LightCMS's content management tools, making it easy for you or your clients to update and change the content on the Facebook tab without having to edit any code. Simply create a design template and apply it to a hidden page on your LightCMS website to establish the page you'll provide to the Facebook custom tab.

Set Up Your Facebook App

To set up a simple page tab, Facebook requires you to create a custom Facebook App. Fortunately, this is actually much easier than it sounds. While there are several Facebook Apps out there that will create the tabs for you, I'm always a fan of doing things myself when possible and, in this case, it's a very simple process so I think it's worth it. Here's a quick rundown of the process:

Go to the Facebook Developer Website
Visit https://developers.facebook.com/apps. You must be logged in to Facebook to continue. If this is your first time to create a Facebook app, Facebook will ask you to authorize the developer tools, which you will need to do.

Click "Create New App"
You'll be asked to provide a name for your app. The name can be anything just to help you remember what the app is for. You don't need to put anything in the "App Namespace" box.

Fill in the Details
Facebook Apps have tons of settings, but there are only a few you need to worry about. When you edit the settings on your app, look for the section called "Page Tab." Click to enable that and you'll see five fields. Complete these fields as follows (see image below for reference):

• Page Tab Name - put the words you want to use to represent the tab. You can actually override this setting when you add the tab to your page so the name used here isn't critical.
• Page Tab URL - put the URL to the directory containing your iFrame content. This can't be a URL to a specific file, but must be to a directory or shortcut path. If using LightCMS, this is simply the URL to the page you set up earlier such as http://[yoursite].publishpath.com/facebook-tab
• Secure Page Tab URL - this is the secure version of your content. If using LightCMS, you simply need to add an "s" to the "http" as such -- https://[yoursite].publishpath.com/facebook-tab
• Page Tab Edit URL - you can leave this field blank.
• Page Tab Width - choose either Narrow (520px) or Wide (810px). Wide is recommended.

That's it! Now you can save your changes.

Add the Tab App to Your Page

Now that your app is set up you need to add it to your Facebook page. Facebook has, unfortunately, made this harder than it needs to be. The best way I've found is to paste the following URL into your browser's address bar:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Replace "YOUR_APP_ID" with the numerical ID of your app and replace "YOUR_URL" with the URL to the iFrame content you have created. Accessing this URL through your browser will bring up Facebook's dialog allowing you to choose the page on which you want to install your app.

Adjust the Look

Visit your Facebook page and you should now see the new tab added to one of the boxes below the main cover image. If you have a lot of boxes, you may have to click the arrow at the far right to expand the second row of boxes. Once you click that arrow, you can hover over any box and select the edit menu at the top right of the box to change its position. Remember, the "Photos" box is the only one that can't be moved.

To customize the image used to represent your tab, click the edit menu on the appropriate box and choose "Edit Settings." You'll be able to upload your own 110x74 image to display in the box. You can also adjust the text that is used to describe the tab (overriding the Page Tab Name you set when you created your app). Click your image and you'll be taken to your custom tab, displaying the custom content you created.

Overriding iFrame Height

One problem we ran into is that the content we set up on our custom tab was taller than the iFrame Facebook created to display it. This caused the browser to add scrollbars which really looked messy. Fortunately, there is a way to tell Facebook to increase the height of the iFrame by including some Javascript in the code of the tab page itself. We'll include the code below in case you run into this issue. You would only need to include this if your iFrame content is more than 800px in height.

Include the following in the head of your html document. Replace HEIGHT-IN-PIXELS with the desired height for the iFrame. Be sure to replace it in both locations below.

And include the following just before the closing body tag. Be sure to replace YOUR-APP-ID with the numerical id of your app.

Most of you likely already know that Facebook offers a handful of social plugins which can be used to integrate Facebook's functionality with your own website. One of the most intriguing of these plugins is the Facebook Comments Plugin. With Facebook Comments your site visitors can leave comments on your website just as if they were commenting on Facebook.

There are a host of pros and cons for using Facebook Comments and we're not going to debate them all here today. I will just say that, in my opinion, the biggest thing Facebook Comments has going for it is the fact that when users leave comments on your site, those comments are, by default, posted back to their Facebook profiles. This means those users' friends will see stories in their news feeds with their friends' comments and links to the posts on which they left the comments. Plus, if their friends leave comment replies within Facebook, those comments are cross-posted back to your blog as well. This feature alone creates the potential to greatly expand the reach of your blog posts and the interactions that happen on your blog.

Integrating Facebook Comments with LightCMS

Facebook provides many tools for developers to use when integrating their social plugins. For the purposes of this tutorial, we are going to cover the most basic approach to integrating Facebook Comments with LightCMS.

Set Up a Blog Detail Page

You will want to create a page on your site to function as your blog's detail page. This should be a hidden page and its only purpose will be to serve as the "framework" onto which the system will display your blog posts. You will then want to create a separate blog detail template that you will apply to this page.

Set Your Blog Element to Use Your Blog Detail Page

Once your blog detail page is set up with your blog detail template applied, you need to tell your blog element to use this blog detail page for blog post display. You do this by visiting the blog element settings -> advanced tab and looking for the "Detail Page" selector. Choose the page you just set up and save your changes.

Once this is complete, any changes you make to your blog detail template should be reflected on the detail pages of every blog post.

Disable Built-In Comments on Your Blog Element

While you're editing the settings for your blog element, go ahead and visit the "Basic" tab and uncheck the box that says "Let people comment on my posts." This will turn off the built-in comment system. You can technically still use the built-in comment system in addition to Facebook comments, but in most cases, disabling the built-in comments is probably a good idea.

Add the Facebook Comments Code To Your Blog Detail Template

The final step is adding the Facebook Comments code to your blog detail template. You'll most likely want to add this code directly below the MainContent region. To get the code you need, you can visit Facebook's reference page for the Comments social plugin. There you can enter the URL to comment on (see more on this below), the number of posts to show at once, the width of the plugin and the color scheme (you have a choice of "light" or "dark"). Facebook will then provide you with a snippet of code you can paste right into your template where you want the plugin to appear.

Replace the URL with LightCMS's URL Token

One little tweak to Facebook's generated code is needed. In order to be able to use the plugin code across multiple blog posts and/or pages, you need to replace the URL used in the code with LightCMS's dynamic URL token. 

Look in the code Facebook provided you for the following:
data-href="example.com" 

and change it to:
data-href="<$url stripQueryString="true" /$>"

The "stripQueryString" attribute is needed because Facebook treats every URL, even URLs with different query strings, as separate entities. So, comments left on http://example.com would be separate from comments left on http://example.com?x=1 and the like. To ensure all comments left on your post are grouped together and visible whether query strings are used or not, our URL token provides the option to remove all query strings when outputting the current page's URL.

Taking It Further

The above is all that is necessary to get comments running on your site, but there are a lot more settings and features you can play with as well. Continue reading down Facebook's reference page and you'll find information about how to set yourself up for moderating comments and controlling other aspects of the plugin.

Also, you might want to look into implementing open graph tags on your blog pages as well. These tags can shape and improve the way your content is rendered on Facebook when your pages are shared or commented upon. For details on how to do this, see Facebook's Open Graph Protocol reference page.

I hope this brief tutorial gives you an idea of how you can integrate Facebook comments with LightCMS. If you have experience using Facebook comments, please share your thoughts in our comments section below.

Since LightCMS gives you full control over your HTML, CSS and JS, it is possible to create designs that position elements in a way that obstructs the view of certain admin controls when the user is in admin mode. The best approach to correct such issues is to modify your CSS. But what if you can't find an easy CSS solution? As usual, jQuery is here to help. With a few additions to your JS, you can set CSS attributes that only apply when you're logged in and in admin mode.

This post assumes a basic knowledge of using JavaScript libraries. If you're not sure how to use JavaScript or jQuery with your LightCMS site, check out our blog post "Using jQuery with LightCMS".

Below is an example of a site in need of some fancy admin doctoring. The main area up top is called #featuredImages, and it's part of a custom jQuery photo gallery called cycle. Directly below #featuredImages are two blue boxes referred to as #cta.

The Front

The design looks great, but when you log in, you can see that the positioning applied to #cta causes it to block the "Add Element" button for the Featured Images region. Check out what the problem looks like below.

The Back

To clean this up, we can use jQuery for a simple fix. The following conditional statement will allow you to add jQuery that will apply only if the user is logged in and in admin mode:

This checks for the presence of both the #adminbar and the #toolbar. Ensuring you are both logged in and in admin mode before applying the rest of the jQuery, below.

The Result

So, what happened?

First, we targeted #featuredImgages and changed some of the custom photo gallery's settings for users in admin mode. We set the timeout to 0 so that you don't have to worry about it automatically scrolling when you try to edit it. We also set #controls to be shown, so you can switch between #featuredImages manually (you can see the "prev" and "next" buttons at the top of the image above).

Second, we added some CSS to be applied only when the user is in admin mode. We targeted #cta and then changed the CSS attribute margin-bottom, pushing the #cta section down so that it no longer covers the "Add Element" button. 

While this is a fairly simple example, you can see the possibility is here to add any amount of CSS to only be utilized when the user is in admin mode.  So whether you just want a visually clean site when you log in personally or if you're wanting to clean things up for your client, using jQuery to situationally alter your CSS can be a fantastic choice.

The world of SEO is anything but black and white. Use tags, but not too many. That's probably too much. Just write naturally while using this keyword three hundred times in your first paragraph. The frustration can be intense when balancing authenticity with tweaks that may or may not make the search engines happy. Maybe you've even given up. But with all of the buzz about Google+ and Facebook and what-have-you, it's obvious that SEO is a success factor that's not going anywhere anytime soon. It's apparent that whether you only have a personal site or you're a multi-million-dollar LightCMS reseller helping clients optimize their site, SEO is important for you.

So how can you approach SEO in a way that's practical, easy on time, has results, and (best of all) is free? I marched across the hallway and asked our resident SEO professional, and here's what we came up with.

Blogging for SEO

It may surprise you that one of the most effective tools for SEO is blogging. Blogging platforms are everywhere, and it just so happens that the LightCMS blog element has everything you need for SEO. If the platform you use creates a unique page for each post as the LightCMS blog element does, then those posts impact your SEO as any other page on your site would.

Find Your Keywords

One of the great things about blogging is that it gives you infinite chances to bolster your site's ranking with search engines. Just in case you're not familiar with the lingo, a keyword is basically a search term you want to place well for. The very basic idea is that if you've got a Dr. Phil fan site and you want everyone who looks up "OMG Dr. Phil" to find your site first on Google, then "OMG" and "Dr. Phil" could be your keywords.

A serious site is likely going to involve more complex search terms than that, and so an online keyword tool can be a great place to get some ideas. Free tools like Google's external keyword tool can be a great help. There are two simple ways to use it for finding keywords: 1.) You can "prospect" your competitor's keywords. If the keywords are dominated by huge companies, you can consider avoiding them to take up some of the less used keywords that apply. 2.) You can search for new keyword ideas using a URL or a related term.

Keyword Density

The search industry relies heavily on being relevant, so being mindful of how many times you use your keywords is important. Search engine algorithms have become staggeringly complex, so keyword density isn't nearly as important as it once was, but you definitely want to avoid looking "spammy." 

Free keyword density tools, like this tool from SEObook, give you a chance to monitor the percentage and number of times you're using a term or terms. The main goal is to make sure your search-relevant words are prominent, but many say that specific percentages aren't a big factor anymore.

The Key to Real Ultimate Search Power - Good Content

Keywords are dandy, and a good density is the bee's knees, but the cold, emotionless logic of a search engine wants the same thing we do -- real, helpful content. So keep those keywords and terms in the back of your mind as you write, but don't focus on them overtly. You want your content to be natural, relevant, and actually useful. Having content that's worthwhile also increases the chances that your site will be linked to by others when they find it, and links from external sites have a strong effect on your site's search engine ranking.

Other Things to Consider

• URLs and page titles are still very important, so be sure to use a keyword or two in there. With our blog element, each blog post's URL is completely customizable, so a search-friendly URL is easy to achieve.
•  Add a relevant description to any images in your posts using the alt tag. An example would be <img alt="OMG a picture of me and Dr. Phil at the Dr. Phil-a-palooza" src="http://">.
• Utilize keywords in your blog tags when relevant.
• Don't be afraid to link to your own pages or blog posts. Internal links have some effect on overall ranking.
• Don't focus on all of your keywords in the same post. Instead, focus fire and write a blog post only using one or two search terms. The main thing is to be natural and relevant. Shallow content on a every keyword you can find probably won't be natural, useful, or relevant.
• Post to your blog more regularly than you do now. Even posting around once per week can be a good rule of thumb because an active website is often more up to date than an inactive one.
• Don't be shy about sharing your content via social media.
• More tips and info about SEO in general can be found on a previous post of ours: "Are You Using an SEO-Friendly CMS?"

In Conclusion

Incorporating better tactics to improve SEO can be easy on you, your wallet, and your time. Find keywords relevant to your site, set up your pages to appear relevant, and then create relevant content. But more than anything else, create good content.

So what have you used for SEO? Any tips or guides that you've seen results from? Let us know in the comments!