タグ : HTML

Facebookの「いいね」ボタンをWordPressで設定する方法

Facebookの「いいね」ボタンをWordPressで設定する方法。
ちょいと面倒です。

まず、
OPGの設定
Create New Appにて、APP IDの取得する。
App Name:サイト名
を入力し、続行をクリック。

OGPの設定については「Facebook の OGP 設定の有無による違い」で詳しく解説しています。

APP IDが表示されているのでメモ。
ウェブサイトにサイトURLを入力。
「変更を保存」する。

Admin Userのidを確認する。

http://graph.facebook.com/xxxxxx

xxxxxの部分に自分のfacebook usernameを入力しブラウザで開く。
(usernameがわからない場合、facebookにログインして自分の名前をクリックするとURLに表示されます。
取得していなければ、http://www.facebook.com/usernameで設定する。)

すると以下が表示される。

{
   "id": "123456789",
   "name": "name_ab",
   "first_name": "name_a",
   "last_name": "name_b",
   "link": "http://www.facebook.com/xxxxx",
   "username": "xxxxx",
   "gender": "sex",
   "locale": "ja_JP"
}

一番上のidをメモる。

WordPressに「Open Graph protocol」というプラグインをインストール

Open Graph protocolの設定画面にて

Admin User(s):123456789
(http://graph.facebook.com/xxxxxxで確認したid)

Application ID:OPGの設定で取得したAPP IDを入力

「変更を保存」する。
すると、header部分に以下が記述される。

<meta property="og:title" content="" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="" />
<meta property="fb:admins" content="youradmins" />

facebookのいいねボタン設定
facebook Like Button
以下を自分好みに変更する。
URL to Like:サイトURL
Send Button:Sendボタンの有無
Layout Style:ボタンのデザイン
Width:設置する幅
Show Faces:いいねボタンをクリックした人の写真
Verb to display:「いいね」か「おすすめ」の選択
Color Scheme:色の選択
Font:フォントの選択
をして、「Get Code」をクリックする。

すると、以下が表示される。
まず、以下をbodyの下にペーストする。
(HTML5の場合を表示。おそらくHTML5が無難かと・・・)

<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
 (function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=428222087195989";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
// ]]></script>

さらに、以下を「いいね」ボタンを設置したい場所に記述する。
WordPressの場合

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>

(これは、ボタンの設定によって異なります。
data-href=の部分のURLを”“に変更すればOK)

これで、「いいね」ボタンとOGPの設定は終了。

最後に
OGPが正しく動作しているかどうか確認
facebook デバッガー
エラーがでなければOK。

HTML5 全国統一実力テスト

「HTML5 全国統一実力テスト」
というものがありました。

HTML5 全国統一実力テスト

HTML5、JavaScriptの実力を試すのにどうでしょう?

HTML/CSSコースとJavaScriptコースが用意されている。
HTML/CSSコースは全16問、JavaScriptコースは全21問。
試験問題はカヤック、監修はピクセルグリッド。

ブラウザ上でコーディング共有ができるサービスを行っているjs do.it
Google chromeとWindowsIE9がスペシャルサポートとして参加している。

HTML5 全国統一実力テスト
http://jsdo.it/event/html5cat/2011/summer/

IE対策 Google Chrome Frame

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

これをHTMLのヘッダーに入れてやると、IEで閲覧している場合、Google Chrome Frameで表示します。
Google Chrome Frameがインストールされていない場合は、IEの利用可能な最新のレンダリングエンジンで表示します。
IE9でQuirksモードで表示が崩れてしまうときにも有効。

Google Chrome Frameとは、Google Chromeで使用されているレンダリングエンジンやJavaScriptエンジンなどを、IEの古いバージョンでも利用できるようにするプラグイン。
インストールすると、IE8以下でもCanvas、CSS3、HTML5、高速なJavaScriptエンジンが利用できるようになります。

Google Chrome Frame
http://www.google.com/chromeframe/?hl=ja

9月22日にInternet Explorer(IE)用プラグイン「Google Chrome Frame」の最新安定版が公開された。

HTML5・XHTML DOCTYPEと文字コード

HTML5とXHTMLのDOCTYPE・文字コード情報の違いについて。

http://www.w3.org/TR/html5-diff/
HTML5サンプル

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

このサンプルを見ると、

<!doctype html>

とDOCTYPE宣言されています。
HTML5では、頻繁に書く必要のあるものは簡単に書けるようにしよう!という考えがあり、簡単になっています。

XHTMLでは、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

でした。

文字コード情報も短くなりました。
HTML5
[hrml][/html]
となりました。

XHTML
[hrml][/html]
でした。

HTML5になると、いろいろ簡単になりますね。

HTML「平方メートルと立方メートルと階乗」の書き方

WEBサイトで平方メートルと立方メートルと階乗の表し方に困ったことありませんか?
ってことで、HTMLでのm²、m³、3²の書き方を。

記述方法

平方メートル(m²)

→ m&sup2;

立方メートル(m³)

→ m&sup3;

階乗(3²)

→ &sup2;
もしくは
523
→ 5<sup>23</sup>

フォントサイズによっては読みづらいかもしれません。