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>

50 CSS techniques and Tips which you always n...

What is php.ini File and Why we use it?...

10 very Useful and most popular Joomla Extens...

JQuery Alert Dialog Boxes With Simple Demo...

Ajax Pagination: Fresh Ajax pagination using ...

By HackingEthics

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.

11 to “Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP.”

Avinash July 17, 2010 at 11:26 am
Cool way of using an API
what about the download link ? why do we have to wait to download the file, can’t we download it from this blog
Abdelhadi Touil July 20, 2010 at 11:02 am
Very nice tutorial! Thanks for sharing..
for the download link I think there are a lot of nice hosting service better than easy-share.com, except if you are using it for some reason (ads for example if there is…)
I suggest you use Skydrive from Microsoft, it’s 25Go for free, and without waiting to doanload, and you can upload up to 50 Mb per file.
Personaly I use it.
Thanks again and good luck.
185+ Breathtaking Collection of Fresh Articles for Web Designers and Developers | tripwire magazine July 20, 2010 at 6:23 pm
[...] Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP. [...]
ZeeShaN July 20, 2010 at 7:42 pm
@Abdelhadi Touil, thanks bro. I will fix the downloading problem within 2 or 3 days. You will see no more waiting in next coming days.
Thanks and keep looking for new tutorials

Regards,
Zee
Best Tutorials for Web Development » Blog Archive » Collective: Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP July 21, 2010 at 12:04 am
[...] http://www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-an... [...]
MACHBIO July 21, 2010 at 6:19 am
can i use a different api like PHURLS.com or something.. i just need to take my own getshortlinks.php
ZeeShaN July 21, 2010 at 11:50 am
Well, MACHBIO, I didn’t check with that. So I have no idea about it. You need to have a try.
jQuery tuts en inglés | gorkaerrea.com | diseño bilbao August 11, 2010 at 10:46 am
[...] Demo Download [...]
micha August 21, 2010 at 3:25 pm
sorry my last comment was for: http://demos.99points.info/ajax_star_rating/
your link “Back to tutorial” is wrong.. it points to this website
ZeeShaN August 21, 2010 at 3:27 pm
thanks Micha, its updated now
Hiran August 29, 2010 at 5:43 pm
Awesome scripts. Nice work. Thanks. I am going to download and use.