みかづきブログ その3

3ヶ月つづけてみました。

Facebook

動的に生成したいいねボタン・ツイートボタンを初期化する

長い人生において、いいねボタンやツイートボタンの初期化のタイミングを自在に操りたいと思うタイミングが1度や2度位あるかもしれませんし無いかもしれません。 今回はそんな時のために初期化の方法をメモしておきたいと思います。 ツイートボタンの初期化 …

いいねボタンを押した時に確認と表示されるようになったときの対策を検討する

kimizuka.hatenablog.com先日 いいねボタン押下時にコールバックイベントを設定する方法 を知ったので、それを活かして常に切り番のいいねボタンをつくってみました。kiri-iine.kimizuka.fm制作自体には時間はかからなかったのですが、いいねボタンを押した…

いいねボタンにコールバックを設定して、いいねした時・取り消したときの処理をハンドリングする

Facebookのいいねボタンに対してコールバックを設定したかったので調査してみると、意外と簡単にコールバックを設定できることがわかったので試してみます。 HTML <script> window.fbAsyncInit = function() { FB.init({ appId : "#{アプリID}", xfbml : true, versi…

押されたシェアボタンによってOGPを切り替えるページをつくる

前回の記事 の応用編です。kimizuka.hatenablog.com マークアップをしていると、「シェアボタンによってOGPを切り替えて欲しい」と頼まれる瞬間がやってくると思います。 そんな時こそ Feed Dialog(フィードダイアログ) の出番だと思われます。 DEMO http:…

Feed Dialog(フィードダイアログ)のつかいかた まとめ

Facebookのウェブ用グラフAPIは、 Feed Dialog Send Dialog Share Dialog と3つ用意されています。developers.facebook.com 今回は個人的に最もお世話になっている Feed Dialog についていろいろ調べてまとめてみました。 Feed Dialog(フィードダイアログ)…

自分のFacebookアカウントのID(数字)を確認する

developers.facebook.com自分のFacebookアカウントのIDを調べようと思って、意外と苦戦したの確認の仕方をメモしておきます。1. Facebookにログインして https://developers.facebook.com/tools/explorer にアクセス 2. Get Token のなかの Get User Access …

Facebookページをつくろう

つくったことがなかったのでつくりかたを調べてみました。 https://www.facebook.com/pages/create/ にアクセス 項目を選択したり記述したり 完成! https://www.facebook.com/kimizukablog/www.facebook.comとても簡単につくれました。 どんなことができる…

ページの右側にいいねボタンを置いてダイアログが開かれたときにつじつまを合わせる

最近のいいねボタンは押すとコメント投稿用のポップアップが表示されます。なので、いいねボタンがページの右側にあると「コメントする」ボタンが押せなくなったり、ページレイアウトがおかしくなったりしてしまいます。 右側にあるいいねボタン 上記ケース…

Facebook の Share Dialog を JavaScript からつかう

Share Dialog 調査 - みかづきブログ その3Share Dialog 調査 - みかづきブログ その3かつて、Share Dialog を URL Redirection すなわちリンクとしてつかうための調査をしましたが、今回は JavaScript からつかうための調査をしてみました。

Facebookでリンクをシェアする際にOGP(タイトル、ディスクリプション)を書き換える

タイトル・ディスクリプションの欄をクリックしたら書き換えることができました。 よく考えると、制作者がOGPタグで設定したタイトル、ディスクリプションはあくまでデフォルトのものでしかないということですね。 【2016.09.01 追記】 いつの間にか編集不可…

Facebookのソーシャルプラグイン(コメント)を試す

Social Plugins Social PluginsFacebookのコメント機能の埋め込みを調査してみました。 こちら から簡単に設定出来ました。

Open Graph Debugger をつかう

OGP周りの確認には Facebook の Open Graph Debugger をつかいましょう。OGPを確認したいURLを入力してDebugボタンを押すだけで、なんということでしょう。 OGP周りのエラーがまるわかりです。 通常シェア時のOGPはFacebookのサーバに保存されているものが使…

Share Dialog 調査

これまではウェブページをFacebookにシェアしてもらう際に、 Feed Dialog を使っていましたが、Deprecated(廃止予定)になってしまったので、Share Dialog を調査してみました。 サンプル X-Frame-Options' が 'DENY' に設定されているため、iframe内では動…

FacebookアプリのWebViewではすべてを表示しないモック

試しにつくってみました。こちらのサイト をFacebookでシェアし、 iPhoneのFacebookアプリで見てみると、本文が途中までしか表示されず、Safariで開くようにサジェストされます。Safariで開くと、隠れていた部分が徐々に表示されていきます。原理としてはユ…

勝手にOGP画像を差し替えたシェアボタンをつくる

例えば、マリーンズのオフィシャルサイトを普通にシェアすると、OGP画像はマリーンズのロゴになります。しかし、下記の福浦シェアボタンをつかえば、、、てってれー。OGP画像を福浦の画像にしてオフィシャルサイトをシェアすることができます。 個人的にはミ…

Feed Dialogをつかってシェア時のディスクリプションを変更する

こちら を参考に簡単に設定できます。

↓ の投稿いいね!

この投稿のしたに表示されている記事、すばらしいですね!

Social FrameworkをつかってFacebookの友達のプロフィール写真を取得しよう。

前々回 と、さらにその前あたりで、Facebook周りを色々調べていましたが、Facebookの友達のプロフィール写真を取得するために色々頑張ってみました。 雑多な手順 プロジェクトに、 Accounts.framework Social.framework を追加して、 ACAccountStore *accoun…

iPhone向けFacebook SDKをつかおう。

Objective-C はじめたての初心者ですが、 iOS向けFacebook SDKスタートガイド を見ながら果敢に挑戦してみました。iOS向けFacebook SDKスタートガイド の手順にそってアーカイブを残しておこうと思います。 必要なアイテムをインストール 意識が高いのでもと…

FacebookMarkletをつくろう。

先日、 こんなブログ 記事をみつけました。 ChromeでFacebook開いてたら、時間で勝手に閉じるアドオンとか欲しい3分で閉じる 1日5回までしか見れない。 それだけで十分です。誰か作ってください。お願いします。 ChromeでFacebook開いてたら、時間で勝手に閉…

世界のいいねボタンを押してみよう。

先日、Facebookのいいねボタンをサイトに設置する際、パラメータとして言語を設定できることに気づきました。例えば、いいねボタンをフランス語で表示したいなら、 locale=fr_FRという値をパラメータとして渡すと、と、フランス語になり、若干おしゃれさがア…

【追記あり】はてなブログでOGP画像を設定する方法(仮)をみつけました。が。

おかげさまで、はてなブログをはじめてはや2週間が経ちました。さてさて僕は、はてなブログを投稿したあとにFacebookにシェアしていたんですが、いつもOGP画像がデフォルトのものになってしまい、若干悲しい思いをしていました。毎回毎回おんなじ画像。代わ…