Twitterのロゴデザインにマッチしたかわいいアニメーションをつかったボタンを紹介します。 Animated Twitter Button [ad#ad-2] 実際のアニメーションは、こんな感じです
2012年 6月 13日 新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。 まぁ私もそんなに詳しいわけではないので断言できませんが。 ・訪問者はその数秒でサイトから逃げる ・Googleはその数秒を評価基準に入れる たしか遅延ロード(Lazy Load)とかいう技術ですね。 わりとポピュラーなコードで何とかなったので書いときます。 ピュアなJavaScriptではなく、jQuery使いますね。 方法その1 時限式読み込み body閉じタグの前あたりに書きます。 . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ここに、SNSのコードを書く' + '一行でつなげても良いが見に
ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 2012年05月17日- Koottam Social jQuery Plugin | Customized Facebook, Twitter, Google Buttons Using Cross Browser CSS3 ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 Twitter, Facebook, Pinterest, Google+ などのソーシャルシェア数を表示しつつデザインを統一できるjQueryプラグインです。 いろんなサイトのソーシャルボタンを設置するとどうしてもダサくなってしまうのですが、これを解決できますね。シェア数も表示できていいです 関連エントリ Facebook,Twitter,Google+の独自デザイン
Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。 Koottam Social jQuery Plugin [ad#ad-2] Koottamの主な特徴 Koottamのデモ Koottamの使い方 Koottamの主な特徴 Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。 7種類のテーマがあり、CSSベースでカスタマイズも可。 カウントの表示はスタティック・アニメーションに対応。 カラーは簡単に変更できます。 より大きいカウント用に省略表記も対応。 MITライセンスのため、あらゆるブログ・サイトに使用しても無料! Koottamのデモ
jOrbital - jQuery round menu 円形に広がるソーシャルシェアボタン実装jQueryプラグイン「jOrbital」 ソーシャルボタン限定というわけではなさそうですが、ボタンにカーソルを合わせると円形にメニューが広がる物が作れます カーソルを合わせるとアニメーションしながら円形にソーシャルボタンがカッコよく現れます 個人的に、なんかつい押したくなるデザインだなと思いました。 ボタン部分のマークアップも次のように見やすいです 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 かなりクールなjQueryのメニュープラグインやチュートリアル集 ページスクロールでついてくるメニューを実装&色々カスタマイズできるjQueryプラグイン「stickyFloat」 通知件数表示付きのメニュー実装jQueryプラ
デモページ:カスタム CSS Social Buttonsの使い方 このソーシャルメディアのボタンはピュアCSS3でもHTML5 Canvasでもなく、背景画像を使って実装するものです。これらのアイコンはクロスブラウザで、さまざまなデザインに利用できるよう広い用途を目的としたものです。 外部ファイル スタイルシートを外部ファイルとして記述し、画像フォルダをスタイルシートを同じ階層に設置します。 <link href="social-buttons.css" rel="stylesheet"> HTML テキストをa要素で内包し、classにボタンのスタイルを定義します。 「sb」を共通で、あとはスタイルを組み合わせて記述します。 <a href="#" class="sb orange twitter">Twitter</a> <a href="#" class="sb blue face
Facebook,Twitter,Google+の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」 2011年12月01日- Sharrre - A plugin for sharing buttons Facebook,Twitter,Google+の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」 どれだけシェアされたか、といった数値を表示しつつすべてのボタンのデザインし統一感をもたせることができます。 デザイナーさんならこうしたボタン部分もきっちりデザインしたい気になる人も多いのではないでしょうか。 テンプレートを独自に定義して引数として渡すことで独自デザインにすることができたりするようです。 以下、本プラグインを使って作られたサンプル集です。それぞれの具体コードもサイト上に掲載されているのでカスタマイズしちゃってもよさそうです
今日は2011/11/11、やたら「1」の並ぶ日付です。 11時11分にスクリーンショット撮り損ねてちょっとorzなhakoishiです。 いっそその時間に更新までしてしまいたかった!後の祭り。 さて、今回はソーシャルボタン設置のソースサンプルをいくつかご紹介。 今回取り上げるサービスは、「はてなブックマーク」「twitter」「facebook」「addthis」の4つです。 (2011/11/22)その2、アップしました。「google+」「mixiチェック」「mixiイイネ!」「evernote」編です。 引き続き、ソーシャルボタン設置のソースコードサンプルあれこれ。 はてなブックマーク <a href="【URL】" class="hatena-bookmark-button" data-hatena-bookmark-title="【サイト名】" data-hatena-book
「Java News.jp(Javaに関する最新ニュース)」の安藤幸央氏が、CoolなプログラミングのためのノウハウやTIPS、筆者の経験などを「Rundown」(駆け足の要点説明)でお届けします(編集部) 「ボタン」という形でWebに侵食する「ソーシャル」 最近、あちこちのWebページを見て回る「Webサーフィン」(死語?)をしていると、そこら中にソーシャルネットワーク/SNSと連動する「いいね!」ボタン「+1」ボタンを見かけるようになりました。実世界でも、友達の話を聞いて「いいね!」と思うときは、そういったり、反応したりするでしょう。それと同じような反応や評価がWebの世界にも広くもたらされてきました。 旧来のWeb上のレビューであれば、星5つなどの「5段階評価」、アンケート調査などでは「10段階評価」で示すことが多いものでした。しかし段階評価は人によって基準が異なりますし、お国柄によ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く