OGP設定不要！Facebookのshareが便利
twitter facebook hatena google pocket Facebookからshareボタンがなくなって、share自体もできなくなったかと勘違いしていましたが、下記のような設定で対応可のなようでした。 備忘録がてらエントリーにしておきます。 sponsors #1 リンクでShare 気軽にできるタイプのShareで、下記のような表示となるものです。 いたって簡単です。 <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.skuare.net/" target="_blank">シャア</a> ということでu=のあとに対象のURLを記載すればOKです。 この場合は開くウィンドウのサイズなどを指定してあげたほうが良いかもしれません。 Facebook上では以下のように見えます。 ※この手法はO
スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る
twitter facebook hatena google pocket Facebookをはじめスマートフォンサイトやアプリでは、メニューをタップするとサイドからにゅっと出てくるメニューが導入されて久しいです。 今回はSidr - A jQuery plugin for creating side menusを利用して、にゅっと出してみましょう。 sponsors 使用方法 Sidrからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.sidr.dark.css"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.sidr.min.js"></script> <sc
画像のスワイプにも対応したスマホ時代のjQueryプラグイン「Swipebox」
twitter facebook hatena google pocket PCでの画像拡大と言えばLightBox系が席巻していましたが、スマホだとなんだか使いにくいものでした。 Swipeboxはスワイプ動作による画像間の切り替えも可能で、新時代の到来を予感させます。 なおPCでもキーボードによる遷移ができたりします。 sponsors 使用方法 Swipeboxからファイル一式をダウンロード。 <link rel="stylesheet" href="swipebox.css"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.swipebox.js"></script> <script type="text/ja
フォーム（form）まわりで便利なjQueryスニペット6選
twitter facebook hatena google pocket Awesome jQuery snippets to work with forms | CatsWhoCode.comで紹介されていたスニペットがよさそうだったので、抜粋して紹介します。 sponsors 1："enter"キーを無効に $("#form").keypress(function(e) { if (e.which == 13) { return false; } }); 2：checkboxがcheckされているか確認 $('#checkBox').attr('checked'); 3：formの要素を有効／無効 $("#submit-button").attr("disabled", true); $("#submit-button").removeAttr("disabled"); 4：入力され
ソーシャルメディアの情報をpinterest風に一覧表示できるjQueryプラグイン「Socialist」
twitter facebook hatena google pocket ソーシャルメディアが普及し、内容をまとめて一気に見せたいと思うケースも増えています。 jQuery Socialist Social Media PluginはソーシャルメディアをまとめてPinterest風に表示できてしまいます。 sponsors 使用方法 jQuery Socialist Social Media Pluginからファイル一式をダウンロードします。 <link rel="stylesheet" href="jquery.socialist.css" /> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.socialist.j
Facebookソーシャルブラグイン 「いいね！」挙動
twitter facebook hatena google pocket GW明けなので、軽いネタです。 Facebookの「いいね！」ボタンはここで生成したりhttps://developers.facebook.com/docs/reference/plugins/like/なれている人やCMSはいつもので指定しているかと思います。 で、「いいね！」した後にコメントボックスが出るときと出ない時があります。 っていうのを確かめようという微妙な検証ネタです。 sponsors HTML5 まずはhtml5です。 jsをbody下に <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur
[Facebook]iframeでも「いいね！」した人だけに見せる方法
twitter facebook hatena google pocket FMBLがそろそろという段階ですねー。 さて、FMBLでは[メモ]FacebookファンページのFBMLで使えるタグ11選でも紹介したように「いいね」しないと見られないコンテンツ作りができました。 iframeになっても、こんな仕組みが欲しい！・・・というあなたにお届けするコーナーです。 sponsors 利用方法 まずは、Facebookページにiframeを組み込む｜skuare.netで紹介した手順にのっとりiframeを表示させる準備をしてください。 次にphp-sdkからファイル一式をダウンロードし、Canvas URLディレクトリにsrcフォルダのものをアップします。 そしてlikeの状態を判別するコードを下記のような記述し、index.phpとして同ディレクトリにアップ。 <?php echo '<?
![[Facebook]iframeでも「いいね！」した人だけに見せる方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/e3b78407d17efa852e0e0392987bc4a4f2625557/height=288;version=1;width=512/http%3A%2F%2Fwww.skuare.net%2Fassets_c%2F2011%2F03%2Ffb_if_like-thumb-300x200-631.jpg)
サイトのチュートリアルを表示できるJavaScript「jQuery Joyride Feature Tour Plugin」｜skuare.net
twitter facebook hatena google pocket サイトの使い方を見せるのはFacebookなども取り入れている昨今注目の方法です。 jQuery Joyride Feature Tour Pluginでは簡単にそれを実行でき、チュートリアルに利用できそうです。 sponsors 使用方法 jQuery Joyride Feature Tour Pluginからファイル一式をダウンロード。 <link rel="stylesheet" href="joyride-1.0.2.css" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.joyride-1.0.2.js"></script> 次
Facebookページにオリジナルコンテンツを追加できるアプリ7個
twitter facebook hatena google pocket いや～、Facebookが止まらないですね（ある一定の業界では）。 fbmlが廃止になっててんやわんやで、そこに参入したオリジナルコンテンツを表示できるFacebookアプリたち。 今回は7つを適当に順位付け！ sponsors 1位 Static HTML http://apps.facebook.com/statichtml/ ・wysiwygモード ・いいねによる切り替えあり 2位 Static HTML: iframe tabs https://apps.facebook.com/static_html_plus/ ・いいねによる切り替えあり ・FBMLが使える 3位 ソーシャレット http://apps.facebook.com/sociallet/ ・ソーシャル系をまとめて表示可能 ・フリーエリアもあ
要素をブルブルさせるjQueryプラグイン「jRumble」
なんだか楽しかったので、紹介します。 jRumble | A jQuery Plugin That Rumbles Elementsは要素をブルブルさせられるjQueryのプラグインです。 マウスオーバーで印象を与える時に使えなくもないかもしれません。 もしかしたらキャラクターをブルブルさせたら面白いかもしれません。 ま、好きに使ったらいいじゃないでしょうかね。 sponsors 使用方法 jRumble | A jQuery Plugin That Rumbles Elementsからjrumble.1.0.jsをjQueryからjquery.jsをダウンロードします。 <script src="jquery-1.5.1.min.js" type="text/javascript"></script> <script src="jrumble.1.0.js" type="text/jav
簡単！本をめくるような表現を実現するjQueryプラグイン「Viewbook」
これは簡単に導入できてよさげなプラグインです。 本をめくるような表現をさくっと導入できるViewbook - jQuery Pluginを紹介します。 また、オプションも色々あるので、オリジナルなコンテンツになりそうです。 sponsors 使用方法 Viewbook - jQuery Pluginからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script src="jquery.viewbook.1.0.0.js" type="text/javascript"></script> <link href="jquery.viewboo
[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could
twitter facebook hatena google pocket 長谷川恭久（@yhassy）さんのブログcouldで使用されているscriptがよかったので紹介します。 なお、コンテンツも非常に読み応えがあるので、購読をお勧めします。 さて、couldでは、記事詳細を読み進め、ある位置までくると上からソーシャルブックマーク系が降りてきます。 記事後半まで読んでくれた意欲の高い人に対しアピールが出来、ソーシャルメディア上の伝播がより期待できます。 購入ボタンやお問合せボタンなどを置いてもいいかもしれません。 わりとシンプルな記述なので、苦労なく導入できると思います。 sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 ■JavaScriptの記述 <script type="text/javascript" src="jquery-1.4.2.m
![[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could](https://cdn-ak-scissors.b.st-hatena.com/image/square/11ca1ab33e936fcf16e770dfbd7067653fbb7d52/height=288;version=1;width=512/http%3A%2F%2Fwww.skuare.net%2Fassets_c%2F2010%2F09%2FjslideBox-thumb-300x200-514.jpg)
フッターにRSS内容をスライド表示させられるJavaScript「Jquery Constant Footer」
フッターにwibiyaなどソーシャル要素を表示させるケースが増えています。 でもそんな高機能でなくてもいい。単純にRSSを表示させたいというかたにオススメです。 RSS内容をスライド表示させるJquery Constant Footerを紹介します。 sponsors 使用方法 Jquery Constant Footerからjquery.constantfooter.jsを、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.constantfooter.js"></script> <script type="text/javascript"> $(document)
自動で目次化してくれるJavaScript「Indexer」
twitter facebook hatena google pocket ページが長くなると目次化してページ内リンクを付けて・・・ といった作業が必要になりますが、jQueryプラグインの「Indexer」なら、この作業を自動化してくれます。 sponsors 使用方法 Indexerからjquery.indexer.jsをjQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.indexer.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#id名").inde
jQueryと@anywhereでさくっとTwitterを表示「jTweetsAnywhere」｜skuare.net
twitter facebook hatena google pocket Twitterからリリースされた@anywhereを、もっとわかりやすく利用するjQueryプラグインを紹介。 jTweetsAnywhere - jQuery Twitter Widget with @Anywhere supportで簡単にサイトに導入しましょう。 sponsors 使用方法 jTweetsAnywhereからファイルをダウンロードします。 <link rel="stylesheet" type="text/css" media="all" href="jquery.jtweetsanywhere-1.0.0.css" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/
複数要素を小気味良く動かせるJavaScript「Magical Scroll」
jQuery Easing Pluginという動きに特化したプラグインもありますが、::Magical Scroll::を使用すると簡単に複数の要素を小気味良く連動して動かすことが可能です。 sponsors 使用方法 ::Magical Scroll::からファイルをダウンロードします。 また、jquery.jsをあわせてダウンロードしてください。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.magicScroller.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#id名1').magicScroll
jQueryでフォームのラベルをウォーターマーク的にオシャレ表示
twitter facebook hatena google pocket フォームに何を入力していいかうっすら表示するウォーターマークをたまに見ます。 これによりユーザビリティの向上が図れます。 このウォーターマークをオシャレに表示するjQueryプラグインSliding Labels jQuery Pluginを紹介します。 sponsors 使用方法 Sliding Labels jQuery Pluginからjquery.slidinglabels.jsをjQueryからjquery.jsをダウンロードします。 また以下のようなフォームがあったとします。 <form id="contactform"> <div class="slider"> <label for="name">お名前</label> <input type="text" id="name" name="name"
JavaScriptを利用してリアルタイムに翻訳させる「jQuery Translator」
twitter facebook hatena google pocket サイトは国境を超え、さまざまな人が閲覧します。 ただし、英語、フランス語、スペイン語と別にページを用意したらコストが膨大になります。 そこでjQuery Translatorの出番です。 Googleが提供するGoogle AJAX Language APIを簡単に利用して翻訳させることが可能です。 sponsors 使用方法 jQuery Translatorからjquery.translator.jsをjQueryからjquery.jsをダウンロードします。 <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type='text/javascript'> google.load("language
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像をiTunes風に見せられるJavaScript「CoverScroll jQuery plugin」
skuare.net