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月
F8で発表されたプロトタイピングツール Origami Studioの気になる機能いくつか - よりぶろ
Facebookの開発者向けイベントF8でOrigami Studioが発表されましたので、ビデオの中から気になった機能をざっとまとめてみました。 Rapid Prototyping Made Easy with Origami Studio - Videos - 開発者向けFacebook ちなみに年内には無料でリリースされるようです。楽しみ〜！ ページのスクロール 複数のスクリーンを1つのフォルダにまとめて、それに対してScroll Xを適用。スクロールのタイプをPageにすることで、区切られたスクロールが可能。 Alert Viewがめっちゃ簡単に追加できる 中の文言も編集できます Screen Transition パッチ Origamiの鬼門だった画面遷移が作りやすくなってる。これは嬉しい。 Grid / Listのループ Adobe XDと似てますな という感じで、他にも紹介が
Basic認証下でFacebook等のOGP確認方法 - Qiita
開発中のサイトでOGPの動作確認をしたい時、 Basic認証をかけているとFacebookやmixi等のクローラがOGPタグを取得・解析出来ない。 そこで、それらクローラからのアクセスは以下の様にBasic認証無しにする。 AuthUserFile /path/to/.htpasswd AuthGroupFile /dev/null AuthName "Input ID and Password." AuthType Basic BrowserMatchNoCase facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php) is_facebook=1 BrowserMatchNoCase mixi-check/1.0 (http://mixi.jp/) is_mixi=1 Satisfy any Re
og:image 徹底解説、意味も設定画像スペックもこれでばっちり！ 2024年1月更新-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
この記事のポイントは… 主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイキャッチ画像の概要と設定方法を詳しく紹介する記事です。 アイキャッチ画像（サムネイル画像やOGP画像とも呼ばれます）とは、サイト内やSNSのタイムライン上に記事URLと共に流れる記事の顔となる画像のこと。 アイキャッチ画像を利用するために必要な知識、画像の仕様と非デザイナー向けの作成方法、アイキャッチ画像をHTMLのメタ要素OGP内で指定する方法を記事内で詳しく解説しています。 この記事は、2024年01月12日に更新しました！ ウェブ記事のアイキャッチとなるタイトルを載せた画像、ソーシャルメディア上で、良く見ませんか？まさにこの文章のすぐ上にある「徹底解説」と書かれた画像も、アイキャッチ画像のひとつです。 この記事は、主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイ
facebookでシェアされたときに表示させる画像を指定する方法
企業サイト等に「いいね！」を埋め込む時に押さえておきたいのでメモ。 ■facebookでシェアされたときのサムネイル画像を指定する方法(サイト運営側) 例えば商品ページとかに「いいね！」を埋め込んでfacebookユーザーにシェアされても、デフォルトはfacebookがテキトーに抜き出した画像がサムネイルになるっぽいのでナビゲーションの画像がサムネイルになったりする事もある。 それだとなんだかパッとしないので、シェアされたときにサムネイル画像にして欲しいファイルをこちらから指定する必要がある。 metaタグに以下のように書けばOK。 <meta property="og:image" content="http://から始まるサムネイル画像ファイル.jpg" /> こんだけ。 ■どんなふうに表示されるかのチェックも忘れずに。 チェックツールとしてfacebookの「URLリンター」を使用し
text.ssig33.com - Facebook アプリ開発で注意しておくべきこと
Facebook アプリ開発で注意しておくべきこと についてまとめる。以下を守るのはめんどくさいかもしれないが、なるべく守ったほうがよい。 Facebook へのアクセスは失敗するという前提で作る これ最重要 概要 追加権限の取得を必須にしない API アクセスは高い確率で失敗するので失敗した場合のことを常に考える これら二点の問題の解決には JavaScript でなるべく処理することが有効（かもしれない） 追加権限の取得まわりについては、こちらの長文が参考になります。あと当該記事にもコメントしましたが Facebook API の追加権限取得については、「追加権限をどのように使用するか」の説明を追加権限取得時に説明することが出来ます。あまり分かりやすい UI じゃないですが、書かないよりは書くほうがマシです。 また、上記記事は、いわゆる Web のエキスパートユーザーが執筆したもので、
Heroku + CakePHPで短歌サイトを高速で開発してみた : candycane development blog
みんなの短歌 Hinetterという短歌を投稿できるサイトを作ってみました。ここのところよく解説していたHerokuのPHPスタックの上にCakePHP2.1とJQuery Mobileを載せて開発しています。アイデアを思いついてからは24時間くらい、実質の開発時間は半日ほどで特にFacebook連携と見た目の部分に時間をかけた感じです。Herokuによる開発速度はとんでもない月曜の朝にFacebookのウォールになんとなく短歌を投稿したのですが、その後なんとなく話しが盛り上がり名前の案が出た所でheroku createしています。当日の夜は何もせず、翌日下北沢オープンソースカフェで作業を始めました。環境の構築などが必要なく、ただひたすらにGitでpushするだけでいいのでお昼すぎには動くアプリをデプロイする事ができました。また副産物としてCakePHP2をHerokuで動かす為のプラグ
Facebook のソーシャルプラグインを導入しよう その2 | バシャログ。
最近朝が寒すぎて、毎朝「死んだらどうしてくれんだ」とかブツブツいいながら歩いてる kimoto です。 え！？明日雪降るの！？ さて、以前書いた「Facebook のソーシャルプラグインを導入しよう」という記事が好評をいただいてます。 ということで、今回はその時紹介しなかったプラグインを紹介していこうと思います。 Facebook のソーシャルプラグインのページはこちら。 それではどうぞ。 Subscribe Button まずは、前回の記事の時にはまだ無かったプラグイン、「購読ボタン」です。 友達になりたいわけじゃないけど発言は常にフォローしたい。そんな時に「購読」という行動を取れるようになりましたが、それをワンクリックで行うことのできるボタンを外部サイトに置けるプラグインです。 このページに行くと、以下のような入力フォームが現れます。 「Profile URL」に、誰のフィードなのか、
facebookでのAPCの設定 - おぎろぐはてブロ
php|tek 2007で発表された、facebookの中の人のAPCの設定についての話です。軽く中身を説明します。 apc@facebook (PDF) apc@facebook (PDF) 2007/09/21 追記 サイトの構成が変わって、スライドがデッドリンクになっていたため差し替えました。また、今月開催されたphp|works 2007での講演もアップされています。こちらのが読みやすくなっている部分があるので、こちらを参照したほうがいいかも。 apc@facebook (PDF) in phpworks2007 http://tekrat.com/talks 内容 LAMP構成で、そしてAPCを使ってます Facebookのprofile.phpの表示を例にあげると、ノーマルのPHPに比較して、FacebookのチューンしたAPC設定では秒間リクエスト数が12倍に！ ちょ、、それ
facebookのいいね！などのリンクでウォールに表示される画像を指定する方法（OGP：Open Graph protocol） | 30代サラリーマン本気で副業
Blog > SNS > facebook > facebookのいいね！などのリンクでウォールに表示される画像を指定する方法（OGP：Open Graph protocol） facebookのいいね！やコメントなどで、ウォールに表示された画像が、表示させたいものと違うことってよくありませんか？ せっかく記事がシェアされても、なんのこっちゃわからない画像のせいで、クリックしてもらえないこともしばしば。。 これは、OGPと呼ばれる情報を追記してあげることで制御することができます。 OGP：Open Graph protocolとは？ OGPとは、「Open Graph Protcol」の略。 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 詳細は、「The Open Graph Protocol」の
Facebookページの作り方 2012年1月版
2013年3月23日 Webサイト制作 一年ちょっと前に「Facebookページを自由にカスタマイズする方法」という記事でFacebookページの作成方法を説明したのですが、Facebookはコロコロ仕様を変更するため、その記事を読んでもFacebookページは作れませんｗ 今や使い物にならない記事にもかかわらずアクセス数はかなりあるので、訂正…というか新仕様にあわせたFacebookページの作成方法を説明します。 ↑私が10年以上利用している会計ソフト！ 冒頭でも書きましたが、Facebookページの作り方についての記事は、半年以上前に書かれたものはアテにしないほうがいいです。それほどFacebookは仕様変更のスパンが短いのです。この記事もあと半年後には書き直しなのか…そうなのか…。 基本的なFacebookページの作り方 まずはFacebookページを新規作成します。こちらの「Fac
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Loading...