Social-Network
From OneBuckWiki
Contents |
Social-Network
They are all the rage at the minute and can be useful for traffic as well as networking, I have previously picked out just 50 of them before. I also have a couple myself Blogsrecord is a social blog directory, Stemble is a stumble and review exchange site and gottoread is a site I just set up that will be used for creating traffic to your blog through interaction and becoming popular. I used joomla and dolphin to create my sites but did you know you can do it for free using just your blog with a few plugins and tweaks.
More...
Over the next few days I will show you how you can change wordpress into a social network for free, using a bit of tweaking and a few plugins. Its going to be a quick series as once I started to write this post I realised it was going to be a long one so I have split it up.
Why a Social Network
They are widely used and if yours takes of it will just draw the traffic in, blogsrecord has nearly 350 members and over 400 blogs listed, but there are downsides to having one.
Before we get started on turning your blog into one you must know some reasons why you wouldn't want one.
* Long Hours - Promoting, bug finding, answering emails * Promotion lasts for ever - You can t let up on promotion even with hundreds of members, until you get into the thousands its promotion everyday and can get repetitive. * Can Make You Depressed - Blogsrecord was succesful to start with and still is but when you go from 30 signups a week to just 1 or 2 it can make you depressed and make you want to quit. * It gets tiresome answering the same questions over and over * It may not be a success - Be prepared to do a lot of work for no reward * Its not a money maker to start with * You will have members who spam all the time * Be prepared to spend all your time on the site * You most likely won't be an overnight success * Numerous other reasons but there can be some rewards
Benefits
* See some fantastic blogs * Meet lots of fantastic people * Learning how to use new software * Learning how to track bugs and eradicate them * Your online social life takes of * Can earn you money (be warned Im about 400 pounds down with blogsrecord)
Why Not Use Software Already Available
You could start afresh with a new domain name, new setup, fresh software, paid for plugins, new template. But why go through it all if you have a blog drawing in traffic, has a template ready, a domain name, software already there besides the plugins that you will need to add.
You may want to add some interactive features to your blog something to make you stand out, a forum could do that or a contact form is an example of a little interactive feature for your blog.
Getting Started
If you have got this far you either not fallen asleep or you want to spruce up your blog with some interactive features. The main stay of a social network to me seems to be user images, why?, for a start they show more than just a text name like you get in a normal blog, for example the picture of someone who writes a post is a lot better than simply 'admin wrote' there are numerous plugins out there for adding images to commentators like gravatars and sexy comments but for a social blog you want members to add an image to their profile. Anyone can have a profile on wordpress by signing upto your blog, readers automatically get a basic profile page, but you need to alter what the reader can do with your site and the basic setup of wordpress doesn't allow for a lot of changing from the basic 'author,subscriber e.t.c' format. We will cover user roles a bit more later on.
Adding Images
To have the member add an image from within their profile we need to add a plugin that will allow members to upload an image to their profile rather than using 3rd party tools to intergrate avatars from other places. Not everyone is a member of gravatars or mybloglog, so we need a way for a member to have a choice of what avatar they want to use, what better way than to allow them to uplad their own and use that.
For this we will use Dans Avatar Thingy
As normal use the following to upload and activate the plugin, regualar users will have seen this before but for those who are new here I will add it so you can see how to add a plugin if you have never done this before. Later in the post you can just come back to this part so you can use it again if you forget what to do.
Simply download the plugin and unzip it to a folder on your desktop. Ive created a folder called ‘MattNutts’ everything I will use for this site will be kept in that folder so its easy to get to and I know where everything is.
For this you will need an ftp transfer programme so you can upload the unzipped files to your webserver I use CuteFTP but there is plenty of others out there.
Simple steps to add the plugin and get it working.
1 Click on the link to download the file then extract the files to the folder you have created for the files.To create a folder right click the desktop and select new and then folder.
2 Start up your ftp software and enter the details for your server, these will most likely be Username, Host, Password and Site Name.
3 You need to upload the files to /wp-content/plugins if you have installed wordpress into a subfolder other than the Site Root (the first area your ftp will find) you will need to browse to it, it could be something like - wordpress/wp-content/plugins. The easiest way to tell if you are using a subfolder is to browse to your wordpress homepage for mine I just type in http://mattnutts.com yours could be the same but your site name or it could have extras after it like .com/wordpress or .com/myblog
4 When you see the folder open it so you are inside your plugins folder on your server then select the simple-forum folder and drag it over to the plugin folder, the upload should start and everything will transfer over.
You can then activate the plguin from the admin area on wordpress, to do this goto Plugins then choose Activate next to 'Dan's Avatar Thingy'
To get the avatar to display you have to edit your template file, not the easiest thing to do but if you follow what I put here you should have no problems, most templates have the same sort of layout and it should be easy to find the part you want to change.
You can alter what template files you want (index.php and comments.php in your template folder)… To display the avatar add the command cmd_show_avatar() anywhere within the post or comment loops… <?php if(function_exists('cmd_show_avatar')){ cmd_show_avatar(); } ?>
On this site, for example, the command is in the sameFor example to alter the main index page you would do the following goto 'Presentation' 'Theme Editor' and then choose Main Index Template (index.php:
Main Index Template (index.php)
<?php get_header(); ?><?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_date(,'','
'); ?><div class="post" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><?php if(function_exists(’cmd_show_avatar’)){ cmd_show_avatar(); } ?>
You can alter this for example to have the avatar displayed over the top of the post it goes after <?php while (have_posts()) : the_post(); ?> but you can have a try at doing it in different places to suit your needs.
You can do this for your comments, single post e.t.c as well, the 'if (function_exists(' part will only display an avatar if there is one available.
To add an avatar all a member has to do is go to their profile and choose the 'Your Avatar' tab to upload or change their avatar. By default the avatar sizes are altered to 40x40 pixels which I find to be about right but if you need a different size you need to alter the cmdavatar.php file you uploaded and change the values:
$def_width = 40; // Default avatar width $def_height = 40; // Default avatar height
change them then re upload the file as you did before, max upload size is set as 50kb to change this alter the following in the same file
$max_upload_size = 51200; // Max file size in bytes
Change 51200 to the anything you want in bytes (1024 bytes = 1 kbyte and 1024 kbytes = 1 Mbyte)
You can alter the position using cms by adding a cmd-avatar class to your style sheet like the following
.cmd-avatar { clear: none; border-right: #687F92 1px solid; border-top: #687F92 1px solid; display: inline; float: right; margin: 5px; border-left: #687F92 1px solid; border-bottom: #687F92 1px solid; }
I have added this to my stylesheet through 'Presentation' 'Theme Editor' in the admin area on my wordpress. It shows the avatar to the right of the title as you can see in this post.
Thats it your members now have their own avatar of their own choosing that can be used throughout your blog and in multiple ways which we will cover in later parts.
So come back soon, most likely in a couple of hours for further information on turning your wordpress blog into a social network.
The good thing is you can chop and choose what parts you want from this series, you may just want the avatars, or to have a private messaging. You don't have to do everything, you can just use the parts you want to add an extra feel to your blog.
Subjects to follow in this series over the next few days include;
* Adding Private Messaging * Hiding the normal login page * An Extra Sidebar for Members * Members Being Able To Add Friends * Having better user roles * Members publishing posts from the front end without the need for entering the admin area * Plus lots, lots more
To get try the avatar uploading just register to this blog and follow the instructions I gave before to add your own. Soon you will see the avatar in any comments you make or even in any posts you want to offer in the future.
Part 2
You have your members adding their avatars now as we covered in the first part
But what do we need now, every social network has some sort of communication between members going on, and for this project nothing will change. We want members to be able to send messages to each other as well as to the administrator.
Why?
For a start it promotes interaction between members and if someone is friends with another member they don't want to be sending email after email which can get a bit boring .
More...
* Promote interaction between members * Promote friendship * More private than emails * Easier than emails * Alot more private than comments
The Setup
The plugin we will use is simple to use and does everything you would expect.
XDTalk has a great backup forum for any problems you may get and I can't answer.
Upload the plugin to your wordpress installation using the following.
Simply download the plugin and unzip it to a folder on your desktop. Ive created a folder called ‘MattNutts’ everything I will use for this site will be kept in that folder so its easy to get to and I know where everything is.
For this you will need an ftp transfer programme so you can upload the unzipped files to your webserver I use CuteFTP but there is plenty of others out there.
Simple steps to add the plugin and get it working.
1 Click on the link to download the file then extract the files to the folder you have created for the files.To create a folder right click the desktop and select new and then folder.
2 Start up your ftp software and enter the details for your server, these will most likely be Username, Host, Password and Site Name.
3 You need to upload the files to /wp-content/plugins if you have installed wordpress into a subfolder other than the Site Root (the first area your ftp will find) you will need to browse to it, it could be something like - wordpress/wp-content/plugins. The easiest way to tell if you are using a subfolder is to browse to your wordpress homepage for mine I just type in http://mattnutts.com yours could be the same but your site name or it could have extras after it like .com/wordpress or .com/myblog
4 When you see the folder open it so you are inside your plugins folder on your server then select the xdtalk folder and drag it over to the plugin folder, the upload should start and everything will transfer over.
Once this is done head over to your wordpress admin area and activate the plugin, you will see some errors as the database hasn't been created yet so head over to Manage and then click on XD Talk Admin save the settings and the database will becreated and the errors will be gone.
You can now alter the settings before you add the code to the sidebar, so you may want to alter the colours that will appear in the sidebar, the colours seperate the list so you can see which members are active and which are not. The cours can be changed using something like 'light blue' or hex for the colour ie, #ff0000 . This can be useful for getting the cours to match your site and make it easy to spot who is online and who isn't.
To get the code to appear in the sidebar is
<?php if (function_exists(”xdtalk_echo_sidebar_setup”)){ xdtalk_echo_sidebar_setup(); } ?>
It may work for you it may not for my theme I had to edit the sidebar and add the following
<?php xdtalk_echo_sidebar_setup(); ?>
Its only a simple messaging system but I will cover more in future posts on how to make this an exceptional piece of kit for your blog.
At the moment members get a popup box with the chat if someone messages them, you can see who is online and via the colours how long it has been since they were around red being active and blue being cold, with various colours inbetween.
Wordpress has that awful login page for your Members, just a blue box with the login. It doesn't look right with the rest of your site. Add to that the fact it pops up during registration and if you have forgot your password.
Why Not Leave It As It Is?
Don't get me wrong its fine if you just want to keep your blog as it is, but if you have multiple authors or you want that social network you will be better of keeping it hidden, it doesn't look right and looks very basic.
More...
* It is more professional * Saves going to the backend if its not needed * Looks better within your layout * Better for Multiple Author Blogs * Easier to use * Looks part of the Blog
What To Do?
There is really 2 parts for this for this post we will cover the first part. We will cover the following.
* Hiding the login area * Putting the login area into the template * Ways to use the new login * Redirecting Login
What Will We Use?
There is a handy plugin for wordpress that can hide the login area and keep everything from the frontend, the plugin is Themed Login Page
Its quite indepth and offers everything we need to create a unique login page.
The Setup
For a start download and upload the plugin.
Simply download the plugin and unzip it to a folder on your desktop. Ive created a folder called ‘MattNutts’ everything I will use for this site will be kept in that folder so its easy to get to and I know where everything is.
For this you will need an ftp transfer programme so you can upload the unzipped files to your webserver I use CuteFTP but there is plenty of others out there.
Simple steps to add the plugin and get it working.
1 Click on the link to download the file then extract the files to the folder you have created for the files.To create a folder right click the desktop and select new and then folder.
2 Start up your ftp software and enter the details for your server, these will most likely be Username, Host, Password and Site Name.
3 You need to upload the files to /wp-content/plugins if you have installed wordpress into a subfolder other than the Site Root (the first area your ftp will find) you will need to browse to it, it could be something like - wordpress/wp-content/plugins. The easiest way to tell if you are using a subfolder is to browse to your wordpress homepage for mine I just type in http://mattnutts.com yours could be the same but your site name or it could have extras after it like .com/wordpress or .com/myblog
4 When you see the folder open it so you are inside your plugins folder on your server then select the themed-logreg.php file and drag it over to the plugin folder, the upload should start and everything will transfer over.
After uploading enter your wordpress backend and head over to 'Plugins' activate the plugin and choose 'Login Register Options' that will appear at the top.
For a start setup the Redirects I have the login redirect going to my home page http://mattnutts.com and the logout redirect should goto the login page.
Theme Settings
The next part is pretty tricky, set the first 3 to what you want, they don't need any explaining.
For the next few you should open a new page or tab and browse to Presentation - Theme Editor and then click on Main Index Page (index.php) in your admin backend.
The reason for doing this is so you don't have to go backwards and forwards between pages.
Template Header Files: For this one you should take a look at the code that you see on the template editor page, mine shows
<?php get_header(); ?>
<?php if (have_posts()) : ?>
You want everything that is before the have posts that links to a html or php file. I only have one <?php get_header(); ?> this means it links to header.php
You may have extra ones like <?php get_sidebar(); ?> or something else. See which ones you have and then add them to the Template Header Files part on the options, I would add header.php, put them in the order that they come so if you have
<?php get_header(); ?>
<?php get_sidebar(); ?>
you would add header.php (then press enter) and sidebar.php (<?php get_sidebar(); ?> changed to sidebar.php)
The next one is Template After Header HTML: this is everything after <?php get_header(); ?> and before <?php if (have_posts()) : ?> Mine as said before looks like this
<?php get_header(); ?>
<?php if (have_posts()) : ?>
So I would add<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php if (have_posts()) : ?>
you would addTemplate Before Footer HTML: For this you need to add everything between<?php endif; ?> and <?php get_sidebar(); ?>
this is mine
<?php endwhile; endif; ?>
<?php get_sidebar(); ?> <?php get_footer(); ?>
So I will add all of the bold highlighted text to the box, for ease of use I press enter after each function so it looks like the following in the box
Template Footer Files: This is the same as the header one, everything after the lastThats the hard part over, all the rest of the options explain themselves and you can customize them to your needs.
After you have finished save the options by choosing 'update options', logout of admin and goto your blogs home page and choose login under your meta on your sidebar you will be redirected to your login page within your frontend rather than the box you would normally get. If you login as admin you will be redirected to the admin area. So try signing up under a fake name and see what happens, everything is kept within the blog.
Later in the series we will look at keeping them on the blog frontend for profile updating and adding extra fields to the registration.
So come back soon.
Technorati Tags
Who's Online Right Now: Guests: 190 Registered: 1 (JackKangqi88 )