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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
$(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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//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
|
1 |
1 thought on “Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP.”
Comments are closed.