さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【Facebook】「いいね!」ボタンの設置方法

Pocket
LINEで送る

自分のブログサイトなどにFacebookの「いいね!」ボタンを設置する方法をご紹介します。

下記のページでボタンのコードを生成して、生成したコードを自分のブログのボタンを設置したい箇所に貼り付けるだけで設置できます。
お試しあれ!

【入力項目の説明】

URL to Like:ボタンを設置したいブログ等のURL
Send Button (XFBML Only):Sendボタンを付けるかどうかの設定です。
Layout Style:設置するボタンの種類を選びます。
Width:ボタン等を表示する領域の幅の設定です。
Show Faces:チェック状態の場合にボタンの下にユーザーアイコンが表示されます。
※「いいね!」がチェックされないと、スペースが空いてしまいますので注意してください。
Verb to display:ボタンに表示されてるテキストを選択します。「Like」が「いいね!」になります。
Color Scheme:色の選択です。「light」(明るい色)か「dark」(暗い色)を選択します。
Font:表示するフォントタイプの選択ですが、日本語表示に変わるので設定しても意味ありません。

上記を設定後に「Get Code」をクリックしコードを生成します。
(「iframe」欄のコードを使用してください。)

※ブログの各記事ページで使用する場合、記事毎のURLを設定する必要があるので、下記の赤文字のURLコード部分を記事のURLを生成する変数などに書き換える必要があります。
(下記はNucleusの場合のコードです)

<iframe style="border: none; overflow: hidden; width: 130px; height: 21px;" src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmakochin-web.net%2F%3Fitemid%3D<%itemid%>
&send=false&layout=
button_count&width=130&
show_faces=true&action=like&
colorscheme=light&font&
height=21" width="300" height="150" frameborder="0" scrolling="no"></iframe>

カテゴリー:HP制作, Facebook

コメント - 2件のコメントがあります。

  1. mimi より:

    おひさしぶりです!
    勉強になります♪このブログ楽しみにしています?♪

  2. 管理人 より:

    mimiさん >
    お久しぶりです。
    今までのような制作メインの仕事ではなくなってしまったので、制作技術に関しての記事は少なくなってしまうかもしれませんが、なるべく更新するようにしますね!

コメントを残す

コメント内容