タグ

facebookに関するyomikodesignのブックマーク (5)

  • Twitter カード 7タイプの使い方をカード種別ごとに解説するよ

    Twitter カード 7タイプの仕様を Twitter の公式ドキュメントから翻訳して解説します。公式ドキュメントから抜粋して日語で書き直していますので完全な翻訳ではありません。 Twitter Cards (Twitter カード)、この Blog でもかなり前から指定して使っていますが、7種類のカードから選択できたり、それぞれに指定できる値が異なってたりしてわかりにくいっていう声を聞きましたので (公式な日語ドキュメントも今のところないし)、簡単に各カード種類別の仕様をまとめてみました。 Twitter Cards は、Facebook や Google+ などが採用している、OGP (Open Graph Protocol) を利用して、ウォールやタイムラインにリンクを投稿する際の表示内容を指定するのと同じ。それの Twitter 版です。タイムラインに URL が投稿されたと

    Twitter カード 7タイプの使い方をカード種別ごとに解説するよ
  • 各種SNSへのシェアボタン設置方法まとめ - Qiita

    <a href="http://www.facebook.com/sharer.php?u=`シェアしたいurl`&amp;t=`シェアしたいタイトル`" onClick="window.open(encodeURI(decodeURI(this.href)), 'sharewindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!' ); return false;"> `シェアボタンに相当する画像や文言など` </a> シェアした時の画像や文言などは、ogp(オープングラフプロトコル)に従う。 facebookにはキャッシュがあり、facebookキャッシュを削除しないと各種変更が反映されないこともあるので注意。 ▼facebookキャッシュの削除は、下記urlから https

    各種SNSへのシェアボタン設置方法まとめ - Qiita
  • 【完全版】これであんたもシェア名人。Facebookシェアボタンの実装方法まとめ

    どうも、イソップです。 Facebookシェアの実装方法って何種類もあってわかりづらかったのでまとめてみました。 シェアボタンはいいねボタンとどう違うのか。 それから公式ボタンの作成方法やリンクでのシェア設定、JavaScriptでの設定方法をご紹介します。 Facebookシェアとは Facebookのシェアは、シェアしたいサイトの情報を自分と友達のタイムラインに表示させる仕組みです。 勘違いしてほしくないのですが、「いいね!」とは少しだけ挙動が違います。 いいねは友達のタイムラインにいいねしたことが表示されますが、自分のタイムラインには表示されません。 いいねはリアクションで、シェアは共有という位置づけなので、Facebookで拡散させるにはシェアが断然効果的です! また、シェアされる情報はシェアするページのOGP情報です。 ボタンの設定ではシェア内容は変更できませんのでご注意を! そ

    【完全版】これであんたもシェア名人。Facebookシェアボタンの実装方法まとめ
  • OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 - OPTPiX Labs Blog

    こんにちは、ウェブ担当の嶋です。 Twitterと並んでSNSの代表格となったFacebook。ウェブテクノロジでは公式ページとともに「OPTPiX SpriteStudio ユーザー助け合い所」というグループも開設し、ユーザー様と情報を相互にやりとりしています。 Facebookは、URLを含む投稿やシェアをすると、自動的にそのURLからタイトルや概要、画像などを取得して表示してくれます。リンクをクリックする前にどんなサイトなのかなんとなくわかるのは非常に便利なのですが、こういう形でシェアされているのをよく見かけませんか? ページのタイトルや見出しは適切なのですが、サムネイル画像として表示されている画像の左右が切れてしまっています。また、表示されている画像もサイトのトップページを紹介する画像としては適切ではありません。 これはOGP(Open Graph Protocol)の設定が行われ

    OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 - OPTPiX Labs Blog
    yomikodesign
    yomikodesign 2016/02/17
    こんなんあるんだ…!!すごい
  • og:image 徹底解説、意味も設定画像スペックもこれでばっちり! 2024年1月更新-Six Apart ブログ|オウンドメディア運営者のための実践的情報とコミュニティ

    この記事のポイントは… 主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイキャッチ画像の概要と設定方法を詳しく紹介する記事です。 アイキャッチ画像(サムネイル画像やOGP画像とも呼ばれます)とは、サイト内やSNSのタイムライン上に記事URLと共に流れる記事の顔となる画像のこと。 アイキャッチ画像を利用するために必要な知識、画像の仕様と非デザイナー向けの作成方法、アイキャッチ画像をHTMLのメタ要素OGP内で指定する方法を記事内で詳しく解説しています。 この記事は、2024年01月12日に更新しました! ウェブ記事のアイキャッチとなるタイトルを載せた画像、ソーシャルメディア上で、良く見ませんか?まさにこの文章のすぐ上にある「徹底解説」と書かれた画像も、アイキャッチ画像のひとつです。 この記事は、主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイ

    og:image 徹底解説、意味も設定画像スペックもこれでばっちり! 2024年1月更新-Six Apart ブログ|オウンドメディア運営者のための実践的情報とコミュニティ
  • 1