9月更新・前月(8月)の人気記事トップ10 09/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 09 ↑) 【Mac】Safariでソースコードを見る方法
- ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
- ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
- (圏外↑) 【GIMP】レイヤーをロック
【Labs】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+はシングルクォーテーションで囲ってください。
関連リンク
【Labs】Pocketボタン
【Labs】Twitterボタン
【Labs】Google+1ボタン