Web Developer Tutorial: Building Your Community Page

By Michael Rohde

Last week I wrote an article about how to use BBcode in forums and how adding a forum to your site can help foster a community, increase return visits and develop a loyal audience. Hopefully, that gave you a kick start in thinking about other ways to enhance the community aspect of your site. It really doesn't matter what type of site you have because any and all web sites should have the goal of retaining visitors and creating a community. Here are more ideas to help develop a community for your site.

The first part is to create a Community page(s). The term Community is very common place among web developers and visitors. In fact, the job role of Community Manager is becoming more prevalent in the marketplace. The idea of Community goes hand-in-hand with Web 2.0 technologies and fits in nicely with available API's, freeware and other tools. The Community page should contain useful news items that are relevant to your audience, a means for the audience to respond to the news items, and the tools for the audience to submit their own content. There are many, many ways for you to go about adding this to your site. I'm going to present to you some very simple and easy ways to not only present the latest news headlines to your audience, but also a way in which your visitors can send you news.

The first idea is to add an RSS feed(s) to your Community page. Before you start groaning that RSS is old news, hear me out. Google has an AJAX Feed API that is really very useful. It is especially useful if you want to concentrate on selling your product and not writing news articles about your product on a regular basis. The Internet is full of great content already; it's kind of a no brainer to put that content to your advantage. Don't let the fact that it's AJAX scare you off. The brilliant minds at Google offer a Dynamic Feed Control Wizard that allows you to plug in your keywords, choose from three different layouts, provides a preview and then generates the code for you to copy and paste into your HTML. Yes, it is that easy. And the format they provide looks decent. The design and format won't blow your mind, but it does keep in form with Google's simple and functional ideology. Google also provides a developers guide if you want to tweak the bells and whistles.

Here's some sample code that I used for my site:

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search and Feed Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->
  <!--
  // The Following div element will end up holding the actual feed control.
  // You can place this anywhere on your page.
  -->
  <div id="feed-control">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>
  <!-- Google Ajax Api
  -->
  <script src="http://www.google.com/jsapi?key=notsupplied-wizard"
    type="text/javascript"></script>
  <!-- Dynamic Feed Control and Stylesheet -->
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
  </style>
  <script type="text/javascript">
    function LoadDynamicFeedControl() {
      var feeds = [
	{title: 'Video Games',
	 url: 'http://www.gamespot.com/rss/game_updates.php'
	},
	{title: 'Xbox 360',
	 url: 'http://feedproxy.google.com/planetxbox360rss'
	},
	{title: 'Sony PlayStation 3',
	 url: 'http://www.joystiq.com/rss.xml'
	},
	{title: 'IGN',
	 url: 'http://feeds.ign.com/ignfeeds/all/'
	},
	{title: 'Zero Punctuation',
	 url: 'http://www.escapistmagazine.com/rss/videos/list/1.xml'
	}];
      var options = {
        stacked : true,
        horizontal : false,
        title : "Video Game News"
      }
      new GFdynamicFeedControl(feeds, 'feed-control', options);
    }
    // Load the feeds API and set the onload callback.
    google.load('feeds', '1');
    google.setOnLoadCallback(LoadDynamicFeedControl);
  </script>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->
The above code might look long and complex, but there's nothing to really worry about. All you're doing is copying it from Google and pasting it into your HTML page. That's all there is to it. The hard part is determining which keywords you want to use. Speaking of keywords, you can be as generic or as specific as you like. You don't need to know anything about any specific RSS feed. You simply type in keywords that are relevant to your site and Google will find the appropriate RSS feeds for you. However, don't do this blindly.

Make sure to test the links that appear in the RSS feeds and that the content is what you want. For example, I have a video game site and for one of my keywords I used, "PS3" hoping I'd get the latest headlines for Sony's PlayStation 3 game console. The problem is, I got links that went directly to an online store that sold video games. Plus, after a full day, the RSS feed did not update. So, I went back to the Wizard and replaced "PS3" with "Sony PlaySation 3." That did the trick. Now I get useful news articles on that topic.

In addition to providing news headlines, you might want to include a submission form that visitors can use to send URLs of articles that they want to share. The submission form also allows a visitor to write their own article that they would like to share. I use JotForm, which is another free service. They do offer a Premium service, but I'm pretty happy with the free version. Especially considering that not too many people actually use the form, but they like to know it's there in case they do want to use it.

And, as mentioned before, I also include a link to my forum on the Community page. In the past, I used simple text links, but as my site is progressing I am starting to use more button-type images for my links. I am currently using Free-Web-Buttons.com, which is freeware that I'm currently pretty happy with. They do offer a premium version for $29.99 but I haven't found the need yet to pay for it.

And last, but not least, a Community page should have a Comment system in place. I am currently using Echo, which has plenty of features and options. They do provide a free trial period. After the trial, I happily paid $10 for a year's worth of service. It's the best $10 I've ever spent.

So there you have it: a Community page with the latest headlines, a form for visitors to submit content, a comments box and a forum. You're all set. All you need now is that first visitor… Don't worry, as they said in the movie Field of Dreams, "If you build it, they will come." (Especially if you offer some kind of contest to win something.)

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date