Search Here

Thursday, 28 July 2016

How to Build Your Own Social Networking Website

As of today, there are quite a good number of social networking platform exist- commercial, cloud-based and open source. We will see the list of available platforms, but will pick the best one for building our own.

1. Elgg

An award-winning social networking engine. Completely open source, PHP based and very powerful. Elgg powers networks for a wide range of organizations including Australian Government, British Government, Wiley Publishing and many more.

2. CommunityEngine

A free, open-source social network plugin for Ruby on Rails applications. Drop it into your new or existing application, and you’ll instantly have all the features of a basic community site.

3. SocialEngine

Commercial and very powerful. Available as cloud or self-hosted solution. We will probably not look at this.

 4. Ning

Commercial but cheaper than SocialEngine. Built from the ground up for social, Ning’s scalable hosted platform gives you the tools and expertise you need to publish and connect with your community.

5. phpFox [updated]

Commercial and ready to go  social network for your business. It is modular based allowing you to easily plug-in or plug-out a feature with a click on a button. This allows developers to easily develop new and awesome features to further extend your communities capabilities.
Okay, enough talk about existing solutions, what we are really interested in is to build our own social networking website and show off to our friends. So let’s begin – and yes as we said, we will always go with the best one instead confusing users with some sort demo of all. From the above list, Elgg is the one for us.

 1. Setting Up Development Environment

Since Elgg is a PHP-based social networking platform which uses MySQL as back-end,  to get started with it; we need to setup a PHP based development environment on our local system. Once you have built and configure the complete solution and you feel that it’s ready to go live, we will point you to our article on how to make it live on internet. Follow the following steps to setup your PHP development environment –
  • Download and install XAMPP for your platform from here. It has all required component for setting up PHP development environment.
  • Open XAMPP control panel from start menu and enable Apache and MySql services.
XAMPP control panel
XAMPP control panel

  •   Open http://localhost in you browser. You will see a splash page of XAMPP, select your language and it will open XAMPP web admin panel.
XAMPP web control panel
XAMPP web Admin panel
If you are seeing that page than well done you have setup your development environment.
There is one important thing we should never forget to do is to check the security settings. Click on the security link on the left sidebar of the admin panel. You will see that MySQL has root user but no password and hence showing insecure –
xampp-security-page
xampp security page
Let’s secure MySQL by clicking on the link http://localhost/security/xamppsecurity.php and setting up the password for MySQL root user –
mysql password setting
mysql password setting
Once you set the password for MySQL. Restart the MySQL service from XAMPP control panel and come back to the security page. You will see that now it’s secure. Remember the password you have setup because you will need it while installing Elgg.
security enabled
security enabled
Alternatively you can also watch this video:

 2. Installing Elgg

Download the latest Elgg package from https://www.elgg.org/download.php. Extract the downloaded zip file and rename the extracted folder to the name you want to give to your social networking website e.g. mysocialnetwork
elgg folder renamed
Now open your XAMPP directory and move to htdocs folder and copy the above mysocialnetwork folder here.
htdocs - web root directory
htdocs – web root directory
Now go to your browser and type http://localhost/mysocialnetwork, you will see following page
Elgg-Install
Elgg-Install
Follow the installation wizard and setup your social network –

Requirement Check –

requirments check
requirments check
If requirements check is okay you can move to next step.

Database Installation –

We already setup password for our database root user. We will now use these settings but before that go back to your XAMPP admin panel and click on the phpMyAdmin link on the left sidebar under Tools section. phpMyAdmin is web-based front-end for our MySQL database. Login to phpMyAdmin using root user and your password, it will open following page where we can manage your databases –
phpMyAdmin
phpMyAdmin
Now create a database for your social networking website which we will use in database installation setup of Elgg. e.g. we create mysocialnetwork database.
create database for your social network
create database for your social network
In database installation step of the Elgg installation wizard fill up the required fields and click next –
database setup
database setup

Configuring Site –

In this step give your social networking website a Name. If you have a mail server on your local you can give some mail address for now just give admin@yourmailserver.com. For the data directory create a directory to store your social networking data and give the absolute path here. e.g.we created mysocialnetworkdata in c:\
configuring site
configuring site

Create Admin Account –

You will need a master admin account to manage your website. With this account you can control your social networking website, it’s users and contents. Create an admin account and click next –
create admin account
create admin account

Get Ready For Awesome –

If you are seeing the following page, then everything is fine and you are a click away to see your awesome social network. Grab a beer and click on “Go to site” 🙂
finished
finished

 3. First Look at Your Social Network

You have setup your development environment, installed and configured your social networking website. It’s time you see how it looks. On the administration page, click on visit site link present at right side of the top bar –
first look
first look

 4. Administration

You have your own social network website up and running. Now you can use the administration panel to make this site as you want. You can change the look and feel, functionality, add plugins for more features and much more. Admin panel can be accessed at http://localhost/mysocialnetwork/admin with the credentials you have created while installing Elgg.
administrator panel
administrator panel
Managing Elgg and explaining every functionality is a huge topic and out of scope of this article. But we will give you enough resources, tutorials, books and examples to help you out in building your next great social network.
e.g. Let’s change you site theme to look like facebook
mod folder
mod folder
  • Enable it from Administration Panel
administration panel enable facebook theme
enable facebook theme
  • Click on visit site link and you will see that your site now looks like old facebook. Please remember that this plugin is very old and not been updated so you might see errors in it because new Elgg version is not compatible with it. We have used it just for demonstration purpose –
facebook-theme-enabled-on-site
facebook theme enabled on site

Here are some useful resources that will help you build your Elgg site further –
Learning Resources:
Official Documentation
Recommended Books:
Elgg Social Networking – Mayank Sharma
Elgg 1.8 Social Networking: Cash Costello