WEBマスターのお仕事TOP > スポンサー広告 > facebook like(いいね)ボタンを設置しようWEBマスターのお仕事TOP > ソーシャルプラグイン設置 > facebook like(いいね)ボタンを設置しよう

スポンサーサイト

(--/--/--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

facebook like(いいね)ボタンを設置しよう

(2010/12/14)
2011/05/27追記
※iframeのコード生成は終了したようです。XFBMLで設置する場合をご参照ください。

※記事ページ(エントリーページ)毎にlikeボタンを設置するにはFacebook likeボタンを記事ページ(エントリーページ)ごとに表示をご覧ください。

共有ツールシリーズ第3段!ということでFacebookのlikeボタンの設置方法を紹介します。
最近ではtwitterでつぶやかれる(リンクを張られる)と、Googleの検索結果に多少影響するという話もあるので、これら共有ツールを設置しておいて損することはないですね。
以下記事もまだの場合は参考にしてください。
第1段:ツイートするボタンを設置しよう
第2段:mixiチェックボタンを設置しよう

facebook likeボタンを設置方法


Step1)facebook DEVELOPERSへアクセス


http://developers.facebook.com/docs/reference/plugins/like

Step2)必要項目に入力


facebook DEVELOPERS
URL to Like:likeボタンを設置するサイトのURL
Layout Style:レイアウトスタイルを選びます。画面右のプレビューを参考にしましょう。
-standard:デフォルトタイプ
-button_count:ボタンタイプ
Show Faces:チェックを入れるとボタンを押した人の顔写真が表示されます
width:likeボタンの設置幅です。Layoutがスタンダードの場合、「Be the first of your friends to like this」が表示されるので、横幅が結構必要です。
Verb to display:ボタンのラベルを「like」と「recommend」から(当記事作成時点で)選べます。
Font:表示フォントを選べます
Color Scheme:カラーパターンを選べます。

Step3)「Get Code」を押してコードをゲット&表示したい箇所に設置し完了!


facebook likeボタン コード
設置コードはiframeバージョンとXFBMLバージョンから選べます。
XFBMLはfacebookアプリプラグインをXHTMLで記述したい場合に使い、アカウント登録/アプリケーション登録が必要です。iframeは一般的にあまり推奨されてないタグなので、XFBMLでやる方が今風かもしれませんね。といいつつ私はiframeでさっくり設置してますが(汗)、登録作業などが不要なのでiframeの方がラクはラクかもしれません。

mixiチェックボタンよりだいぶ簡単に設置できました。
しかし、mixiにしてもfacebookにしてもこういう形で一般サイトと連携してくるようになるとは思ってもいませんでした。シェアボタンなどは正にネット上の情報の共有化オープン化のツールですが、比較的閉鎖的な日本においても少しずつ開国(オープン化)が進んできているように感じます。悪いことではないのではないでしょうか。

関連記事

コメント

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://goodjob4604.blog103.fc2.com/tb.php/87-8659c828
月別アーカイブ
Google+
Twitter
ページトップへ
ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。