New Digg Style Follow Unfollow Application Using jQuery and PHP

Author: Zeeshan Rasool | Sep 20, 2010

AJAX, JQuery, PHP, Tutorials, Web Design

You know Digg has changed its style and layout and now I think it looks awesome. This time on 99Points, I create Digg Style follow/unfollow application. Which I tried to create same as original Digg look. Many users like my facebook style tutorials So this is a continues series of Digg style tutorials. I hope You will like it. I have used user IP to check followed or unfollowed. But you can do this in your required way. Please share this if you like and dont forget to subscribe by email.
Note: No spams and newsletters will be send to subscribers. Thanks !

[ad#co-7]

No Spams or Newsletters will be send to Subscribers.

[ad#ad-4]

Database Structure

CREATE TABLE IF NOT EXISTS `digg_follow` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `fullname` varchar(120) NOT NULL,
  `username` varchar(80) NOT NULL,
  `image` varchar(100) NOT NULL,
  `bio` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

--
-- Dumping data for table `digg_follow`
--

INSERT INTO `digg_follow` (`id`, `fullname`, `username`, `image`, `bio`) VALUES
(1, 'Zeeshan Rasool', '99Points', 'zee', '[ www.99Points.info ] \r\nWeb Developer, Blogger, Freelancer and Technology Lover.\r\nDIGG MY STORIES AND I WILL DIGG YOURS'),
(2, 'Designr Fix', 'designrfix', 'designrfix', 'Daily Inspiration and useful online Resources for Web Designers and Graphic Artists'),
(3, 'Smashing Magazine ', 'smashingmag', 'smash', 'Smashing Magazine (www.smashingmagazine.com) is an online magazine dedicated to designers and developers. Curated by editor-in-chief Vitaly Friedman.\r\n'),
(4, 'Designs Magazine (Designs Mag) ', 'designsmag', 'designmag', 'Digg my submitted stories and i will digg your stories and also Share stuff with me on IM.Drop links for diggs, reddit, twitter, stumbleupon, dZone etc !!\r\n'),
(5, 'Speckyboy Design Magazine ', 'speckyboy', 'specky', 'Speckyboy Design Magazine offers insightful tutorials, time-saving techniques, fresh and useful resources and inspirational art, covering web design and development, graphic design, advertising, mobile applications and even, the occasional Lego post.\r\n'),
(6, '10Steps.SG', 'johnsonkoh', '10step', 'Blog focusing mainly on Photoshop Tutorials. Apart from passing on some useful tricks and techniques, we will be providing interesting design news and great freebies.\r\n');

CREATE TABLE IF NOT EXISTS `digg_follow` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`fullname` varchar(120) NOT NULL,

`username` varchar(80) NOT NULL,

`image` varchar(100) NOT NULL,

`bio` text NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

-- Dumping data for table `digg_follow`

INSERT INTO `digg_follow` (`id`, `fullname`, `username`, `image`, `bio`) VALUES

(1, 'Zeeshan Rasool', '99Points', 'zee', '[ www.99Points.info ] \r\nWeb Developer, Blogger, Freelancer and Technology Lover.\r\nDIGG MY STORIES AND I WILL DIGG YOURS'),

(2, 'Designr Fix', 'designrfix', 'designrfix', 'Daily Inspiration and useful online Resources for Web Designers and Graphic Artists'),

(3, 'Smashing Magazine ', 'smashingmag', 'smash', 'Smashing Magazine (www.smashingmagazine.com) is an online magazine dedicated to designers and developers. Curated by editor-in-chief Vitaly Friedman.\r\n'),

(4, 'Designs Magazine (Designs Mag) ', 'designsmag', 'designmag', 'Digg my submitted stories and i will digg your stories and also Share stuff with me on IM.Drop links for diggs, reddit, twitter, stumbleupon, dZone etc !!\r\n'),

(5, 'Speckyboy Design Magazine ', 'speckyboy', 'specky', 'Speckyboy Design Magazine offers insightful tutorials, time-saving techniques, fresh and useful resources and inspirational art, covering web design and development, graphic design, advertising, mobile applications and even, the occasional Lego post.\r\n'),

(6, '10Steps.SG', 'johnsonkoh', '10step', 'Blog focusing mainly on Photoshop Tutorials. Apart from passing on some useful tricks and techniques, we will be providing interesting design news and great freebies.\r\n');

CREATE TABLE IF NOT EXISTS `digg_follower_ip` (
  `userip` varchar(200) NOT NULL,
  `digg_id` int(11) NOT NULL,
  PRIMARY KEY (`userip`)
)

CREATE TABLE IF NOT EXISTS `digg_follower_ip` (

`userip` varchar(200) NOT NULL,

`digg_id` int(11) NOT NULL,

PRIMARY KEY (`userip`)

)

JQuery Code

$(document).ready(function() { 

		$('.buttons > a').livequery("click",function(e){
			
			var parent  = $(this).parent();
			var getID   =  parent.attr('id').replace('button_','');
			
			$.post("follow.php?id="+getID, {

			}, function(response){
				
				$('#button_'+getID).html($(response).fadeIn('slow'));
			});
	});	
});

$(document).ready(function() {

$('.buttons > a').livequery("click",function(e){

var parent = $(this).parent();

var getID = parent.attr('id').replace('button_','');

$.post("follow.php?id="+getID, {

}, function(response){

$('#button_'+getID).html($(response).fadeIn('slow'));

});

HTML

<?php  
include("dbcon.php");

$userip = $_SERVER['REMOTE_ADDR'];

$result = mysql_query("select * from digg_follow order by id asc");

while ($row = mysql_fetch_array($result))
{?>
	<div class="digg-panel">
		
		<div class="img-username">
		
			<img alt="<?php  echo $row['username']?>" src="<?php  echo $row['image']?>.png" width="40" height="40" class="userImage" alt="" />
			<div class="user-title">
				<a href="http://digg.com/<?php  echo $row['username']?>" class="fullname"><?php  echo $row['fullname']?></a>
				
				<a href="http://digg.com/<?php  echo $row['username']?>" class="username"><?php  echo $row['username']?></a>
			</div>
		</div>
		
		<?php
		$res = mysql_query("select * from digg_follower_ip where userip = '$userip' AND digg_id = ".$row['id']);
		
		$check_result = @mysql_num_rows(@$res);
		
		if($check_result > 0)
		{?>
			<span class="buttons" id="button_<?php echo $row['id']?>"><a class="btn-following" href="javascript: void(0)"></a></span>
			<?php
		}
		else
		{?>
			<span class="buttons" id="button_<?php echo $row['id']?>"><a class="btn-follow" href="javascript:void(0)"></a></span>
			<?php
		}?>
		<br clear="all" />
		
		<div class="bio">
		<?php  echo $row['bio']?>
		</div>
		
	</div>
<?php  
}?>

<?php

include("dbcon.php");

$userip = $_SERVER['REMOTE_ADDR'];

$result = mysql_query("select * from digg_follow order by id asc");

while ($row = mysql_fetch_array($result))

{?>

<img alt="<?php echo $row['username']?>" src="<?php echo $row['image']?>.png" width="40" height="40" class="userImage" alt="" />

<a href="http://digg.com/<?php echo $row['username']?>" class="fullname"><?php echo $row['fullname']?></a>

<a href="http://digg.com/<?php echo $row['username']?>" class="username"><?php echo $row['username']?></a>

</div>

<?php

$res = mysql_query("select * from digg_follower_ip where userip = '$userip' AND digg_id = ".$row['id']);

$check_result = @mysql_num_rows(@$res);

if($check_result > 0)

{?>

<?php

}

else

{?>

<?php

}?>

<?php echo $row['bio']?>

</div>

<?php

}?>

CSS

#content{ width:600px; margin-left:80px;}

.digg-panel{ border-bottom:1px solid #CCDCEF; min-height:100px; width:450px; margin-bottom:10px;}

.digg-panel .bio{ 
	width:320px; margin-left:50px;clear:left;
	color:#666666;
	letter-spacing:-0.03em;
	overflow:hidden;
	font-family:Arial, Helvetica, sans-serif;
	line-height:1.16667em;
	font-size:11px;
	padding-bottom:5px;
	}

.digg-panel .img-username{ float:left; width:340px; vertical-align:top}

.digg-panel .img-username img.userImage{ float:left;-webkit-border-radius: 5px;}

.digg-panel .buttons a{ margin-top:10px;}

.digg-panel .buttons .btn-follow{ display:block; background:url(follow.png) top center no-repeat; height:38px; width:67px; float:right;}

.digg-panel .buttons .btn-following{ display:block; background:url(following.png) top center no-repeat; height:38px; width:103px; float:right;}

/*.digg-panel .buttons a:hover{ border:solid #333333 1px;}*/

.digg-panel .user-title{
	font-weight:bold;
	margin-bottom:3px;
	padding-left:10px;
	float:left;
}
.digg-panel .user-title a.fullname{
	color:#373529;
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	font-size:1.0em;
	text-decoration:none;
}
.digg-panel .user-title a.username{
	color:#105CB6;
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	text-decoration:none;
	font-size:0.7em;
}
.digg-panel .user-title a:hover{
	text-decoration:underline;
}

#content{ width:600px; margin-left:80px;}

.digg-panel{ border-bottom:1px solid #CCDCEF; min-height:100px; width:450px; margin-bottom:10px;}

.digg-panel .bio{

width:320px; margin-left:50px;clear:left;

color:#666666;

letter-spacing:-0.03em;

overflow:hidden;

font-family:Arial, Helvetica, sans-serif;

line-height:1.16667em;

font-size:11px;

padding-bottom:5px;

}

.digg-panel .img-username{ float:left; width:340px; vertical-align:top}

.digg-panel .img-username img.userImage{ float:left;-webkit-border-radius: 5px;}

.digg-panel .buttons a{ margin-top:10px;}

.digg-panel .buttons .btn-follow{ display:block; background:url(follow.png) top center no-repeat; height:38px; width:67px; float:right;}

.digg-panel .buttons .btn-following{ display:block; background:url(following.png) top center no-repeat; height:38px; width:103px; float:right;}

/*.digg-panel .buttons a:hover{ border:solid #333333 1px;}*/

.digg-panel .user-title{

font-weight:bold;

margin-bottom:3px;

padding-left:10px;

float:left;

}

.digg-panel .user-title a.fullname{

color:#373529;

font-family:Arial, Helvetica, sans-serif;

display:block;

font-size:1.0em;

text-decoration:none;

}

.digg-panel .user-title a.username{

color:#105CB6;

font-family:Arial, Helvetica, sans-serif;

display:block;

text-decoration:none;

font-size:0.7em;

}

.digg-panel .user-title a:hover{

text-decoration:underline;

}

Download all the files and use this stylish tutorial. Thanks !
[ad#co-3]

Zeeshan Rasool is the founder and editor of this blog. Beside this, he is an experienced PHP web developer and freelancer. He loves to create best and interactive web apps. You can follow him at twitter @99_Points and facebook OR drop an email at 99points.info@gmail.com

Guest

hhhhhhhhhhh

New Digg Style Follow Unfollow Application Using jQuery and PHP

No Spams or Newsletters will be send to Subscribers.

Database Structure

JQuery Code

HTML

CSS

Categories

Popular post

Friends

New Digg Style Follow Unfollow Application Using jQuery and PHP

No Spams or Newsletters will be send to Subscribers.

Database Structure

JQuery Code

HTML

CSS

Few More Brilliant Posts !

Categories

Popular post

Friends