getting started: setting up the database
getting started: setting up the IP-to-Country system
getting started: database connections
getting started: live demo
making your own: code samples & break downs
making your own: loadSMLM explained
making your own: for data driven sites
making your own: fancy web 2.0 URLs
the configuration file

Getting Started

This is a quick guide to get you started with seeMeLikeMe (sMLM) user votes and page insights and help you get the system up and running.

setting up the database

Step One: finding the SQL file

In the download package find the folder called "SQL" and the file inside called “smlm_db_sql.sql”.

This contains all the SQL to create the database to hold all those delicious votes and visitor stats.

Step Two: Creating the database

So we have our SQL file, now we need to import it into a MySQL server. Open up PHPMyAdmin or some other MySQL administrator panel that you use.

First thing we need to do is to create a database. Lets call it “smlm_db”

(note: if you already have a database for your website then you can skip that step – but if you are importing SMLM tables into an exsisting database then remember to make a backup first.)

Once you’re in then copy and paste the SQL code from the above file into the area of your administrator panel that normally allows you to run SQL queries.

Step Three: Setting up the geo-stats

To make full use of the geo-stats and reporting aspect of this application you will need to download and 'install' an ip-to-country database. There are a number of these avaliable online for free and a number of them that are not so free with different licencing agreements.

There is this ip-to-country database from webhosting.info. This is a little out of date but easiest to upload into the database as it does not include any extra data.

I recommend this ip-to-country database from software77.net. It's updated daily. It is recommened to keep your database fresh and update it once a month and that is why I do not pre-load our apps with it for you. With this database you will have to remove two columns of extra data before uploading.

Once you have your CSV file you will need to make sure it is formatted in with the correct fields:

Column 1: must contain the IP range start value
Column 2: must contain the IP range end value
Column 3: must contain the two letter country code
Column 4: must contain the three letter country code
Column 5: must contain the ISO full country name

Once in the correct format import the data to the stats_country_ip table in your database.

Finally you must run the following query on your database: 

                        UPDATE stats_country_ip
                            SET ipstart = TRIM(ipstart),
                                ipend = TRIM(ipend),
                                2letter = TRIM(2letter),
                                3letter= TRIM(3letter),
                                full=TRIM(full);

That will clear up any extra whitespace in the fields and that should be it.

database connections

Now that we have the database set up we need to create a database connection. Find the "config" folder in the download package and open the "config_mini.php" file.

All we need to do is to change the first few settings. Enter your database server name, your database name and any login details for your database server. 

            define('DB_HOST', 'localhost');
            define('DB_NAME', 'yourdbase');
            define('DB_USERNAME', 'root');
            define('DB_PASSWORD', '');

More details on the other configuration settings can be found here

the live demo!

If you're anything like me then you want to quickly see this in action so I've created a live demo for you to have a quick look at and to use as a live coding example to refer to. This is located in the "index" folder in the download package - inside that folder find the "index.php" file. All the other js, css and image files that you need are also located in the index folder.

making your own

code samples & breakdowns

Okay, okay. Enough with the live demo. Let us dive into the actual code to understand all the features avaliable.

If setting up the database went well, the rest of this should be a breeze. If you have any issues use the live demo in the "index" folder as a working example.

I’ll explain all this code in a bit, but just to show you what it'll look like in the end:

In the head tag of your web page you'll need:

        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="http://www.google.com/jsapi"/>
        <script type="text/javascript">
            google.load('visualization', '1', {packages: ['corechart']});
            google.load('visualization', '1', {packages: ['geochart']});
        </script>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"/>
        <script type="text/javascript" src="js/smlm.js"/>
        <script>
        $(document).ready(function () {
              loadSMLM(1,'page',0,true);
        
        });
        </script>

And somewhere in the body of the page:

        <div id='smlm_main'>loading...</div>

the code breakdown

First line is the import of the smlm style sheet – pretty standard stuff.

        <link rel="stylesheet" type="text/css" href="css/style.css" />

The next block of code is required to create the fancy graphs and maps. All this is imported from the nice folks down at Google. Please do not change anything here.

        <script type="text/javascript" src="http://www.google.com/jsapi"/>
        <script type="text/javascript">
            google.load('visualization', '1', {packages: ['corechart']});
            google.load('visualization', '1', {packages: ['geochart']});
        </script>

Next – the standard jQuery import. You may want to use a more upto date jQuery file if avaliable.

        <script type="text/javascript" src="js/jquery-1.4.2.min.js"/>

And finally in the header section (inside the head tag), the import of the actual smlm javascript file, the standard jQuery "document ready" opener and the basic smlm function call (I’ll explain the functions in a moment) 

        <script type="text/javascript" src="js/smlm.js"/>
        <script>
        $(document).ready(function () {
              loadSMLM(1,'page',0,true);
        
        });
        </script>

Then in the body of your page you need the actual smlm container. Please keep the name of this container as “smlm_main” – in future versions I’ll try to allow you to name the container whatever you like. 

        <div id='smlm_main'>loading...</div>

explaining the loadSMLM function

As SMLM works with both dyanmic data driven websites and static content I'll take some time to explain how the loader function (loadSMLM) works in both cases (data driven and static content).

Let's look at all the parameters: (this is mainly for static websites but dynamic content owners should read this too)

First: this is the page or “content” ID value. So, for example, if your site hosted videos and the video ID value was “sJHjh767” then this is what should go in here for that particular page.

Second: this is the “content type” value. Now say that you had an awesome website that hosted videos and images. Now there is a chance that you may have a video and an image with the same ID value. This parameter allows you to prevent any clashes by allowing you to state a “content type”.

So you could have 

loadSMLM(“3287oIUYy”,”video”,0,true);

and

loadSMLM(“3287oIUYy”,”images”,0,true);

Third: just set this to zero (0) for now – in future editions it will control the time scale of the stats.

Fourth: set this to true if you want to load the page insights. Set it to false and only the user voting section will load.

for data driven sites

Okay, now the fancy stuff. Dealing with dynamic content, IDs and types.

Hopefully you’ve read the section above, if not, then do so now.

If you have a data driven website then this is function call you need 

    loadSMLM(false,false,0,true);

That’s it!

Okay, so how does this work? Well, it searches the url string of your web page to workout all the settings it requires. So if your web page loads with a content type and content ID in the URL eg:

Mydomain.com/?id=83jJhsy&type=videos

Then SMLM will automagically find and process the stats & votes for you. If you are missing say the content type value, say because you only deal with one type of content then use this: 

loadSMLM(false,’video’,0,true);

One thing I must point out is that your URL must have “type” and “id” as the names for these values.

If it doesn’t then don’t worry. Just open up smlm.js in the index/js folder.

Now search & replace every instance of getUrlVars()['type'] and getUrlVars()['id'] renaming ‘id’/’type’ with your own field values.

So if your URL is like this

Mydomain.com/?contentid=83jJhsy&contenttype=videos

Then search and replace to this 

getUrlVars()['contenttype']
getUrlVars()['contentid']

Done!

fancy web 2.0 URLs

I know what you’re thinking now. “My site is awesome web 2.0 cool, it’s URLs look like this:”

http://www.mydomain.com/videos/8su87sKK

Well that’s fine and dandy and it will work with this but it’s not a feature that is currently “supported”. So you’ll have to do some tinkering.

Now I’ve done some of the base work on this in the smlm.js file in the function called ‘loadSMLM’ – see the parts that are “commented out”. Because there are so many ways this could work I could not code a catch all method. So you’ll have to play around with this.

Any changes you make in loadSMLM will also have to me made in the function called “vote”

If you are still having problems with this then as a last resort you can drop me an email for some help!

In future editions I will try to create a catch all system.

the configuration file

This is the configuration file settings for seeMeLikeMe.

variable values default value comments
IP_OR_USERID [IP/USERID] IP Set to IP to allow logged out users/visitors to vote once per IP address or USERID if you plan to limit voting to users who have signed in.
VISIT_TRACK [true/false] true Set to true if you want the SMLM insights to collect data on visits (session based visits - not IP based visits).
VIEW_TRACK [true/false] true Set to true if you want the SMLM insights to collect data on each page view - you must set VISIT_TRACK to true to make this work - ie both set to true.
IGNORE_INTERNAL_REF [true/false] false If you want insights to ignore your internal traffic then set this to true - make sure to set the next config setting too.
INT_DOM your domain 127.0.0.1 The internal domain to ignore for the setting above.

That's your lot. If you find any bugs or features you'd like to see in future editions then contact me asap