menu
menu

キーワード検索

 

前月(11月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

【Facebook】Facebookいいねボタンの設置

【Facebook】Facebookいいねボタンの設置

こんにちは(・∀・)

今回はFacebookいいねボタンの書き方が少し変更になったので新しい書き方についてご紹介します。

Facebookいいねボタン

Facebook DevelopersのLike Button for the Webのページを開きます。

URL to Like

ボタンを設置するホームページのURLを入力します。

Width

横幅を指定します(空欄でもOK)。

Layout

standard、box_count、button_countまたはbuttonの中から選択。

Action Type

Likeがいいね、recommendがおすすめ。

Show Friends' Faces

standardを選択した場合ボタンの下にいいねした人のアイコンが表示されます。表示したくない場合はチェックを外します。

Include Share Button

シェアボタンを表示します。表示したくない場合はチェックを外します。

Get Codeをクリック

ポップアップ画面が表示されたらアプリIDをボタンを表示するサイトのIDに変更します。

言語を設定します。日本語ならそのままJapaneseでOK。

1. 1のコードを開始<body>タグの直後に貼り付けます。

すでに他のFacebook Pluginなどで1のコードを使用している場合、ここでは必要ありません。

2. 2のコードをボタンを表示させたい場所に貼り付けます。

以上でFacebookいいねボタンの設置は終了です。

data-hrefのURLは固定のURLになります。URLを動的に取得したい場合はdata-hrefのURLの書き方を変更します。

初期値はURL to Likeで入力したURL

data-href="https://www.webdlab.com/"
PHPでURLを取得

data-href="<?php echo $_SERVER["REQUEST_URI"]; ?>"
JavaScriptでURLを取得

<script>document.write('<div class="fb-like" data-href='+location.href+' data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>');</script>

+location.href+はシングルクォーテーションで囲ってください。


関連リンク

【Pocket】Pocketボタン
【Twitter】Twitterボタン
【B!】はてなブックマークボタン
【Google】Google+1ボタン

まとめて解説
【制作Tips】ソーシャルブックマークボタン

  • Facebook ソーシャルブックマーク
このエントリーをはてなブックマークに追加