> > OGP設定「いいね!」ボタンを設置



OGP設定「いいね!」ボタンを設置



はてなブックマーク、Twitter、mixi、Facebook など、ソーシャルメディアなどと連携したウェブサイトへのアクセス誘導のプログラムが多いが、最も効果的なものは、OGP(Open Graph Protocol)を設定したFacebookの「いいね!」ボタンと言われる。

HTMLページがどんな情報を持っているか?META情報をソーシャルメディアのプログラムに読んでもらうOGP(Open Graph Protocol)は、まるで独自ドメインのHTMLのページがFacebookのページかのように見せてくれる仕組みです。

OGPの設定の素晴らしい点は、

1.いいね!ボタンを押した情報が友達に飛ぶ
2.ニュースフィードでの表示内容を指定できる
3.いいね!ボタンが押されるとfacebookページが出来上がりアップデート情報を送れる

自分のウォールに表示されるだけでなく、友達のニュースフィードには飛んでくれるのが最大の利点です。

このOGP(Open Graph Protocol)のすばらしさが理解できたとしても、実際に設置してみようと思うと、いろいろわかりにくい部分もありますので具体的な手順をご紹介します。

<META情報の記述方法>

<html
xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">

<head>

<meta property="og:title" content="★記事タイトル★" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="★ページurl★" />
<meta property="og:image" content="★画像url★" />
<meta property="og:site_name" content="★サイトのタイトル★" />
<meta property="og:description" content="★ページの紹介文★" />
<meta property="fb:app_id" content="★アプリID★" />


「いいね!」ボタンを設置するページのMETA情報で加える部分は以上です。


Movable Type の場合は、テンプレートで

★記事タイトル★
<$mt:EntryTitle$>

★ページurl★
<$mt:EntryPermalink$>

★画像url★
<$mt:If tag="EntryDataFacebook_image"$><mt:EntryDataFacebook_image><mt:Else>http://www.pb-support.com/img/pbsuppert2.jpg</mt:If>

★ページの紹介文★
<$mt:EntryExcerpt$> <$mt:EntryBody words="100"$>

のような感じで記述すればいいと思います。


★アプリID★は、Facebookデベロッパーズサイトのアプリ作成画面にアクセスし取得します。


■ OGPを設置したサイト名・URLを入力。




■ セキュリティチェックのワードを入力。




■ 「Create an App」というアプリIDの作成完了画面が表示される。



※ この画面の「アプリID」を★アプリID★の部分に書き替える。



次に、「いいね!」ボタンを設置する場所に以下のタグを記述する。
(Facebookデベロッパーズのブラグイン発行は現在、FBMLのみで不可)

<iframe src="http://www.facebook.com/plugins/like.php?href=★ページurl★" scrolling="no" frameborder="0" style="height: 62px; width: 100%" allowTransparency="true">
</iframe>

Movable Type の場合は、ブログ記事に以下で置き換える。
★ページurl★
<$mt:EntryPermalink$>



以上で、以下のようなOGP設定の「いいね!」ボタンが設置されます。



ページを見てくれたFacebook ユーザーが
「いいね!」ボタンをクリックすると、コメント欄が表示されコメントも同時に記入できる。



「いいね!」ボタンをクリックしてくれた人のウォールと、
そのお友達のニュースフィードに以下のように表示される。





いかがですか?簡単でしょう!?

参考になったと思う方は、以下の「いいね!」ボタン、
「ツィート」ボタンを是非クリックしてみてください。




このエントリーをはてなブックマークに追加



Check

トラックバック(0)

トラックバックURL: http://www.nauinet.co.jp/mt6/mt-tb.cgi/415



Check
一般社団法人ジャパンEコマースコンサルタント協会特別講師
Kindle出版のAmazon出品解説書です。
ECzine執筆記事一覧です。
Amazon出品ファイル作成代行
ブログ新着情報プログラム

ブログ記事リスト

IEが勝手に起動
消してしまった画像復元
Amazon検索で商品を表示
Amazonカテゴリー分類
Amazonで商品を見つけてもらう
iTunesアップデートのトラブル
ブログ新着情報ブログラム
Amazon編集ソフトを作成
Amazon出品ファイル作成代行
ボックス感あるデザイン
CSS作成ツール
無料のSTORES.jpに出店
源泉徴収税が免税になった!
はじめてのAmazon出品ガイド
サイトテーマの構造化マークアップ
パンくずリストの構造化マークアップ
Kindle書籍アメリカ免除申請
一太郎で作る電子書籍
Amazon 商品画像登録ガイドライン
Amazon 商品名登録ガイドライン
商品画像処理代行
ファイルコンテンツコピー
パソコンの熱暴走を防ぐ
ドライブボリューム容量変更ソフト
プロダクトキー確認ソフト
PPCキーワード作成ツール
日本語プログラミング「なでしこ」参考集
営業日カレンダー
適切なコストで既存客を守るには
LTV-Pro体験版(iPhone用)
FileMaker Go 12の活用
顧客ポートフォリオ・LTV解析ソフト
楽天市場ヤフーショッピング一括編集ソフト
Yahoo!夏の大リニューアール
MTの画像配置
TwitterとFacebookの相互連携
簡単!自動でYahoo!ショッピング商品掲載
Googleのホームページ作成支援
Google +1 の登録と設置方法
人の集まるところに仮想露店を出店
チェックインクーポン発行の実践
Facebookタブ追加方法完全公開
オリジナリィティのタブアイコン
個人輸入で稼げるってホント?
チェックインクーポンの作成方法
Facebookチェックインポイント登録
App登録なしでFacebookタブ追加
Amazon EC2にSSHを設定する方法