Everything listed under: tutorials

  • 7 Best Practices to SEO Like a Pro

    When prospects search for products like yours, do they find you or your competitors? Getting to the top of the search engine rankings seems like an impossible task to many marketing managers. But it's neither complicated nor expensive. It does require a lot of effort and a little know-how, and maybe some help from a good web content management tool to automate some of the more time-consuming tasks.

    Here are seven SEO best practices to follow to getting to the top of the search results.

    1. Do your keyword research. You can't know how to optimize search engine results unless you know what search words are most popular and most likely to be used by the consumers you are trying to reach. Start researching these keywords using the Google keyword research tool to get a list of the most-used words that relate to your product category. You can also find out what keywords people use to find your site.

    2. Create focused and unique content. Content is king and critical to improving search engine ranking. Not just any content will do though. Your content should be high quality and contain valuable and useful information from which your readers can learn. Developing fresh and relevant content on a regular basis is not always easy. By taking an integrated and team approach to content development, not only will you be able to generate fresh content on a regular basis, but you will also be giving your internal team an opportunity to share their thought leadership. Expanding your content development team to customers and partners is also a great way to generate new content and build stronger relationships. Just make sure to avoid overusing too many keywords or copying content from other sites. Search engines are programmed to look for patterns that indicate cheating. On the other hand, you do want to optimize each page to get the best ranking it deserves. Usually including two to four good keywords in the page, repeated a few times each, is a good goal, depending on the amount of copy.

    3. Know your tags. HTML code includes several types of content tags. The important ones for SEO are the title tag, meta description tags, meta keyword tags, alt tags for images and your H1 and H2 tags. They all help to tell the search engines the focus of the content so they'll be noticed and indexed correctly. Some content management applications automatically generate tags for you. LightCMS, for instance, generates title tags and some header tags. The title tags should reflect the main focus of your content and include the most important keywords.

    4. Leverage software tools. You can't tell how effective your SEO strategy is unless you are monitoring traffic. Google Analytics is a good free tool for checking performance, traffic volume, keywords used, and the loading speed of pages. Many web content management systems (CMS) such as LightCMS also have analytics capabilities and/or integration with Google Analytics. Web CMS applications can also automate a lot of tasks, such as generating URLs and meta tags. Another set of tools provided by both Google and Bing is Webmaster Tools. This is where you submit site maps, learn which keywords bring in the most people, find ways to optimize your site, get alerts to problems with your site, and other useful things.

    5. Consider architecture. Site architecture is another important factor in SEO. Basic considerations include having a clearly worded URL structure with descriptive keywords as well as a clean navigation structure. Page load time or how fast your page loads is increasingly becoming a priority, so make sure that the pages on your site have clean code that’s optimized for loading. The size of images and videos should also be considered when building a site. These factors all contribute to page load time. Once your site is done, make sure you have an XML site map and submit it to Google and Bing using Webmaster Tools. Just as an HTML site map tells people what is on a website, the XML site map informs search engines. If you use a web CMS like LightCMS, the sitemaps are created automatically.

    6. Keep to a schedule. SEO isn't a one-shot promotion. You aren't aiming for three weeks at the top, followed by a gradual drop to the bottom. The goal of SEO is to create a sustainably high ranking. That requires consistently updating your site and sticking with a schedule that web crawlers can come to anticipate. If you don't update content for weeks, the crawlers will learn not to check for new content very often. If you update every Tuesday, eventually crawlers will learn to come every Tuesday to update your listing.

    7. Become a trusted source. The best way to be visible on search engines is to become a trusted source of information. That means providing content not just about your products but content to educate your readers about related issues. This is important because customers often start out as curious researchers. Someone who sees a person paddle boarding might be motivated to search on "water sport using board and paddle," and if he likes what he finds, he might next look for "how to paddle board" and eventually "buy paddle board."

    The most sophisticated SEO strategy is to become an integral source of information for everyone — the curious as well as prospects and returning customers. The more useful and up to date content you provide, and the better organized and labeled it is, the more often your company will float to the top of search engine results.

  • Implementing Google Web Fonts on Your LightCMS Websites

    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!

  • How to Set Up Custom Facebook Page Tabs with Content Your Clients can Control

    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.

    1. <script type="text/javascript">
    2. window.fbAsyncInit = function() {
    3. FB.Canvas.setSize( {height: HEIGHT-IN-PIXELS} );
    4. }
    5. // Do things that will sometimes call sizeChangeCallback()
    6. function sizeChangeCallback() {
    7. FB.Canvas.setSize( {height: HEIGHT-IN-PIXELS} );
    8. }
    9. </script>

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

    1. <div id="fb-root"></div>
    2. <script src="http://connect.facebook.net/en_US/all.js"></script>
    3. <script>
    4. FB.init({
    5. appId : 'YOUR-APP-ID',
    6. status : true, // check login status
    7. cookie : true, // enable cookies to allow the server to access the session
    8. xfbml : true // parse XFBML
    9. });
    10. </script>
  • Using Facebook Comments with LightCMS

    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.


  • Using jQuery to Enhance Pages in Admin Mode

    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:

    1. // Checks for Admin to apply fixes for backend
    2. if ( $('#adminbar #toolbar').length ) {

    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.

    1. // cycle when logged in
    2. $('#featuredImage').cycle({ 
    3.    fx: 'scrollHorz',
    4.    speed: 800,
    5.    next: '#next',
    6.    prev: '#prev',
    7.    cleartypeNoBg: false,
    8.    timeout: 0
    9. });
    10. $("#controls").show();
    11. $("#cta").css({'margin-bottom' : '-80px'}); 

    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.

Tags

Archive

Try it yourself. It's free.

Takes less than 60 secondsNo commitmentNo payment information required

Sign Up for Free