WordPressに自前でFacebook OGPの設定を行う方法
FacebookのOGP対応に使っていたプラグインが最近不調だったので、数日前から自前での対応に切り替えました。以前から他のブロガーさんがやり方を紹介していたのは知っていたのですが、何となく難しそうだなぁと思っていて今までやってなかったんですよね。。。でもいざ挑戦してみたら拍子抜けするほどに簡単でした！ほぼコピペだけでOKなので、難しそうっていうイメージで躊躇されていた方は是非チャレンジしてみてください。 OGPとはThe Open Graph protocolの略。ざっくり言うと、サイトの内容をSNS上でより伝わりやすくするための情報、みたいなものです。設定しておくとシェアされた時の見栄えも良くなるし、Facebookだったら「いいね！」を押された時の効果も高まる。ブログやサイトを運営している人なら基本設定した方がいいと思います。 OGPについては以下の記事で懇切丁寧に説明してくれている
Facebook にウェブページを再クロールしてもらってキャッシュのリセットと OGP の書式チェックができるブックマークレット
Facebook にウェブページを再クロールしてもらってキャッシュのリセットと OGP の書式チェックができるブックマークレット 2011年12月02日 16:17Facebook OGP (Open Graph Protocol) という約束事がありますね。 Facebook などにウェブページなどの情報を伝えるのに使われるもので、 このブログのトップページだとこんな感じで書いてあります。 そのページが Facebook でシェアされたり「いいね！」されたりしたとき ここに書いた画像や説明文が拾われるわけですけど、 いったん取得されたら Facebook 側でキャッシュされてしまって いくら手元で書き換えても反映されない。 ただこの情報は OGP の書式を確認するためのこのツールを使うと Facebook のが現在の状態を取得しに来てくれるので 新しい状態に更新されますね。 Debugg
知っておきたいFacebookのOGPをBloggerに対応させる活用法 - Will feel Tips Blogger
前回の記事『自分の指定した任意の場所でJavascriptを実行させる Tipsまとめ』の中で、Javascriptを活用したSNSシェアボタンの設置を紹介しました。簡単でスピーディな情報拡散ツールとしてのSNSの利用を考えるのであれば、Facebookのいいね！ボタンもアクセス数を伸ばす一つの要素になっています。 但し、そのままボタンを設置しただけでは殆ど意味は無く、OGPを設定してあげることで本来の機能を引き出すことが出来るようになります。今回は現状での最善策と考えられる、BloggerをFacebookのOGPに対応させる方法を紹介致します。 OGP (Open Graph Protocol) とは何か 基本的な内容は下記Linkページにて詳しく解説されており、分かりやすく参考になります。 フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protoco
ant-eater.com - ant eater リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
BloggerをOGPに対応させるときのog:imageをなんとかする : たき備忘録
BloggerをOGP(Open Graph Protocol)に対応させるときに問題になるのが「og:image」です。この「og:image」には、記事内で使われている画像や、記事のサムネイルを指定するのが一般的です。しかし、Bloggerには利用できそうなデータタグが存在しないので、静的画像ファイルへのリンクを指定することしかできません。 そこで、記事のRSSから画像ファイルが使用されているかをチェックし、使用されていれば一番最初に見つかった画像にリダイレクトするWEBアプリケーションを作ってみました。以下のようなURLで取得が可能です。 BloggerSpice http://bloggerspice.appspot.com/postimage/[記事のURL] たとえば、この記事に使用されている画像を取得する場合は以下のように指定します。 http://bloggerspice.
Facebookソーシャルプラグインのロード時間を短縮する
Facebookの開発者ブログに、ソーシャルプラグインのパフォーマンス最適化についての記事が掲載されていましたので、本エントリーで紹介します。 How-To: Optimize Social Plugin Performance 「いいね!」ボタンやコメントボックスのソースコードを、ブログなどにそのまま貼りつけている方は、このエントリーで紹介しているものに書き換えればページの表示時間が短縮されるかもしれません。 パフォーマンスの最適化には、次の2つのベストプラクティスがあります。 １．channelUrlパラメータを追加する FB.initに、青色で示すchannelUrlパラメータを設定します。 <div id="fb-root"></div> <script src="//connect.facebook.net/ja_JP/all.js"></script> <script> FB.
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
Facebook・いいね！ ボタンとOGPの注意点 – 道道つれづれ線
本稿の公開は7年前です。内容・仕様が、現在と異なる場合があります。ご了承ください。 Facebook が幅広く浸透し、「いいね！」ボタンを設置するブログやサイトが増えてきました。Facebook のLike Buttonページで、必要なコードを取得します。設置手順をご存じの方は、注意点▼へお進みください。 手順については、丁寧な説明を書いた記事が多く存在します。本稿では、ごく簡単な記述にとどめます。 「いいね！」ボタンをコードを取得する 下図は、取得画面です。ボタンのサンプルがあり、オプションを変更すると、表示の変化が確認できます。 URL to Like サイトまたはブログの URL です。 Send Button （XFBML Only） チェックを入れると、「送る」ボタンも一緒に設置できます。シェアボタンと同等の働きをします。オプションを選択しない場合、iframe 形式のコードを取
OGPを設定しました（settings）
Blogger を Facebook に対応させる方法 Bloggerのデザイン、HTMLの編集で、「ウィジェットのテンプレートを展開」をチェックした後、下記の２つの変更を加えました。 １．太字の2行を追加。 「<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' x
Facebookに投稿する前に、OGPの設定を確認できる"URLリンター"について
本文に画像があるのに関係ないサムネイルが表示される例。OGPのイメージをサイト全体で設定している場合は仕方ないんですが。。 URLリンターの使い方 URLリンターにアクセスして、確認したいURLを入力し、Lintボタンを押すだけです。 http://developers.facebook.com/tools/lint/ og:imageについて OGPを設定する際に、たまにサイト全体に同じ画像を指定しているサイト/ブログがありますが、個人的にこれは逆効果になる場合もあるのではと思います。サイトのブランドロゴを常に出したい・・みたいな思いもあるかもですが、閲覧者にとっては記事ごとにサムネイルが表示される方がよいですよね。 Bloggerのog:imageについて このブログはGoogleのBloggerを使ってるんですが、やはりGoogleのブログですのでOGPへの対応は早急には進んでいない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger を Facebook に対応させる方法 | RunoLog
Facebook ソーシャルプラグイン（いいね！やコメント）を「正しく」設置する方法