Facebookなどでサイトが共有された時、リッチ表示するOGPの設定
Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。サイトによっては画像が大きく表示されたり、概要がいい感じで思わずクリックして読んでみたくなるときってないでしょうか？ これは、ブログなどのサイトにOGP（Open Graph protocol）と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。 当サイトでのOGPの実装は、WordPressのプラグインの「Open Graph Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。 OGPとは何か？ OGP（Open Graph protocol）は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのペー
Devices — Facebook Design Resources
Designing for many platforms Facebook supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Each device comes with a bitmap of the device (with and without shadows) and the original Sketch file for that device. We'll release different cate
【調査中】「Facebook like box」が2015/6/23に終了して、これからは「Page Plugin」に移行らしい・・？ | バニデザノート
With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites. 翻訳アプリを通してみた： グラフAPIのV2.3のリリースにより、箱状のプラグインは廃止され、新しいページプラグインの代わりに2015年6月23日の使用に動作を停止します。ページプラグインは、あなたのウェブサイトへのページからコンテンツを簡単にフィードを埋め込むことができます。
Open Graph Object Debugger - Facebook
Facebookにログインして、友達や家族と写真や近況をシェアしましょう。
Facebook にウェブページを再クロールしてもらってキャッシュのリセットと OGP の書式チェックができるブックマークレット
Facebook にウェブページを再クロールしてもらってキャッシュのリセットと OGP の書式チェックができるブックマークレット 2011年12月02日 16:17Facebook OGP (Open Graph Protocol) という約束事がありますね。 Facebook などにウェブページなどの情報を伝えるのに使われるもので、 このブログのトップページだとこんな感じで書いてあります。 そのページが Facebook でシェアされたり「いいね！」されたりしたとき ここに書いた画像や説明文が拾われるわけですけど、 いったん取得されたら Facebook 側でキャッシュされてしまって いくら手元で書き換えても反映されない。 ただこの情報は OGP の書式を確認するためのこのツールを使うと Facebook のが現在の状態を取得しに来てくれるので 新しい状態に更新されますね。 Debugg
OGPの仕様追加：記事にひもづくFBページや個人アカウントとの連携を強める
2013年06月21日02:32 by oklahomer OGPの仕様追加：記事にひもづくFBページや個人アカウントとの連携を強める カテゴリ 先日の開発ブログで、OGPの仕様追加が公開されました。これを用いることで、記事がニュースフィード上に流れるとき、その記事にひもづくFBページへのいいね！や個人アカウントのフォローを促すことができるようになります。 方法 方法は簡単で、Facebookページを紐づけるならarticle:publisherを指定 <meta property="article:publisher" content="https://www.facebook.com/cnn" /> 個人アカウントを紐づけるならarticle:authorを指定します。 <meta property="article:author" content="https://www.faceb
シェアデバッガー - 開発者向けFacebook
シェアデバッガーでは、コンテンツがFacebookでシェアされたときの表示をプレビューし、Open Graphタグの付いた問題をデバッグできます。
OGPタグ確認に便利！ブックマークレットで手早くチェック | ブログ | SINAP - 株式会社シナップ
'+'%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%BF%E3%82%B0'+'%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%BF%E3%82%B0 ';if(og_image%20==%20undefined){addtext%20+='%C3%97%20og:image%E3%81%8C%E8%A8%AD%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82 '}else{addtext%20+='url'+%20og_image%20+' ';if(og_image.match(/http:\/\/[^\/]*/)%20!=%20null){var%20og_image_domain%20=%20o
Twitter Bootstrapじゃなくfacebook Bootstrap？「Fbootstrapp」:phpspot開発日誌
Twitter Bootstrapじゃなくfacebook Bootstrap？「Fbootstrapp」 2012年03月05日- Fbootstrapp by Clemens Krack, based on Bootstrap, from Twitter Twitter Bootstrapじゃなくfacebook Bootstrap？「Fbootstrapp」 Twitterじゃなくてこれからfacebookでしょ、と電車の中で聞きました。 そんな方にはTwitterBootstrapをベースとして作られたFbootStrappがよいかもしれません。おもいっきりfacebookライクなサイトを作ることができます。 facebookを扱うサイトでは使えそうです 関連エントリ FacebookスタイルのシンプルなドロップダウンをjQueryで実装するサンプル Facebookのタイムライン
RSS.Graffiti を使って、FacebookとTwiiterにWordPressの更新情報を流す
それでもRSS.Graffitiを使うのであれば、以下お付き合いをば。。。 Facebookへの投稿 Facebookに流す更新情報は 個人アカウント or Facebookページ どちらでも設定できますが、FacebookページはFacebook内の広報ページのようなものなので、登録しておいて損はないと思います。 Facebookアプリ RSS.Graffitiを利用出来るように設定します。 アプリ画面へアクセスします。 アプリを使用していないので、プロフィール画像の横に Status: Authorization Requiredと表示されています。 使用するには、中央の黄線枠の下部 「Click HERE to autorize RSS Graffiti」 ボタンを選択します。 すると、認証画面に移るので認証します。 「許可する」を選択して、アプリ画面へ戻って来ると ステータスが S
『SNS企画の参考に！FacebookチェックインとPHPでユニクロキャンペーン風に連動させる』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ これからソーシャルメディアと連携した仕事が増えてくると思う・・・。 イヤ、きっとくると思うので勉強のためにデータを取得してみた。 今回は最近始まったユニクロのキャンペーン「UNIQLO CHECK-IN CHANCE 」がfacebookのチェックイン機能と連動していた仕組みが気になったので、連携部分の実現方法を調べてみた。 Facebook APIを初めて触ってみたが、PHPと連携させてなんとなくそれっぽいものが作成できたので、方法を紹介。 Twitter APIやInstagram APIに比べてFacebook APIは凄い簡単だったのアイデア次
思ったよりカンタンでした！アプリで作るfacebookページ+参考デザインの紹介
ついに、当ブログもFacebookページを作ってみました・・！ 小難しそうだなぁと敬遠していたのですが、 よいアプリを見つけ、htmlを書かずに、画像を用意するだけでウェルカムページまで作ることが出来ました！！ 「なんか面倒そうで用意してない・・」というブロガーさんは是非、このアプリを使って作ってみてはいかがでしょうか？Facebookページは作ったけどウェルカムページがない！という方にもおすすめです！ 以下の記事に、ブロガーさんがFacebookページを作ったほうが良い理由が熱く語られていました！ ブログをお持ちの方で、まだFacebookページを作っていない方は一度目を通してみてください( b･`∀･´) 参考：ブログを書いている人は Facebook ページ（ファンページ）を作るべき: Facebookのここが好き–その2 | iPhone 研究室（iPadもね） アプリを使ったFa
FacebookページのGUI PSD（日本語版） | バンクーバーのうぇぶ屋
Facebookページを作る時、FacebookページGUIのPSDがあると便利ですよね。提案時、運営方針を決める時、デザイン案を出す時、本当に色んな場面で使う機会はあるかと思います。 でも、基本的にFacebookとかのGUIって英語版しか無いんですよね。 つい先日、英語と日本語のFacebookページ両方を作るプロジェクトに参加させてもらった時に、日本語のGUIテンプレを探してみたのですが無かったのでとりあえず作ってみました。 ウォール画面 タブ画面下地 Donload PSD File ついでに作った感じなので、ライセンスについてはフリーです。お役に立てればプロジェクトで使ってもらうなり、モック作成時に使ってもらうなり、ご自由にどうぞ。一応この記事へのリンク以外で再配布や転売などはお控えください。 そして、一つだけ愚痴を言えば、これ作ってるときにFacebookリニューアルの話をテレ
いいね！ボタンを設置するとアクセス解析に支障が出る件 | SEO対策 e-search 公式ブログ
JUGEMテーマ：SEO いいね！ボタンを設置するとアクセス解析に支障が出る件 フェイスブックのいいね！ボタンを設置するとGoogle Analyticsなどのアクセス解析で 「/?fb_xd_fragment=」このパラメータを含むアクセスが急激に増えます。 フェイスブックのいいね！ボタンのバグなんだそうですが、 本来のアクセス数とは大幅にかけ離れた数値になってしまうので いいねボタン！を廃除するか、/?fb_xd_fragment= このパラメータ付きのアクセスを除外設定する必要があります。 Google Analyticsで「/?fb_xd_fragment=」を除外設定する Google Analyticsにログインした最初のプロファイル選択画面で除外したいフロファイルの編集をクリックします。 プロファイルに適用したフィルタの項で「フィルタを追加」をクリックします。 フィルタの作成
Facebookページをブログのようにボリボリ作れるサービスを作ってみた [ファンゲーター]：村上福之の「ネットとケータイと俺様」：オルタナティブ・ブログ
要するにFacebookページの追加ページをブログのようにボリボリ作れるサービスです。 『「いいね!」を押さないと見えないページがあるfacebookページ=ファンゲート』を簡単に作れます。 通常必要なレンタルサーバーを借りる必要やスクリプトの設置がいりません。 プログラムやスクリプトを作る必要もありません。 Google様のクラウドサーバー(GAE)に設置します。 Google様のクラウドなので何百万アクセスが来ても自動的に負荷分散をします。 法人様のページでも使用できます。 無料です。 導入するとファンページにHTML編集画面が出てきますので、HTMLを編集したり、画像をアップロードしたりするだけです。 単純にFacebookページの配信サーバーにも使えます。 通常必要なIFRAMEのAppをファンページに乗せるために必要なクレジットカードによる本人認証もしないで作れます。こっち
![Facebookページをブログのようにボリボリ作れるサービスを作ってみた [ファンゲーター]：村上福之の「ネットとケータイと俺様」：オルタナティブ・ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/26932adb821eaf3a91b51e02a17c795c309cdb41/height=288;version=1;width=512/https%3A%2F%2Fblogs.itmedia.co.jp%2Fmt-static%2Fsupport%2Fassets_c%2Fuserpics%2Fuserpic-172-100x100.png)
FacebookのOGPを確認する・キャッシュをクリアする方法
ホームページにFacebookにシェアするボタンを設置しているページが増えてきました。 そこで表示する画像やタイトルを記述するOGPですが、こちら一回そのURLでアクセスするとキャッシュがFacebook側に残るようで、 修正しても早々には変わってくれないようです。 OGPはこういうのです。 <meta property="og:title" content="ページタイトル"> 確認の時に変わってくれないので困りものなのですが、こちらのfacebook developersのページで確認とキャッシュの削除ができることがわかりました。 URLリンター – Facebook開発者 こちらでOGPの入力内容の確認とキャッシュが削除できるので便利です。
Facebook公認：フェイスブックページを検索上位に表示させる６つのポイントを読み解く
exhige.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、exhige.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ActyWay.com is for sale | HugeDomains
logw-ログウ個人的な記録用- | 個人的な記録用サイト
Facebookページをアピール出来るソーシャルプラグイン・Likebox（いいね！ボックス）をオリジナルデザインに変更する方法
