初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

HTML Facebookを埋め込む

HTMLでFacebookを埋め込む方法を記述します。

個人のページでは出来ず、Facebookページ(旧ファンページ)のみがWebサイトに埋め込む事が出来ます。
なのでFacebookは、Facebookページを作成する所から始まります。

Facebookページを作成したら、開発者ツールから埋め込みたいウジェットを選択し、コードをコピーしHTMLに貼り付ければOKです。ただFacebookの場合、サーバー環境上で無いとデータが表示されないのでXamppなどを使って確認してみましょう。

Facebookコード作成ページ

f:id:bellsmarket:20150320001249p:plainf:id:bellsmarket:20150320001256p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Fcebookの埋め込み方</title>
</head>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElem[f:id:bellsmarket:20150320001547p:plain]entById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="500"></div>
</body>
</html>

f:id:bellsmarket:20150320001547p:plain

topへ戻る