タグ

ogpに関するturusuke_0のブックマーク (7)

  • Pablo by Buffer - Design engaging images for your social media posts in under 30 seconds

    Pablo We're so sorry, we don't quite have this working for mobile yet. Please check it out on your desktop or tablet. To hear all the updates, follow us on Twitter!

    Pablo by Buffer - Design engaging images for your social media posts in under 30 seconds
  • 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月

    OGP画像シミュレータ | og:image Simulator
  • Basic 認証中のページで OGP のテストをする - modifiedの日記

    Basic 認証中のサイトだと Facebook の OGP の確認ができない。 これは、「いいね!」ボタンを押した後に、Facebook のクローラが OGP を改めて読みにくるため。 なので、「Facebook のクローラには Basic 認証を適用しない」設定を追記すれば良い。 Facebook からのアクセスは "GET / HTTP/1.1" 401 480 "-" "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" こんな感じのログを残すので、 『UserAgent : facebookexternalhit』を許可する # Basic の基設定 AuthUserFile /path/to/.htaccess AuthGroupFile /dev/null AuthName "

    Basic 認証中のページで OGP のテストをする - modifiedの日記
  • mixiチェックボタンにOGPが反映されなかった原因と解決法 | WebDelog

    iPad3を買いました。 電子書籍とかPDFを突っ込んだり、 これまでに買った映画を突っ込んでみたりして楽しいおうち生活を送ってます。 mixiチェックボタン 今回はmixiチェックボタンでつまずいたので、 その原因と解決法をメモしておきます。 mixiにはソーシャルボタンが2つ用意しており、 『mixiいいね』と『mixiチェック』があります。 mixiいいねボタンもmixiチェックボタンもこちらよりパートナー登録することによりキーが発行され作成できるようになります。 mixiいいねは設置するURLを登録した時にHTMLを発行してくれるのですが、 mixiチェックはこちらの技術仕様を見ながら作成することになります。 設置方法は仕様書にあるように簡単(?)です mixiチェック href、class、data-key、data-url属性は必須です。 mixiチェックボタンを押すとこん

  • OGPの設定

    facebook いいねボタンの仕様変更?OGPの設定についてまとめました( localeプロパティについて) 『いいね!』ボタンのOPGについて FacebookのいいねボタンのOGP設定に若干の変更がでておりましたので補足記事を含め作成しました。今回の記事だけでいいねボタンの作成からOGPの設定までを再構築しました。facebookは仕様がよく変わるので一部のキャプチャーが違うかもしれませんが大体同じ感じになっています。 現状(2011.12.16)でURLリンターを使ってみると下記のような『Warning』の警告が出てしまうようです。 『The og:locale property should be explicitly provided, even if a value can be inferred from other tags.』 警告のコメントを翻訳にかけてみた結果、どう

    OGPの設定
  • Facebookのウォールでちょっとアピールする方法(OGP) - EC studio デザインブログ

    サイトに設置した「いいね!」を押したとき、 タイトルとテキストだけではちょっと物足りない感じがしませんか? OGP(Open Graph protocol)の対応をおこなうだけで、 ウォールが少し華やかになります。 弊社サービスサイト「チャットワーク」で対応した時におこなった対応方法を紹介したいと思います。 弊社サービスサイトのOGP対応後 OGPを使うとどうなるの? OGP(Open Graph protocol)を使うと、 「いいね!」を押してウォールに投稿するときに、 タイトルや概要、表示する画像を指定することができます。 通常はFacebookが自動で表示してくれます。 OGPに対応する前のデフォルトはこのように表示されていました。 OGP対応方法 htmlタグの記述 まず、htmlタグにOGP用の記述を追記します。 「xmlns:og="http://ogp.me/ns#" xm

  • フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

    みなさん、こんにちは お元気ですか?僕は元気です。 さて 最近よく、「いいね!」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP (Open Graph Protocol)と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー??とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す

    フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
  • 1