Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP.
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
HTML
31 to “Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP.”
Post comment
Categories
- AJAX (28)
- Announcement (3)
- Blogging Tips (1)
- Codeigniter (16)
- CSS (14)
- Facebook (8)
- Freelance Tips (1)
- How-To (2)
- Joomla (1)
- JQuery (51)
- Miscellaneous (3)
- Mootools (1)
- MySQL (3)
- PHP (57)
- SEO (2)
- Technology (6)
- Tutorials (17)
- Twitter (2)
- Web Design (26)
- Web Development (58)
- WordPress (3)
Popular post
- 46 Highly Responsive Admin Templates for Your Websites
- $50 PayPal Cash & 5 Premium PHP Wall Script Prizes #Giveaway
- PHP Wall Script Clone with Real Time Features __ January 2013 Release __
- Things you should know if you are a Blogger
- Top 10 Must Have Qualities of a Freelance Web Developer
- Fundamental Factors for Mobile Compatible eCommerce Hosting
- Facebook Wall Script New Version in September 2012
Recommend
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
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.
[...] Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP. [...]
@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
[...] http://www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-an… [...]
can i use a different api like PHURLS.com or something.. i just need to take my own getshortlinks.php
Well, MACHBIO, I didn’t check with that. So I have no idea about it. You need to have a try.
[...] Demo Download [...]
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
thanks Micha, its updated now
Awesome scripts. Nice work. Thanks. I am going to download and use.
everyone is addicted to youtube, and everyonle like to upload videos on youtube.:~
[...] Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP. [...]
[...] Youtube Style Share Button With URL Shortening using CURL [...]
Hi, first thank you for great script!
I don’t have a lot experience with JS and PHP, so could anyone help me, how to integrate Goo.gl instead of Tinyurl? Thank you very much!
Thanks milanzitka
I didnt use goo.gl but why you want to use goo.gl instead of tinyurl?
Well, I’m just big fan of everything from Google and IMHO goo.gl links are shorter and “nicer” than tinyurl.
‘:` I am really thankful to this topic because it really gives useful information ~..
[...] 21. Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP [...]
[...] Demo Download [...]
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!
very Useful Script,
Thanks for Sharing
you welcome
i like this… thanks for sharing
welcome
how to create login form, for web???
Nice job!!!!!!!
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?
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
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.
[...] 43. URL Shortening using CURL, jQuery and PHP [...]