Jul

Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP.

ZeeShaN

These days every website must contain a section that is called “Share This”. After creating facebook style posting and youtube style rating system I have now come to share button. I have created youtube style share button with url shortening script. Try the demo and use this awesome tutorial on your web pages. Hope you will like this.

jQuery Code

 $(document).ready(function() {
        $('.share_button').mouseenter(function(e) {
			$('.tooltip').show();
            $('.share_this').fadeIn(200);
        }).mouseleave(function(e) {
			$('.share_this').fadeOut(200);
			$('.tooltip').hide();
        });
 
		$('.share_button').click(function(){
			$('#load_buttons_box').fadeIn();
		});	
    });
 
$(document).ready(function(){	
 
	$('#shortLink').click(function(){
 
		if($('#shortLink').is(':checked'))
		{
			$('#setURL').val($("#shareLink").val()); // to save previous link
			var a = $("#shareLink").val();
 
			$.post("getShortLink.php?value="+a, {
			}, function(response){
				$('#shareLink').val(response);
			});
		}
		else
		{
			$('#shareLink').val($('#setURL').val());
		}
	});	
 
	$('.close').click(function(){
		$('#load_buttons_box').fadeOut();
	});	
});

CSS

button {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	background:#F6F6F6 none repeat scroll 0 0;
	border:1px solid #CCCCCC;
	cursor:pointer;
	padding:5px;
	height:2.0833em;
	overflow:visible;
	vertical-align:middle;
	white-space:nowrap;
}
 
.share_button{background:url(share.png) center left no-repeat; padding-left:50px; }
 
.facebook_button{background:url(facebook.png) center left no-repeat; padding-left:20px; float:left }
 
.tooltip{ height:13px;display: none;width:120px; text-align:left;overflow:visible}
 
.share_this{
		display: none;
		font-size: 1.0em;
		height:17px;
		padding:7px;
		-moz-border-radius: 6px; 
		-webkit-border-radius: 6px;
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
		text-align: center;
		text-decoration: none;
		width:60px;
		background-color:#333333;
		color:#FFFFFF;
		text-shadow: #fff 0px 0px 20px;
	}
 
#load_buttons_box{ 
		border:solid #666666 1px; height:140px; 
		margin-top:19px;-moz-border-radius: 6px;
		display:none;
		padding-left:30px;
		-webkit-border-radius: 6px; width:500px;
		}
 
.twitter_button{background:url(twitter.png) center left no-repeat; padding-left:20px; float:left; margin-left:4px;  }
 
.buzz_button{background:url(buzz.png) center left no-repeat; padding-left:25px; float:left; margin-left:4px;  }
 
.bebo_button{background:url(bebo.gif) center left no-repeat; padding-left:21px; float:left; margin-left:4px;  }
 
.stumbleupon_button{background:url(stumbleupon.gif) center left no-repeat; padding-left:20px; float:left; margin-left:4px;  }
 
 
.share_button:hover, .facebook_button:hover, .twitter_button:hover, .buzz_button:hover, .bebo_button:hover, .stumbleupon_button:hover{
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
 
.mesgbox{
	padding-left:25px;  
	margin:5px;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; height:20px;  
	width:427px; float:left}
 
.close{ 
	border:solid #666666 1px; 
	float:left; 
	width:20px; margin-top:6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;  text-align:center; 
	font-size:12px; cursor:pointer; 
	background-color:0 1px 3px rgba(0,0,0,0.6);
}
 
.textBox{ 
	background:url(ico.png) center left no-repeat;
	height:22px;
	width:300px;
	padding-left:25px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
}
#shortLink{ 
	margin-top:10px;
	}
.textBox label{ cursor:pointer;}

getShortLink.php

<?php
//gets the data from a URL  
function get_tiny_url($url)  
{  
	$ch = curl_init();  
	$timeout = 5;  
	curl_setopt($ch,CURLOPT_URL,'http://tinyurl.com/api-create.php?url='.$url);  
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);  
	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);  
	$data = curl_exec($ch);  
	curl_close($ch);  
	return $data;  
}
 
function checkValues($value = '')
{
	$value = trim($value);
 
	if (get_magic_quotes_gpc()) {
		$value = stripslashes($value);
	}
	$value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES)));
	$value = strip_tags($value);
	return $value;
}	
 
if($_REQUEST['value'])
{
	$url = checkValues($_REQUEST['value']);
	echo get_tiny_url($url);
}
?>

HTML

<div align="left" style="margin-left:50px;">
 
	<div align="left" style="height:0px;">
		<div class="tooltip">
			<span class="share_this">
			Share this video
			</span>
		</div>
	</div>
 
	<br clear="all" /><br clear="all" />
 
	<button type="button" class="share_button" onclick=";return false;" id="like" >
	<span>Share</span></button>
 
	<br clear="all" />
 
	<div id="load_buttons_box">
 
		<div class="mesgbox">&nbsp;</div>
		<div class="close">X</div>
		<br clear="all" />
 
		<div class="textBox">
			<input type="text" name="shareLink" id="shareLink" value="http://www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php" size="60" />
			<input type="hidden" name="setURL" id="setURL" value="" />	
			<label><input type="checkbox" name="shortLink" id="shortLink" />Short URL</label>
		</div>
		<br clear="all" /><br clear="all" />
 
		<button type="button" class="facebook_button" onClick="window.open('http://www.facebook.com/sharer.php?u=http%3A//www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php&t=Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP','mywindow','width=800,height=500,left=0,top=0,screenX=0,screenY=100')" >
		<span>Facebook</span></button>
 
		<button type="button" class="twitter_button" onClick="window.open('http://twitter.com/home?status=Youtube Style Share Button using jQuery http%3A//www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php','mywindow','width=800,height=500,left=0,top=0,screenX=0,screenY=100')" >
		<span>Twitter</span></button>
 
		<button type="button" class="buzz_button" onClick="window.open('http://www.google.com/buzz/post?url=http%3A//www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php','mywindow','width=800,height=500,left=0,top=0,screenX=0,screenY=100')" >
		<span>Buzz</span></button>
 
		<button type="button" class="bebo_button" onClick="window.open('http://www.bebo.com/c/share?Url=http%3A//www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php&Title=Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP&TUUID=c583051f-6b2d-41ec-8dd0-a3a0ee1656c1&MID=8348657161','mywindow','width=800,height=500,left=0,top=0,screenX=0,screenY=100')" >
		<span>Bebo</span></button>
 
		<button type="button" class="stumbleupon_button" onClick="window.open('http://www.stumbleupon.com/submit?url=http%3A//www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php&title=Youtube%20Style%20Share%20Button With%20URL%20Shortening%20using%20CURL%20jQuery%20and%20PHP','mywindow','width=800,height=500,left=0,top=0,screenX=0,screenY=100')" >
		<span>StumbleUpon</span></button>
 
		<br clear="all" />
	</div>
</div>

Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

Most recent

Most liked

Show all comments (30)

saroj

hi the script is very nice. But some bug is there in captcha code validation. If we press submit without entering any character then its working fine but when we enter some character like “abcde” it is accepting and showing success message.

December 07 2011

Comments Like

0 people liked this

rohit singh

i should be want join your e mail id , i am working in php project ,major problem create so i want help u plz help me

November 30 2011

Comments Like

0 people liked this

Sal

I really like this work, along with the rating script as well. I would like to use both on the same page but every time I try to combine the two, when you click on the first item it opens the second as well. How can I use both side-by-side?

November 02 2011

Comments Like

0 people liked this

mey

Nice job!!!!!!!

October 21 2011

Comments Like

0 people liked this

arie

how to create login form, for web???

October 16 2011

Comments Like

0 people liked this

ZeeShaN

welcome

August 28 2011

Comments Like

0 people liked this

arie

i like this… thanks for sharing

August 26 2011

Comments Like

0 people liked this

ZeeShaN

you welcome

August 22 2011

Comments Like

1 people liked this

theadsbook

very Useful Script,
Thanks for Sharing

August 20 2011

Comments Like

0 people liked this

security system

I just now are in possession of encountered your blog post earlier liked working out already have definitely felt reviewing have in mind this amazing onto a routine. Afterward you have many of ideas right after then i indulge in try to get such online worlds success. Dancing most of the quality profession!

August 14 2011

Comments Like

0 people liked this

<< More Records

Who I Am

Zeeshan Rasool

Software Engineer - PHP
Lahore - Pakistan

zeeshan(@)99points.info
Skype: zeeshan-rasool
gTalk: zishan.rasool85

99Pointsin Web Technologies

Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP.

jQuery Code

CSS

getShortLink.php

HTML

Written by ZeeShaN

Who I Am

Categories

Tags

Comments

Friends