Documentation - Installation Screencast (.avi)

If there is no video above (or the audio is not playing), try accessing the video directly or viewing the .wmv video instead.

Hi, and welcome to this screencast for installation of Featurific Free!

Today we're going to install Featurific on our web server, and first we're going to hit up and access the tab that says, "Download". Once there, we're going to hit this link that says, "Download Featurific Free", for the impatient - which takes us directly to the download page. At this point, we need to make sure to read through all of the terms and conditions of this download and once we've done so, access the "Download" button.

Now, this is just like downloading any other file that you've downloaded before; we're going to right-click on it and go to "Open Containing Folder", which takes us to the directory that contains the archive. So, we're going to double-click on it and at this point, let's extract the contents of this zip archive. And this is just like any other archive that we extract files from. In this case, we're using IZ Arc which is a free zip archive tool, and other archives are accessible through it as well. You're free to use whatever you'd like to extract the files.

Now that we've extracted the files, we need to upload them to our webserver - in this case, we're using Filezilla to FTP these files to our server, but, you're free to use, again, whatever FTP client you'd like, although this one is a free download as well. We enter in our connection credentials and hit "Connect". Then, once we're connected we need to find the location of the files that we extracted from that zip file just a moment ago. And we actually put these files on the Desktop, so we navigate to the Desktop and find this FeaturificFree folder. Then, we need to find the location that we'd like to put the files into on the web server, and we're going to put those files into just the root of our web site which is public_html/mysite. Now, we'll go over to Local Files and choose the FeaturificFree folder. Now, we need to make sure that we're uploading the correct folder. We need to upload the folder that contains "fonts", "images", and "img", not the FeaturificFree folder that contains the other FeaturificFree folder. So, this is the right folder, and we upload it to our web server. I've uploaded this before, so we need to choose to Overwrite and hit OK, and at this point, we just wait for the files to upload.

Great! Now that the transfer is complete, we need to verify that the upload worked correctly and everything's functioning as expected. So, we need to hit up So that's just the root of our website - for you, it's going to be different, but in this case, that's where it's at. And we need to hit the FeaturificFree directory and index.html inside of that directory. And this is just a test page that's included with Featurific, and you can see that it's working correctly.

So, now that we've done so, let's check out the page into which we'd like to insert Featurific, which is just, and of course, this is going to be different depending on your site; depending on the page you want to put it onto. So, this is the page we'd like to insert the code into, and at this point we need to find the HTML code that will allow us to insert Featurific. So, let's find that directory on the Desktop that contains FeaturificFree, and access index.html, which is inside the FeaturificFree directory. Right-click on index.html and go to "Open With..." and "Wordpad", and this shows us the code for that test page. And we pull this up because from this test page we need to copy out the code that was used to display Featurific. We need to grab everything between this "" and "" tag. And we go to "Edit"->"Copy". Now, if you don't see the Begin and End Gallery tags, it might say "Begin Featurific" or something of the sort, but it should be fairly obvious where the code is.

So now that we've copied that code, we need to access the page that we'd like to insert Featurific into. So that's on our Deskop incidentally, it will be different on your system. We'll right-click it, go to "Open With...", and "Wordpad", and now that we've got the code open, we just need to chose somewhere to place the code. Let's put it actually after this "Welcome to my site!" text. So, now that we've got it copied, we just hit "Ctrl-V" to paste, or we could alternatively go to the "Edit" menu and hit "Edit"->"Paste".

So the next step is to update these paths for the javascript and the Flash files. Now, this is important because the test code that we copied happened to be in the same directory as FeaturificFree. But, our index.html page for our website is in the directory above that. So, we need to add a "FeaturificFree" onto these two paths. Now, this is going to change depending on the relation of your files to each other. Once we've made these changes to the paths, we just hit "Save", and we need to upload the changes to our web server. So, we need to access the location of this index.html file which happens to be on the Desktop, and upload that to the appropriate location on the web server.

Great, and now that we've uploaded that file, we just need to go back to our website and see if those changes were successful. So we head back to this page and hit "Reload", and there you go - there's Featurific!