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_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'));
			});
	});	
});

HTML

	

		
		

		
			
			

				
				
				
			
		
		
		 0)
		{?>
			
			
			
			
		

		
		

		
		
		
	

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;
}

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