Dialog Overview
2011年04月24日20:23 by oklahomer Dialog Overview カテゴリドキュメント http://developers.facebook.com/docs/reference/dialogs/ Dialogsは、シンプルで一貫性のあるダイアログ表示インターフェイスを提供します。Dialogsはユーザ自身が操作するため、特に追加パーミッ ションを必要としません。Facebook、ウェブサイト、モバイルなど各環境で動作します。後述するURLを生成しするか、いずれかのFacebook Platform SDKのヘルパーメソッドを使うことで、アプリケーションにDialogsを実装できます。 JavaScript SDKのFB.uiメソッド.iOS SDKのdialogメソッド.Android SDKのdialogメソッド. Dialog URLsすべてのDialogに
Feed Dialog
2011年04月24日22:17 by oklahomer Feed Dialog カテゴリドキュメント http://developers.facebook.com/docs/reference/dialogs/feed/ プロフィールのfeedに投稿するよう促します。追加のパーミッションは必要ありません。ユーザの操作なしにアプリケーションから直接投稿したい場合は、Graph APIをご利用ください。 Propertiesapp_idアプリケーションID。必須ですが、ほとんどのSDKは自動的に指定します。 redirect_uriDialogのボタンをクリックした後にリダイレクトするURL。ほとんどのSDKは自動的に指定します。 display表示モードです。wwwサブドメインの場合はデフォルトではpageが指定され、mサブドメインの場合はwapが指定されています。ほとんどのSDKは自動
Blogger
ログインBlogger に移動する メールアドレスまたは電話番号 メールアドレスを忘れた場合 ご自分のパソコンでない場合は、シークレット ブラウジング ウィンドウを使用してログインしてください。 詳細 次へアカウントを作成
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス
ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 Seamless Responsive Photo Grid デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt="Little doggie"> <img src="images/cat-1.jpg" alt="Little kittie"> ... </section> CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。 デモページ：CSSオフの表示 こういったエ
HTMLベースで作成できるプレゼン用スライドのまとめ
ブラウザでスライドを表示し、HTMLベースで作成できるプレゼンテーション用のスライドを簡単な操作方法と合わせて紹介します。
Webフォント・サービス FONTPLUS ｜ ためし書き
お使いのブラウザではご覧いただけません お手数ですが、最新の対応ブラウザ（Chrome／Edge／Firefox／Safari）にて再度ご覧ください。
MacBook Air 買ってマジ良かった！Windows歴18年の僕がMacBook Airにインストールしたアプリ - Chrome Life
念願のMacBook Airをゲットしました！！ 発売初日にWebで注文して、昨日やっと届きました。 購入したのは、MacBook Air 13インチです。 【スペック】 1.8GHzデュアルコアIntel Core i7 4GB 1333MHz DDR3 SDRAM 256GBのフラッシュストレージ 今までは、Let’s Note一筋でがんばってきたのですが、iPhone、iPad、iPod nanoとApple製品の魅力にとりつかれてしまって、実物を見ずに新しいMacBook Airをポチってしまいました。 Windows歴18年（Windows3.1から使っているので）の筆者にとってMacにスイッチすることはかなりの覚悟が必要でした。 しかし、1日触っただけで分かりました。 「Macだけで十分やっていける！」 Macヘビーユーザーにとって今回のOSはインパクトが大きくてちょっと使いに
facebookのブログパーツの挙動が、コードによって微妙に違う件
Facebook / Ray-Franco Bouly 当ブログにも設置している、フェイスブックの「いいね！（like）」ボタンは、利用するコードによって、挙動が違います。 同じパーツであっても、iframe版とXFBML版では、挙動が違うのです。 ⇒いいね！(like)ボタンの設置コード取得はこちら XFBML版はクリックすると、シェア用のコメント欄が表示されます。※正確にいうと、表示されたfacebookユーザー名にマウスをあわせると、表示されるみたい。 当初はiframe版を利用して、いいねボタンと、シェアボタンを並べて設置していましたが、XFBML版ならばひとつのボタンで済みます。 ↓↓動作の違いを、ぜひ試してみてください↓↓ iframe版 XFBML版 微妙に違うでしょ？ちなみにShareボタンはこちら。 シェア iframe版は、呼び出しが遅くでも非同期で表示されるのが利点で
XFBML版Facebookの「いいね！」ボタンを設置する。 - The Web Laboratory
著者: Co.a(2011年3月 8日 11:17) カテゴリー: SocialWeb タグ: Facebook,いいねボタン ありがとうございます： コメント(0) トラックバック(0) Facebookとしっかり向き合おうと決意したので、最初のステップとして「いいね！」ボタンを設置しました。Iframeタグを使った設置についてはたくさん紹介されていますので、ここではXFBMLを使った「いいね！」ボタンの設置について紹介します。 目次 XFBMLを使ったときのメリットとデメリット 「いいね！」ボタンのタグを作る アプリケーションIDを入手する JavascriptSDKを読み込む 参考サイト様 1.XFBMLを使ったときのメリットとデメリット メリットとしては、 ・親要素や子要素に合わせて、幅や高さを自動で補正してくれる ・ボタンがクリックされたことがリアルタイムに伝わり、更新される
frasio report [フラシオ リポート]
public function show_404() { header('HTTP/1.0 404 Not Found'); include(TEMPLATEPATH.'/404.php'); exit; } js function getDateByYYYYMMDD(yyyymmdd) { var tmp = void 0, match = void 0; if (match = yyyymmdd.match(/[\d]{4}\-[\d]{2}\-[\d]{2}/)) { if (match.length) { tmp = match[0].split('-'); } } else if (match = yyyymmdd.match(/[\d]{4}[\d]{2}[\d]{2}/)) { if (match.length) { tmp = [match[0].substr(0, 4),
![frasio report [フラシオ リポート]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6df9002c5b6d41c3b6a9cdedff6bcccd8399236/height=288;version=1;width=512/http%3A%2F%2Fktyr.net%2Fblog%2Fimage%2Fshareimage.png)
Open Graph protocolの画像クロールについて - web探検隊
metaタグを追加してFacebookに対応する方法とハマりやすいポイント | KAYAC DESIGNER’S BLOG - カヤックの意匠部によるデザインやマークアップの話を参考にしながらOpen Graph protocolで画像をクロールさせない方法を検討してみました。 Open Graph protocolって？Open Graph protocol - Facebook開発者 facebookが提唱しているウェブサイトをソーシャル化する決まりごと。詳しい決まりごとはThe Open Graph Protocolでご確認下さい。サービス名称URLfacebookいいね！http://developers.facebook.com/docs/opengraphmiximixiチェックhttp://developer.mixi.co.jp/connect/mixi_plugin/mi
ソーシャル時代のサイト公開時に最低限しておきたい５つのこと
twitter facebook hatena google pocket ソーシャル時代のサイトでは拡散を図り、またその効果を測ることが重要になってきます。 誰がファンで、どこからどれだけクリックされたのかを分析することで、より効果的なサイトとなることができるでしょう。 そのために、サイト公開時には最低限以下の5つのことをやっておきたいところです。 sponsors 1：Twitter, Facebookへのshareボタン 何はなくともTwitter、Facebookボタンです。 あれば記事を拡散させやすいアイテムです。 良いか悪いか別にして、ページの上部に置けば、本文を見ずにshareしてくれる人も多いです。 【Twitter】 https://twitter.com/about/resources/tweetbutton 文字をTweetさせたい場合 https://twitter
mixiのチェックボタンをつけてみた【前編】 : 元・地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記
CNET Japanの記事に「mixiチェック」のボタンが付いているのを見て、当ブログにも付けてみようと思ったのですが、「data-key」ってのが必要らしく、それを手に入れる方法がわからなかったので放置していた。 そんなときツイッターのツイートから情報を経て以下のページに辿り着き、当ブログにもなんとかmixiチェックのボタンを付けることができた。 さて、その方法。 やっぱりポイントになってくるのは「data-key（mixiチェックキー）」の入手。 ということでまずは「mixiチェックキー」の入手方法から。 「mixiチェックキー」を入手するにはデベロッパー登録をする必要がある。 デベロッパー登録とはmixiアプリを開発したり公開したりするのに必要となってくる手続き。 まずは以下のページにいく。 □ デベロッパー登録画面「Developer登録する」をクリックパスワード（mixiで使って
最小努力で最大効果の望めるmixiチェックボタンの簡単設定！: 世界中の１％の人々へ
2011年4月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 mixiチェックに投稿するだけならOGPの設定はいらない。 今日のブログは、設定の敷居が高いと言われるmixiチェックのボタンの実装です。デベロッパー登録するのが面倒で、今まで避けてきましたが、mixiはなんといっても日本最大のソーシャルメディアサービスですので無視するわけにもいきません。 重い腰をあげてブログに設定してみましたら、案ずるより産むが易しとはこの事ですね。登録から動作確認まで30分とかからにできました(笑)。 ところで、mixiチェックボタンを導入したブログ等を読むと「名前空間」とか「OGP（Open Graph protocol）」という言葉がでてきますが、mixiチェックに投稿するだけであれ
ActionScriptでJSONを扱う方法 | ClockMaker Blog
先日、昔の後輩からJSON(ジェイソン)について教えて欲しいとリクエストをもらったので、JSON のメリットと使い方(AS3)をまとめてみます。 JSONとは何か？ XMLのようにデータを文字列で格納するファイル形式。Flashの外部データには一般的にはXMLが使用されることが多いですが、JSONはECMA標準のObject/Array形式で保存するため、解析の手間が少なく扱いやすいという利点があります。 JSONのメリット EMCA標準のObject/Array形式で保存するため、解析後のデータが扱いやすい ファイル容量が少なくてすむ JSONのデメリット 人が読んで分かりにくい(手更新するならXMLのほうがいいかも) 書式が正しいかのチェックが面倒(XMLならブラウザに放り込めば、バリッドかどうか簡単にチェックできます) ActionScriptでの使い方 ライブラリ「as3corel
jQueryでJSONを扱う - ブログ｜ベトナムでのオフショア開発とスマートフォンアプリ開発のバイタリフィ
お世話になっております、バイタリフィ加藤です！ 最近jQueryで外部ファイルのJSONからデータを抜き出してコンテンツを吐き出したりなんだりしたのでその辺を書いてみます。 リハビリです。 //javascript var jsonDataUrl = "./modules/json/data,json"; $.getJSON(jsonDataUrl,function(json) { successFunc(json); return; }); 以上です。 まじでー！ ということでjQuryでjsonを読み込むのが凄く楽なことがよくわかりました。 じゃぁついでなのでjsonの中身を呼び出して見ましょう。 たとえばこんなjson //json {"title":"sample data","person":[ {"id":"1","nameFirst":"彰則","nameLast":"加藤"
JSONをjQueryで扱う方法 : ずっと工事中
ブログネタ：JavaScript に参加中！ XMLに続いてJSONの扱い方のメモです。 概要は以下の通り。 ・JSONの取得 JSONの取得はajaxメソッドやgetメソッドでもできますが、getJSONを使った方がシンプルです。 ・エンコード指定 呼び出す側と呼び出される側でエンコードが異なる場合はスクリプトのcharsetの指定が必須です（特にIE）。 ・取得したJSONの取り扱い JSONはeachメソッドやfor文で扱うことができます。 Google Ajax Feed APIを使って任意のフィードからJSONを取得し、タイトル5件を表示する例です。 ソース とりあえずエラー処理は入れていないです。 $(function() { $.ajaxSetup({scriptCharset:'utf-8'}); //charsetの指定(デフォルトの書き換え) $('#get_feed'
jQueryでjsonデータを扱ってみる【入門編】
jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。 投稿日2010年07月25日 更新日2016年04月26日 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱い
jsonpでtwitterAPI利用メモ【jQuery】 : 目指せ1級！30代サラリーマンボルダリング日記
続いてソースとサンプル。 function search(word) { $.ajax({ type: "GET", url: "http://search.twitter.com/search.json", data: { "q": word, "rpp": 10, }, dataType: "jsonp", success: function(data) { $("#result").empty(); $.each(data.results, function(i, item) { $("#result").append($("<li />") .append($("<img />").attr("src", item.profile_image_url)) .append($("<span />").append(item.from_user+':'+item.text)) ); }
Open Graph protocol
2011年04月20日00:13 by oklahomer Open Graph protocol カテゴリドキュメント http://developers.facebook.com/docs/opengraph/ Open Graph Protocolは、あなたのwebページがソーシャルグラフと連携することを可能にします。今のところ、実世界に存在する物（映画、スポーツチーム、セ レブ、レストランなど）を象徴するwepページ用にデザインされています。Open Graphタグをwebページに含めることで、あなたのページはFacebook Pageと 同等の物になります。つまり、ユーザがページ上のLikeボタンを押すと、ページとユーザの間にconnectionが作られます。ページはユーザプロ フィールの"Likes and Interests"セクションに表示され、更新情報をユーザへ通知するこ
はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ
先日このブログを HTML5 で作り直しました。その時に思った、HTML5 でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5 でコーディングする時の tips になってます。 先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。 とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
flashにSNS共有ボタンを設置する方法 | wszz
Photoshop VIP ☞ Webレイアウトデザインの参考にしたいPhotoshopチュートリアル25個まとめ（ サンプルPSD素材）
ブログ
jQueryを使ってHTMLのhead内にアクセス：実験メモ