タグ

OGPとFacebookに関するelm_arataのブックマーク (5)

  • ベストプラクティス - シェア機能 - ドキュメンテーション - Meta for Developers

    ウェブサイトとモバイルアプリにFacebookシェア機能を実装して、利用者の理解と信頼を得られるアプリエクスペリエンスを構築するためのベストプラクティスについて説明します。

    ベストプラクティス - シェア機能 - ドキュメンテーション - Meta for Developers
    elm_arata
    elm_arata 2018/02/01
    ベストプラクティス
  • 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
  • ★★Facebook・TwitterのOGP設定方法まとめ|ferret [フェレット]

    運営しているホームページやWebサイトで、OGP設定は行っていますか? OGPとは「Open Graph protocol」の略称。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。 そこで今回は、最新のFacebookの仕様に準ずるOGPの設定や確認方法、注意点などを紹介します。 OGPとは OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。 上の赤枠のように表示を目立たせることが可能で、URLだけの場

    ★★Facebook・TwitterのOGP設定方法まとめ|ferret [フェレット]
  • これで一撃!簡単にOGP画像をつくれる2つの秘密道具!

    こんにちは!デザイナーのわりえもんです! ドラえもんみたいな見た目の、のび太みたいななにかです。 デザイン制作に役立つ秘密道具を紹介します! さて今回はサイト・アプリ制作に必需品な Facebook OGP画像つくりに役立つ2つの秘密道具をお教えします! 2014年1月現在、OGP画像の表示には大きくわけて2種類あります。 一つの画像で、どっちの表示でもきれいにつくるのは結構悩みますよね。 のび太くんには到底つくれなさそうです。 でも、たった2つのの秘密道具で、OGPつくりは劇的に楽になります! 秘密道具その1 : ただ画像をいれるだけ!秘密のpsd! 今回のために用意した秘密のpsd を用意しました! こちらからダウンロードしてみてください! PSD DOWNLOAD 「見せたい要素が横長」の場合 これは横長いロゴです。ロゴの部分がどんな表示でも切れないようにしたいですね。 これを全ての

    これで一撃!簡単にOGP画像をつくれる2つの秘密道具!
  • WordPressをFacebookのOGPに対応させるシンプルなプラグイン「MW OGP」を作りました。

    WordPressをFacebookのOGPに対応させるプラグインはWP OGPやOpen Graph Proがスタンダードのようですが、どこかおかしかったり設定がごちゃごちゃしていたりとイマイチ使いづらかったので、シンプルで簡単に使えるものを自作してみました。 特徴 OGPタグ、Facebookのscriptタグ、<div id=”root”></div>を挿入します。 シングルページではog:type article、og:url、og:title、og:description、og:imageは記事の情報から取得。シングルページ以外ではトップページの情報を返します。 og:imageはアイキャッチ画像 > 記事中の1枚目の画像 > MW OGP管理画面で設定した画像の順に優先されます。 GPL2ライセンス ダウンロード 使い方 1.インストール MW OGPをダウンロードして、お使い

    WordPressをFacebookのOGPに対応させるシンプルなプラグイン「MW OGP」を作りました。
  • 1