This blog will show how with free open source tools to build a spectacular information-rich website that can be the epicenter of an online community, as well as a platform to promote a message and sell a product. This website will have the following Web 2.0 features; multimedia content (video, photo, audio and animation), blogging system, event calendar, advertisement display system, e-commerce store, social media integration, forum, content aggregation, social network with Facebook connection and Twitter so visitors can create a profile in 2 clicks.
In case anyone’s curious, I don’t charge my clients $ 4000 for less than an hour of work (True Confessions: It actually only takes me about 20 minutes and I’m a pro of task batching so I can set up like 10-15 sites in a few hours). The website that I will show how to build below is just a foundation. A client project like this usually involves a time-consuming creative process, content creation, site customization, business model development, and marketing consulting.
The content management system (CMS)
It is important to understand that we are not reinventing the wheel here. What really makes this possible is the exceptional content management systems that we are going to use, Joomla. I consider Joomla the best CMS on the Internet for three reasons 1) It’s ridiculously robust with almost 7000 extensions of dynamic functionality that allow you to scale your website to just about anything you can think of. 2) It is relatively easy to learn basic content update management functions. 3) It has a great community that will support you for any issues you may have.
Installation: Since we want to create a great website, I do not recommend using the default Joomla installation template through fantastic. Get one of the great professional templates from RocketTheme or JoomlaXTC. Installing this is very simple; create a MySQL database in your cpanel (takes about 3 minutes, your hosting company will have a simple tutorial on how to do this), upload the rocket launcher gold Easy installation template version in the directory, then navigate to that folder in your browser and follow the simple installation instructions. In about 5 minutes, you should be looking at your installed website template filled with dummy data. Installing Joomla is very straightforward and there are a lot of good tutorials on how to do it, so I won’t delve into it here.
Site settings
From the backend administration area of the site (YouSite.com/Administator) we are going to customize some settings so that the website works a little better.
Search engine friendly URLs. We want the website to display SEO friendly URLs, so navigate the main menu to Site> Global Settings. On the right side of the screen, where it says SEO Settings, set all 3 to Yes. Then via FTP or your Cpanel file manager, go to the site path directory, find the file htaccess.txt and rename it.htaccess, now we have URL of SEO friends.
Session time. We don’t want the site to disconnect us all the time, so Global Settings> System select the Lifetime session 45 minutes
Set editor. After you’ve installed the JCE editor (more on this below in the blog section) make sure to set it as the default content editor. To do this Site> Global Settings> Default WYSIWYG Editor (Middle of the page) and set it to JCE.
Note: To work within a CMS site, you will definitely want to have an FTP (file transfer protocol) program, this allows you to quickly upload and download files on the backend of the site. I recommend CoreFTP, which is easy to use and free to download.
Time Saving Tip: Let’s say you’re on the site’s backend looking for a particular setting. Instead of spending 5 minutes on a page looking for the particular setting, as this is the browser edition, use your browser’s search function on the page. In Google Chrome it is as simple as pressing Crtl-F and typing what I am looking for on the page.
Time Saving Tip: While working with a CMS, you will find that you save many articles and settings and browse. To save time, use the Apply button and open your next destination in another browser tab – that way, as you make incremental changes to an article or extension, you just switch between tabs.
The Extensions
I made this very easy for you by putting all my favorite extensions (minus the paid ones) together in a zip file (see the link at the end of this article). Once the file is downloaded, unzip it into a folder called something like Website Builder Extensions (You will notice that the extracted extensions are ZIP files as well, DO NOT extract these ZIP files). Now, in the manager, go to the main menu Extensions> Install / Uninstall. To install extensions, click Choose file under Upload package file and then select one of the extracted ZIP files. Then click Upload file and install back in administration. I’m not going to do a Joomla 101 class here, so if you’re having any kind of trouble installing these extensions, check out one of the many great tutorials online.
Managing and customizing extensions is outside the scope of this blog, but is done by going to the main menu to Components > and clicking on the installed component or Extensions> Module Manager and clicking on the module.
Multimedia content
Share HD video. In 2 years of working with web video these two are the best video players I could find. HD Video Share is a great video gallery that can play videos that you have uploaded to your site or you can stream them from other video sites like Youtube, Google Video, etc. (Talk about leveraging content!) It can also be scaled up to turn your site into a mini YouTube-style video sharing community.
Flowplayer. Flowplayer is a slightly simpler video player that is ideal if you want a video to autoplay on a page, such as a sales letter or welcome page.
Rok’s slide show. This will display a nice scrolling of photos. Photos can be linked to sections of the site.
Ozio photo gallery. There is a wide variety of free photo galleries available. I have found this photo gallery to be quite easy to use and offers a number of good viewing options.
Simple MP3 player. Want to play MP3 audio files on your site?
File names: HDVideoshare, mod_flowplayer_J15_v1-0-1, mod_rokslideshow_j15, com_oziogallery2.4, mod_simple_mp3_player_1.5.3
Social network
Community builder. Out of the nearly 7000 extensions, Community Builder is one of the best rated for ease of use, robust functionality for building a social network, and good support. Community Builder itself has +160 sub extensions (many of which are also free) that can further expand the capabilities of your social network.
Facebook and Twitter Connect. These will add those little buttons to your site that allow people to log in or create an account in about 5 seconds with just 2 clicks (for those of you concerned about conversion). These are plugins, so they need to be installed via Components> Community Builder> Plugin Manager. You’ll also need to configure the Twitter and Facebook apps to work, which is easier than it sounds. Like the rest of the community builders, these have excellent documentation and support. These are part of the CB Doc Extensions package which I think costs between $ 20 and $ 30.
File names: see Community Builder folder, plug_cbfbc_1.1, plug_cbtwitter_1.0
Blog system
Today, content creation is more important than ever in determining your success online. Joomla is an excellent blogging platform through its hierarchical system of article sections and categories. To get started with a blog, create a blog section and then head over to Content> Article manager in the main menu.
Disqus comments. In our social age of consuming Internet content, blog comments are very important. Disqus is the best commenting platform available and it really encourages social commenting. It is also very easy to install, so set up a free account with Disqus now.
JCE Wysiwyg. It allows you to embed images, videos, animations, and design HTML content within Wysiwyg. A word to the wise, DO NOT cut and paste directly from MS Word in Wysiwyg, use the Import MS Word button or better yet import with the Text Pad Button and then style the HTML text in Wysiwyg. It is a more attractive and SEO friendly article.
File names: plg_jw_disqus-v2.2_j1.5, com_jce_157_156_package
Events calendar
JEwents. There are several Joomla event calendars, but it is free and probably the easiest to use.
File names: com_jevents_154b, mod_jevents_latest_154, mod_jevents_legend_154, mod_jevents_cal_154, mod_jevents_filter_154, plg_jevents_search_154
Ecommerce store
VirtueMart. Virtumart is one of the leading open source online store platforms for selling products or services. The VM itself has 300+ sub extensions (many of which are also free) that can further expand your ecommerce capabilities to just about anything you can think of.
File names: see the Virtumart folder
Forum
Agora Forum. It allows site visitors to conduct discussions on topics related to their industry through ‘threads’.
File names: see Agora folder
Social media integration
Latest social media links. You want to encourage your visitors to share your stuff virally, so make sure you have great social sharing links that appear alongside your content.
RokTwittie. If you are building a brand online, you must have a twitter. This is the best module I have found to display your Twitter feeds on the side of your website. You can also set it to search for phrase strings on Twitter to see if people are talking about you.
File names: mod_social_widgets, mod_roktwittie
Various functions and extensions
Docker admin bar. Installing this plugin makes it a bit easier to navigate within the Joomla administration backend.
Display of banner ads. Joomla comes with a banner ad management system that can be accessed through the main menu Components> Banner. Upload your banner ad graphics to a folder and then select them through the banner ad display system. You set how many clicks and impressions your banners receive or you simply set them to rotate.
Feedgator. Feedgator is its own world of open source awesomeness. Basically it allows you to feed any RSS to become articles on your website. If you’ve ever wondered how to create a auto blog that is how.
File names: AdminBarDocker-v1.1.2, com_feedgator_2.2.4
