New Digg Style Follow Unfollow Application Using jQuery and PHP

Author: Zeeshan Rasool | Last updated on January 4th, 2011

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]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com

Guest

hhhhhhhhhhh

Author of 99Points
Zeeshan Rasool is an experienced PHP full-stack Web Developer and founder at 99Points. Expert in MVC (Codeigniter, Laravel), WordPress, Bootstrap, ReactJS, JSON, CSS jQuery & HTML5

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

Recommended WordPress Themes Store

Categories

Popular post

Author of 99Points Zeeshan Rasool is an experienced PHP full-stack Web Developer and founder at 99Points. Expert in MVC (Codeigniter, Laravel), WordPress, Bootstrap, ReactJS, JSON, CSS jQuery & HTML5

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 !

Recommended WordPress Themes Store

Categories

Popular post

Author of 99Points
Zeeshan Rasool is an experienced PHP full-stack Web Developer and founder at 99Points. Expert in MVC (Codeigniter, Laravel), WordPress, Bootstrap, ReactJS, JSON, CSS jQuery & HTML5