Youtubeにある「共有ボタン」っぽいUIをjQueryを使って実装出来る・Youtube Style Share Button

Ads

Youtubeのソーシャルサービスへの
投稿ボタンっぽいUIをjQueryで実装
したYoutube Style Share Buttonの
ご紹介です。クリックするとソーシャル
サービスへの投稿ボタンが入ったbox
が表示されるアレです。同様に短縮
URL機能もPHPで再現されています。

Youtubeのソーシャルボタン、と言われても僕はあまりピンと来ないんですが、便利は便利なのでご紹介。短縮URL機能はPHPでやってるみたいです。

Youtube Style Share Button


上記はYoutubeの共有ボタンです。これそっくりの共有ボタンをjQueryで実装します。

サンプル


日本向けに内容を変更してサンプルを実装しました。IE6~8でも動作しますがcssの調整が必要です。サンプルは調整していませんので動作はIE以外でのご確認をおすすめします。

サンプル

短縮URLは可能ですが、Twitterの投稿ボタンでそのURLを投げる等は出来ません。本家Youtubeは公式Tweetボタンなんですね・・

短縮URLはtinyurlが使われていますが、お好きなサービスに変更する際はgetShortLink.phpの中身を変更してあげてください。以下よりDL出来ます。

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