Facebookインサイト設定の落とし穴、app_id, admins の違いとは-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
皆さま、お久しぶり！ヒカルよ。今日はFacebookインサイト(公式のアクセス解析ツール)を使うための最初の難関、OGP設定の謎を私が解明するわ！私と一緒に、めくるめくソーシャルマーケティングへの扉を開きましょ。 ......って、え？私のことを知らない？......そうか、そうよね。最近 Facebookの六離庵ページ に閉じこもっていたものね。 改めて、自己紹介するわ。 わたしと六離庵について わたしは、ソーシャルメディア課長のヒカル。 和菓子屋六離庵ソーシャルメディア繁盛記 というサイトをご存知かしら？ このサイトは吉祥寺にある架空の和菓子屋さん「六離庵」のソーシャルメディア活用のストーリーを連載しているサイトなの。中小規模の法人がどんなふうにソーシャルメディアをどう活用していけばいいかの一例として、企画から運用、効果測定までの流れを小説形式でひと通りご紹介しているわ。全八話で公開さ
FacebookのOGPキャッシュ問題に終止符。キャッシュクリアボタン実装！
大変です。 Facebookのデバッガーに、明確にキャッシュクリアボタンが実装されました。 Open Graph Object Debugger https://developers.facebook.com/tools/debug/og/object/ The new function has been available on “Open Graph Object Debugger”(old “URL Linter”). That is the function that “definitely” clear the cache. Open Graph Object Debugger https://developers.facebook.com/tools/debug/og/object/ 今までこのキャッシュ問題には世界中の制作者が苦しめられてきました。 特に画像はなかなかキャッシ
Sharrre - A plugin for sharing buttons
Make your sharing widget! Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more. Create your own sharing buttons All sharing buttons are different, with Sharrre you can create uniform buttons to integrate with your designs. Improve your loading page With Sharrre, the API buttons are called on demand and once, regardl
FacebookのOGP画像に「顔」が入っている場合のトリミング位置についてまとめ
FacebookのOGP画像のサイズと、ニュースフィードでの表示サイズについては、過去にも数回に渡ってまとめていますが、今回は画像の中に人間の顔が入っている場合の動きについて検証してみます。 どうやら、画像内に人間の顔が入っている場合、トリミングの仕様が通常とは異なり、顔の位置を自動検出してそこを起点にトリミングを行うようです。 なんと言う余計なお世話ハイテクシステム！ ※過去のFacebook OGP画像関連のまとめ FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版 ※9.21追記） FacebookのOGP画像、最新サイズでの作成例をご紹介 本題に入る前に、簡単におさらいです。 FacebookのOGP画像のニュースフィード上のサイズは、w1.91：h1 w468px以上でないと大きく表示されない（※Face
これで一撃！簡単にOGP画像をつくれる2つの秘密道具！
こんにちは！デザイナーのわりえもんです！ ドラえもんみたいな見た目の、のび太みたいななにかです。 デザイン制作に役立つ秘密道具を紹介します！ さて今回はサイト・アプリ制作に必需品な Facebook OGP画像つくりに役立つ2つの秘密道具をお教えします！ 2014年1月現在、OGP画像の表示には大きくわけて2種類あります。 一つの画像で、どっちの表示でもきれいにつくるのは結構悩みますよね。 のび太くんには到底つくれなさそうです。 でも、たった2つのの秘密道具で、OGPつくりは劇的に楽になります！ 秘密道具その1 : ただ画像をいれるだけ！秘密のpsd！ 今回のために用意した秘密のpsd を用意しました！ こちらからダウンロードしてみてください！ PSD DOWNLOAD 「見せたい要素が横長」の場合 これは横長いロゴです。ロゴの部分がどんな表示でも切れないようにしたいですね。 これを全ての
OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
Facebook いいね！ボタンのコメント欄が表示されない問題2大パターンと解決方法
Facebook いいね！ボタンのコメント欄が表示されない問題2大パターンと解決方法 2013年12月12日 14:43Facebook Facebook 外部サイトに置かれた「いいね！」ボタンを押すと コメント欄が出てきますね。 お試し用のボタンを置いときますからお気軽にどうぞ。 そこにコメントを入れて Facebook に投稿 ボタンを押すと コメント付きで「いいね！」ができるしくみ。 ところが、このコメント欄が途中で切れてしまって 全体が表示されなくなってるのをよく見ます。 こうなるのにはいろんな原因があると思うんだけど、 見てるとだいたいこの2つのどっちかになってるので書いてみます。 overflow: hidden; で括られてる これは他のウィジェットと並べてる場合に多い気がします。 ものすごく大雑把に書きますけどこんな感じで並んでて いいねボタンの外側が overflow:
Facebookがテストユーザー作成・編集画面をリリース
Facebookがテストユーザーの作成・編集画面をリリースしました。 これまでのテストユーザーに関する操作はAPIのみの公開でした。そのため、簡単に作成が行える「Facebookテストユーザー作成ツール」を公開しましたが、今後はFacebookの画面からテストユーザーの作成・編集が行えます。 テストユーザーはFacebookアプリを作り、アプリ管理画面から作成・編集するようになっています。Facebookアプリ作成方法については、「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の２項・３項や「Facebookページプロフェッショナルガイド」の96～102ページを参考にしてください。Facebookアプリを登録するのはそれほど難しい作業ではありません。テストユーザーだけを使ってみたい場合は、空のアプリ（＝登録のみ）で大丈夫だと思います。 テ
HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要
概要 ▶ HTML5はXHTMLではありません。このためOGPの設定で必要とされるxmlnsは不要なのです。代わりに「prefix」という記述を行います。 Geek_Tatoo by Massimo Valiani HTML5でウェブサイトを作成していて、気になったことがありました。 気になった瞬間はFacebookやGoogle+で使用されるOGP（Open Graph protocol）のためのメタタグを設定していた時のことです。 ネットで検索すると必ずと言っていいほど「xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" を<html>のタグに追加しましょう」みたいなことが書いてあります。 こんな感じですね。 <html xmlns:og="http://ogp.me/ns#" xmlns:
HTML5におけるOGP（Open Graph Protocol）設定について | WEB SHOWZINE V3
HTML5におけるOGP設定（xmlns属性をprefix属性で指定）について カテゴリー: HTML | タグ: HTML5, OGP, WordPress | 投稿日: 4月 22, 2013 | 投稿者: webSHOWZINE FacebookやmixiといったOGP（Open Graph Protocol）に対応したサービスを考慮した場合、ソースにそのための記述をする必要があります。 これまでは以下のようにhtml要素にxmlns属性を追加して必要な各値を記述していたのですが、これはXHTML向けの記法らしく、HTML5ではまた違う書き方をする必要があるようです。 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いいね！ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります（公式情報） | 初代編集長ブログ―安田英久