• かちびと.net

    Youtubeにある「共有ボタン」っぽいUIをjQueryを使って実装出来る・Youtube Style Share Buttonのご紹介。Youtubeライクな共有ボタンのUIを真似たjQueryプラグインです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services