Jul
17

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

Author ZeeShaN    Category AJAX, JQuery, PHP, Web Development     Tags , , , ,

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>

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


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.


  • 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
    CommentsLike
    • 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
      CommentsLike
      • 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
        CommentsLike
        • mey

          Nice job!!!!!!!

          October 21 2011
          CommentsLike

          • how to create login form, for web???

            October 16 2011
            CommentsLike
            • ZeeShaN

              welcome :)

              August 28 2011
              CommentsLike
                • ZeeShaN

                  you welcome :)

                  August 22 2011
                  CommentsLike

                  • very Useful Script,
                    Thanks for Sharing

                    August 20 2011
                    CommentsLike

                    • 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
                      CommentsLike








                      Enter your Email:

                      Click Here for Popular

                      Who I Am

                      Zeeshan Rasool

                      Software Engineer - PHP
                      Lahore - Pakistan

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

                      Categories

                      Tags

                      Comments