Youtube Style Share Button


Description: Youtubeにあるようなシェアボタン(クリックでボタンが出現する)を実装します。URL短縮も付いています。
Sample: demo
Tutorial: Youtube Style Share Button With URL Shortening using CURL
License: -

Sample





 
X






※UIサンプルですので実際には投稿できません。

Note

<script type="text/javascript">
 $(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();
	});
});
</script>

軽量で行けますね。

Related snippet :

  • Description: アニメーションしながら縦に開閉するアコーディオン式のパネルです。弾むようなエフェクトが可愛いですね。他のパネルを開くと元々開いていたパネルは閉じられ ...
  • Description: 画像を使わず、テキストでスタイリッシュなメニューやボタンを実装します。セレクトコンテンツやドロップダウンにも対応。クロスブラウザにも対応しています。 ...
  • Description: フォームがアクティブの時にラベルを外にスライドさせます。通常はアクティブ時に消えますが、外にだすことで、入力補助になりそうです。クロスブラウザにも対 ...
  • Description: フォームがアクティブでもうっすらとラベル要素を残すプラグインです。ユーザー入力補助の一環として。デモでも使われているようにログインフォームなんかに良 ...
  • Description: コンテンツスライダーにバリデーション付きのコンタクトフォームを埋め込んだもの。不備があるとチェックが付きます。順番も追えるのでユーザーとしても縦 ...
  • Description: Lightboxです。サイズ等もcssをいじること無く変更可能で、オーバーレイも素敵な印象ですね。画像だけでなく、フレームやAjaxなどにも対応して ...
  • Description: セレクトボックスを選択するとそれに応じたテキストボックスを出すスニペット。必要になって作りました。ずらーっと並んでいるより、こうして項目に応じてだし ...