ブログにFacebookのLikeBox(Page Plugin)を設置する方法

今回はブログにFacebookのLike Boxを設置する手順について説明していきます。一応今回はWordPressとseesaaブログ、アメブロでの設置方法ね。

このfacebookのLike Boxは2015年6月23日で廃止されるようで、「Page Plugin」への移行してね!って感じの事が書いてあるので、現在Like Boxを設置している場合にはコードを変更する必要がありそうです。

like-box-1

実際にこのブログでも現在Twitterのウィジェットと一緒に並べて「Page Plugin」を表示させてみました。

like-box-3

Facebookページを作成したらFacebookページの宣伝が必要なのでブログにこの「Page Plugin」を設置しておく事をおすすめします。

新しくなった「Page Plugin」は以前の「Like Box」とほとんど同じような感じですが、注意点としては横幅のサイズが「280pxから500pxまで」という事になっている点ですね。

スポンサーリンク

Page Pluginの設置方法

まずはFacebook DevelopersのPage Pluginのページへ移動。
Facebook DevelopersのPage Pluginのページ

移動できたらちょっと下にスクロールして入力フォームを探して、自分のFacebookページのURLや横幅とかを入力。私の場合は高さは特に指定していません。

like-box-4

横幅についてはこの「Page Plugin」をどこに設置するかをよく考えておく必要があります。候補としては「サイドバー」もしくは「記事下」。もしサイドバーに設置するのであればサイドバーの幅に合わせる必要があるので、事前にサイドバーの幅を確認しておきましょう。記事下も同じ。

それで先ほどの入力フォームの所に3箇所選択できる部分があります。

  • Show Friend’s Faces:友達の顔を表示する?
  • Hide Cover Photo:Facebookページに設定したカバー写真を隠す?
  • Show Page Posts:Facebookページの投稿も表示する?

という感じなのでこれはお好みで設定して下さい。

like-box-5

設定ができたら下にある「Get Code」ボタンをクリック。

like-box-6

するとコードが2種類表示されます。

like-box-7

説明によると上の1番目のコードをHTMLの「body」タグの直後に設置して、2番めのコードを表示させたい場所に設置するという解説になっています。

ただ、1番目のコードに関しては「body」タグ直後でなくても「body内」であれば機能はするようです。一応説明通りにやっておいた方が無難な気がします。

とりあえずこの2つのコードをメモ帳等にコピペしておいて、ここからは各ブログでの設置方法を紹介していきます。ちょっと長くなるのでナビを用意しておきます。特にSeesaaブログは「旧システム」と「新デザインシステム」でやり方がちょっと違うので注意。

WordPressにPage Pluginを設置

それではWordPressにPage Pluginを設置していきましょう。まずは先ほど取得した1番目のコードを「body」タグの直後に設置します。WordPressの場合はテーマによって若干違う部分もあるかもしれませんが、多くの場合は「header.php」に「body」タグがあります。

それとテーマによっては既に1番目のコードがどこかに設置されているテーマもあるので、「header.php」とか「footer.php」を一応確認してみた方がいいかも。旧コードなら書き直しが必要です。

とりあえず「body」タグの下に1番目のコードを入れます。私の場合(Twenty Twelve)ではこんな感じになりました。

like-box-8

これで1番目のコードの設置はOK。変更を保存しておきます。続いてPage Pluginを表示させたい場所に2番めのコードを設置します。

WordPressのサイドバーに設置する場合

サイドバーに表示させたい場合はWordPressの管理画面から外観⇒「ウェイジェット」と進みサイドバーに「テキスト」を追加。Page Pluginのサイズはサイドバーの横幅に合わせたコードを取得しておきましょう。

like-box-9

後はテキストの中身に先ほど取得した2番目のコードを入れて保存したらOK。

like-box-10

WordPressの記事下に設置する場合

続いて記事下に表示させる場合ですが、これはテーマによってかなり違うため説明ができないので省略。一般的には「single.php」に設置しているブログが多いのかな?でもせっかくなんでこのブログ(テーマはTwenty Twelve)の場合での解説をしておきます。

このブログの場合は取得した2番目のコードを「single.php」ではなくて「content.php」と「content-page.php」に設置してます。

「content.php」には「もし個別ページなら」という条件分岐も一応いれています。

<?php if ( is_single() ) : ?>

<div class="fb-box">
ここに取得した2番目のコード
</div>

<?php endif; ?>

「div class=”fb-box”」で囲っているのは後でCSSで位置調整するためにこの部分に名前を付けておきました。これを「content.php」のこのコードの「直前」に入れています。

</div><!-- .entry-content -->

こんな感じになってます。

like-box-11

「content-page.php(固定ページテンプレート)」の方は条件分岐が要らないのでdivで囲った2番めのコードをそのまま追加。追加する場所はこのコードの直前。

</div><!-- .entry-content -->

こんな感じになります。

like-box-12

後はCSSで位置調整等ができますのでCSSでちょっと位置調整をしてみましょう。

Page Pluginの位置調整

先ほど設置したPage Pluginには「div class=”fb-box”」と名前を付けておいたので、こんな感じで位置調整ができます。CSSの一番下に追加すればOK。(中央寄せにする場合)

.fb-box{
  text-align:center;  /* 中央寄せ */
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白 */
}

それからこのブログでやっているようにTwitterウィジェットと横並びにしたい場合はもうちょっと複雑。

Twitterウィジェットと横並びにする場合

先に設置する部分の横幅を調べおいて、「Page Plugin」の横幅をその半分くらいで作成しコードを作成しておきます。それとTwitterのウィジェットのコードを取得しておきます。

Twitterのウィジェットの高さは「250px」で作成。Twitterウィジェットの作成方法はこの記事で以前解説してます。
Twitterのタイムラインをサイドバーに表示する方法

両方のコードを取得できたら、「content.php」と「content-page.php」に追加したコードを書き直します。

「content.php」はこんな感じに書き直し。

<?php if ( is_single() ) : ?>
<div class="sns-box">
<div class="fb-box">
ここに「Page Plugin」の2番目のコード
</div>
<div class="tt">
ここにTwitterウィジェットのコード
</div>
</div>
<?php endif; ?>

「content-page.php」はこんな感じに書き直し。

<div class="sns-box">
<div class="fb-box">
ここに「Page Plugin」の2番目のコード
</div>
<div class="tt">
ここにTwitterウィジェットのコード
</div>
</div>

後はCSSで横並びになるようにする。

@media screen and (min-width: 600px) {
.fb-box {
  float: left;  /* 横並び */
  display: block;
  margin-right: 10px;  /* Twitterウィジェットとの間の間隔 */
  height: 250px;  /* Page Pluginの高さ */
  background: #f6f7f8;  /* 背景色 */
}
.tt {
  width:239px;  /* Twitterウィジェットの横幅 */
  float: left;  /* 横並び */
  display: block;
}
.sns-box:after{  /* float(横並び)解除のお約束記述 */
content:"";
display:block;
clear:both;}
}

最後の行が隠れているかも?最後までスクロールしてコピーね。Twitterウィジェットの横幅の部分は自分のブログの幅と相談しながら変更しておくこと。

これで横並びにならない場合はTwitterウィジェットの横幅の部分を小さくするかPage Pluginの横幅を修正してコードを書き換えるかして横幅に合うようにしておけば大丈夫です。

以上WordPressにPage Pluginを設置する方法。ついでにこちらの記事もどうぞ。

シーサーブログにPage Pluginを設置する【旧デザインシステム版】

それではシーサーブログの旧デザインシステムにPage Pluginを設置してみましょう。自分のブログが新、旧どちらのシステムか分からない場合には画像を比べて見ると分かると思います。管理画面とか違う部分が多いので。

先に大まかな手順だけ書いておきます。

Page Plugin設置のために取得したコードは2種類あります。1番目(上)のコードと2番目(下)のコードね。

like-box-7

これを踏まえて作業手順を書いておくとこんな感じ。

  • 2番目のコードをサイドバーもしくは記事下に設置
  • スマートフォン用にも設置
  • 最後に位置調整

本当は所得した1番目(上)のタグをHTMLの「body」直後に貼り付ける必要がありますが、seesaaブログ(旧システム)のPCページの場合はこの1番目のタグは無くても作動します。多分「いいねボタン」とか元々付いているので1番目のコードは追加しないくても大丈夫っぽいです。

もし設置後に上手く表示されない場合にはデザイン⇒HTMLと進み、HTMLの「body」タグの直後に1番目のコードを入れて試してね。

シーサーブログの場合はPCページとスマートフォンページが別々なんでそれぞれに設置する必要があるのでその点は注意。それではそれぞれ順番にやってみましょう。

シーサーブログのサイドバーにPage Plugin設置する場合【旧デザインシステム版】

サイドバーにPage Pluginを設置するにはサイドバーの横幅を考えておく必要があります。Page Pluginの最小幅が280pxなので280px以上は必要。サイドバーの幅を変更したいという場合には先にサイドバーの横幅を変更しておくといいかも。
シーサーブログのコンテンツやサイドバーの幅を変更するカスタマイズ

さて、話を戻してサイドバーに設置する場合にはシーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み、サイドバーに自由形式を追加。

アドセンス-2

自由形式を追加したら「自由形式」をクリックして中身を編集。ここに取得した2番目のコードを入れて「保存」。後で位置調整できるように「div」で囲って名前を付けておきました。

<div class="fb-box-side">
ここに取得した2番目のコード
</div>

こんな感じ。

seesaa-fb-pg-6

「保存」できたらこの自由形式の画面は閉じてコンテンツ一覧画面に戻ります。戻ったら念のため再度「保存」。

これでサイドバーに表示されているはずです。それから自由形式にタイトルを付けて表示させたい(Facebookページです!的な)という場合にはこの記事を参考に。
シーサーブログの自由形式にタイトルを表示させる方法

タイトル部分を表示させてこんな感じにもできます。

seesaa-fb-pg-3

シーサーブログの記事下にPage Plugin設置する場合【旧システム】

今度は記事下にもPage Pluginを設置していきます。個別記事とトップページの記事下にそれぞれ設置してみます。

先ほどと同じようにシーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み「記事」をクリック。

見出しタグ-7

「記事」をクリックして「コンテンツHTML編集」をクリック。

見出しタグ-8

HTMLが書いてある画面になるので「Ctrl」キーを押しながらアルファベットの「F」を押して検索窓を出現させ、<% if:blog.bookmark_service %>という部分(ソーシャルボタンのコード)を検索してみます。

もし、検索できない場合はタグのハイライトを無効にしてから検索。

タグチェック-5

するとこのようなコードがあります。

<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"></div>
<% /if %>

これがソーシャルボタンのコードです。設置する場所はソーシャルボタンの下に付けたいので、先ほどのコードの直後に次のコードを追加。

<% if:page_name eq 'article' -%>
<div class="fb-box">
ここに「Page Plugin」の2番目のコード
</div>
<% /if %>

ここでは「もし個別記事なら」という条件分岐タグと後で位置調整するために「fb-box」という名前を付けています。できたら一度「保存」して「記事」の画面を閉じ、コンテンツ一覧の画面に戻るので再度「保存」。追加したコードはこんな感じ。

seesaa-fb-pg-5

それで個別記事の記事下には設置した「Page Plugin」がSNSボタンの下に表示されているはずです。位置調整は後ほど。

seesaa-fb-pg-4

続いてトップページの下にも設置します。今度は管理画面から「デザイン」⇒「HTML」と進み、適応中のHTMLを選択。

HTMLの一番下の方にフッターを出力するコードがあります。

<div id="footer">

これがフッターの始まり部分なのでこのコードの下に次のコードを追加。

<% if:page_name eq 'index' -%>
<div class="fb-box-top">
ここに2番目のコードを入れる
</div>
<% /if -%>

先ほど個別記事の下に「もし個別記事なら」という条件分岐で広告を設置したので、今度は「もしトップページなら」という条件分岐。これで保存。これでトップページの一番下(フッター)に設置が完了。位置調整は最後にまとめて書きます。

シーサーブログのスマートフォンページにもPage Pluginを設置【旧システム版】

残りはスマートフォンページ。PCページで設置してもスマートフォンページには反映されないのでスマートフォンページにも設置が必要。

シーサーブログの管理画面から「デザイン」⇒「スマートフォン」⇒「コンテンツ」の順番にクリック。

seesaa-fb-pg-7

スマートフォンのコンテンツの中から「記事」をクリック。

seesaa-fb-pg-8

挿入テキスト(下部)の「+」をクリック。

seesaa-fb-pg-9

開いたテキスト入力部分にPage Plugin設置の「1番目のコード」と「2番目のコード」を両方入れます。

スマートフォンページではHTMLが編集できないので、「body」直前に入れる1番目のコードを入れる事ができないため、ここに2つのコードを両方入れます。

2番目のコードだけでも作動する場合がありますが、時々トップページに表示されない場合があるので、2つのコードを両方ここに入れておきます。

seesaa-fb-pg-11

完了したら「保存」を忘れずに。これでスマートフォンページのトップページ、個別ページ両方記事下にPage Pluginが設置できているはずなので、確認しておくこと。

確認する場合にはキャッシュ(以前のデータ)が残っているかもしれないので、再読み込みしてから確認。

Page Pluginの位置調整【旧システム版】

最後に位置調整をしておきます。一応色々なパターンがあると思いますが、簡単な位置調整だけしておきます。

/* サイドバーに設置したPage Plugin */
.fb-box-side{
  text-align:center;  /* 中央寄せ */
  margin-top:10px;  /* 上に余白 */
  margin-bottom:10px;  /* 下に余白 */
}

/* 個別記事に設置したPage Plugin */
.fb-box{
  text-align:center;  /* 中央寄せ */
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白 */
}

/* トップページに設置したPage Plugin */
.fb-box-top{
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白 */
}

以上でシーサーブログ(旧システム)にPage Pluginの設置が完了。

SeesaaブログにPage Plugin設置【新デザインシステム版】

ここからはSeesaaブログの新デザインシステム版の説明です。

Page Plugin設置のために取得したコードは2種類あります。1番目(上)のコードと2番目(下)のコードね。

like-box-7

これを踏まえて作業手順を書いておくとこんな感じです。

  • 1番目のコードをHTMLの「body」の直後に追加
  • 2番目のコードをサイドバーもしくは記事下に設置
  • スマートフォン用にも設置
  • 最後に位置調整

シーサーブログの場合はPCページとスマートフォンページが別々なんでそれぞれに設置する必要があるのでその点は注意。それではそれぞれ順番にやってみましょう。

まず、新デザインシステムの場合はまず1番目のコードをHTMLの「body」直下に入れる必要があります。Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザイン」をクリックして、「HTMLの編集」のタブを選択。

編集-1

HTMLの最初の方(デフォルトなら14行目付近)に「body」というタグがあるので、これの直後に1番目のコードを入れます。

編集-6

これで保存したら準備はOK。後は設置したい場所にコードを入れていきましょう。

シーサーブログのサイドバーにPage Plugin設置する場合【新デザインシステム】

まずはSeesaaブログの管理画面から「デザイン」⇒「コンテンツ」と進み、サイドバーに「自由形式」を追加。

編集-3

自由形式の歯車のようなマークをクリックすると自由形式の編集ができるので、自由形式の編集部分に次のコードを入れます。

<div class="fb-box-side">
ここに取得した2番目のコード
</div>

こんな感じになるので保存してね。

編集-4

「保存」できたらこの自由形式の画面は閉じてコンテンツ一覧画面に戻ります。戻ったら念のため再度「保存」。これでサイドバーに表示されているはずです。

それから自由形式にタイトルを付けて表示させたい(Facebookページです!的な)という場合にはこの記事を参考に。
Seesaaブログの自由形式にタイトルを表示させる方法【新システム】

タイトル部分を表示させてこんな感じにもできます。

seesaa-fb-pg-3

シーサーブログの記事下にPage Pluginを設置する場合【新システム】

今度は記事下にもPage Pluginを設置していきます。個別記事とトップページの記事下にそれぞれ設置してみるよ。

先ほどと同じようにシーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザイン」をクリックして、「HTMLの編集」のタブを選択。

編集-1

デフォルト(初期状態)のままならHTMLの97行目付近(デザインによって違うかも?)に次のようなコードがあります。

<% if:blog.bookmark_service -%>
<div class="bookmark" data-url="<% article.page_url -%>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip -%>"></div>
<% /if -%>

これがソーシャルボタンのコードね。設置する場所はソーシャルボタンの下に付けたいので、先ほどのコードの直後に次のコードを追加。

<% if:page_name eq 'article' -%>
<div class="fb-box">
ここに「Page Plugin」の2番目のコード
</div>
<% /if %>

できたら一度「保存」して「記事」の画面を閉じ、コンテンツ一覧の画面に戻るので再度「保存」。追加したコードはこんな感じ。

編集-5

それで個別記事の記事下には設置した「Page Plugin」がSNSボタンの下に表示されているはず。位置調整は後ほど。

seesaa-fb-pg-4

続いてトップページの下にも設置します。

これも同じように「HTML編集」のタブから一番下の方にスクロールして行って次のコードを探します。最後の方にあるよ。

<footer role="contentinfo" class="l-footer">
		<% parts_50 | mark_raw -%>
		<div class="footer">

これがブログのフッター部分の始まりの部分なので、このコードの後(下)に次のコードを追加。

<% if:page_name eq 'index' -%>
<div class="fb-box-top">
ここに2番目のコードを入れる
</div>
<% /if -%>

先ほど個別記事の下に「もし個別記事なら」という条件分岐で広告を設置したので、今度は「もしトップページなら」という条件分岐。これで保存。

これでトップページの一番下(フッター)に設置が完了。位置調整は最後にまとめて書きます。

SeesaaブログのスマートフォンページにPage Pluginを設置【新システム】

Seesaaブログの管理画面から「デザイン」⇒「スマートフォン」⇒「コンテンツ」の順番にクリックし、「記事下」という部分に「自由形式」をドラッグ&ドロップ。

Seesaa新デザインアドセンス-11

自由形式を追加したら歯車マークをクリック。

Seesaa新デザインアドセンス-2

テキスト入力部分にPage Plugin設置の「1番目のコード」と「2番目のコード」を両方入れます。スマートフォンページではHTMLが編集できないので、「body」直前に入れる1番目のコードを入れる事ができないため、ここに2つのコードを両方入れます。

2番目のコードだけでも作動する場合がありますが、時々トップページに表示されない場合があるので、2つのコードを両方ここに入れています。

編集-7

完了したら「保存」。それで自由形式の画面は閉じ、コンテンツ一覧の画面に戻るので再度保存。

これでスマートフォンページのトップページ、個別ページ両方記事下にPage Pluginが設置できているはずなので、確認しておきましょう。

確認する場合にはキャッシュ(以前のデータ)が残っているかもしれないので、ブログを表示させてから「Ctrl」と「F5」を押して再読み込みしてから確認。

Page Pluginの位置調整【新デザイン】

最後に位置調整をしておきます。一応色々なパターンがあると思いますが、簡単な位置調整だけしておきます。

「スタイルシートの編集」に切り替えて一番下の次のコードを追加。数値などはお好みで変更してね。

/* サイドバーに設置したPage Plugin */
.fb-box-side{
  text-align:center;  /* 中央寄せ */
  margin-top:10px;  /* 上に余白 */
  margin-bottom:10px;  /* 下に余白 */
}

/* 個別記事に設置したPage Plugin */
.fb-box{
  text-align:center;  /* 中央寄せ */
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白 */
}

/* トップページに設置したPage Plugin */
.fb-box-top{
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白 */
}

以上でシーサーブログ(新デザインシステム)にPage Pluginの設置が完了です。次の記事もどうぞ。

アメブロにPage Pluginを設置する方法

アメブロにPage Pluginを設置していきます。先に注意点を書いておくと、FacebookのPage Pluginは最小幅が「280px」になっているので、サイドバー等に貼り付ける場合にはサイドバーのサイズが最低でも280px必要です。

そのため3カラムのテンプレート等では広い方(300px)のサイドバーに貼り付けをするようにする必要があります。

アメブロのサイドバーにPage Pluginを設置する

まずはアメブロのマイページから右上のメニューボタン「三」みたいなマークをクリックして「基本設定」へ進みます。

アメブロfb-box-1

「基本設定」の中の項目の「共有ボタンの表示」が「表示する」になっている事を確認。これが「表示する」にしていれば取得したPage Pluginのコードの1番目は不要です。

アメブロfb-box-2

サイドバーから説明します。アメブロに追加する場合は「マイページ」右上のメニューボタン「三」みたいなマークをクリックして「プラグインの追加」をクリック。

ツイッターサイド-9

プラグインの追加というページになるので「フリープラグイン」をクリックしてここに取得した2番目のコードをこんな感じで入れます。

<div class="skinMenuHeader">
<span class="skinMenuTitle">更新情報はこちらから</span></div>
ここに取得した2番目のコードを入れる
</div>

「更新情報はこちらから」のテキスト部分は好きな言葉に変更して使って下さい。

それで「新たにプラグインの追加をした方→サイドバーに配置してください。設定はこちら」という表示がでるので「こちら」という部分のリンクをクリック。

ツイッターサイド-11

それでコードを追加したフリープラグインをサイドバーの好きな位置に移動させれば完了。

アメブロfb-box-3

本当は記事下にも入れたいと思っていましたが、新しいPage Pluginはなかなか上手く表示できないので保留。もしできたら追記していこうと思います。
Facebookページの作成と連携まとめページに戻る

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

ブログにFacebookのLikeBox(Page Plugin)を設置する方法”に6件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    あっくん様

    報告ありがとうございます。上手く反映されたようで良かったです!私も記事の修正や追加ができたので非常に助かりました。ASPの審査はある程度記事数が必要なので、記事を追加して再度挑戦してみてください。また何かあればいつでもコメント下さいませ。

  2. あっくん

    しげぞう様

    しげぞう様、バッチリうまくいきました。
    早速ご対応いただきまして本当にありがとうございます。

    これからコツコツ体裁を整えていきたいと思います。
    また、ご質問するかもしれません。たぶん・・します。恐縮です。

    今後ともよろしくお願いいたします。

    PS:5つほどASPの登録申請をしましたが、記事を1つも投稿していなかったので
    アフェリエイトB、アマゾンはNGになりました。
    記事を投稿してから再度チャレンジしてみます。

  3. しげぞう 投稿作成者

    あっくん様

    記事の内容がSeesaaブログの旧システム版の記事でした。記事を修正してSeesaaブログの「新デザインシステム」のやり方も追加しておきました。一応記事は修正してますが、キャッシュ(以前のデータ)が残っている場合がありますので、記事を表示させて「Ctrl」と「F5」を一緒におしてリロードしてから改めて記事を読んでみて下さい。

    お手数かけてすみません。これで不具合も解消するかと思います。もしこれでダメなら再度コメント下さいませ。
    シーサーブログでOGP設定とSNSとの連携
    ブログにFacebookのLikeBox(Page Plugin)を設置する方法

  4. あっくん

    しげぞう様

    早速のご返信ありがとうございます。
    お忙しいところ恐縮ですが、どうかよろしくお願いいたします。
    今年のお盆休みは、しげぞう様のサイトでゆっくり勉強したいと
    思います^^

  5. しげぞう 投稿作成者

    あっくん様

    コメントありがとうございます。記事の内容はSeesaaブログの旧システム版での対応ですね。おそらくあっくん様のブログがSeesaaブログの新デザインシステムなんだと思いますので、若干違う部分があると思います。Seesaaブログの新デザインシステムが導入されたのが最近だったので、まだこれは対応してなくて私も気が付きませんでした。早速記事に追記もしくは新しく記事を追加しますので、1日だけ待って貰ってもいいですか?

    今日中に記事に追記するなどの修正をして再度コメントでお知らせしますね。

    追記:記事を修正してSeesaaブログの「新デザインシステム」のやり方も追加しておきました。一応記事は修正してますが、キャッシュ(以前のデータ)が残っている場合がありますので、記事を表示させて「Ctrl」と「F5」を一緒におしてリロードしてから改めて記事を読んでみて下さい。

    お手数かけてすみません。これで不具合も解消するかと思います。もしこれでダメなら再度コメント下さいませ。
    シーサーブログでOGP設定とSNSとの連携
    ブログにFacebookのLikeBox(Page Plugin)を設置する方法

  6. あっくん

    しげぞう様

    はじめまして

    FB連携を調べていてこちらのサイトを見つけました。
    最初はライブドアで作成していたのですが、思い切ってSeesaaで作り直すことにしました。
    新システムでの設定方法を詳しく載せていただいていて感謝感激です。

    順調に進めてきたのですが、FB連携のところで引っかかってしまいました。
    お忙しいところ恐縮ですが、質問させてください。

    質問1
    1.FacebookアプリIDの取得→ID取得できました!
    2.OGP設定→完了
     ・htmlタグの書き換え
       それでHTMLの最初の方にこのような記述がある。

       私のhtmlは同じものが無く似たような記述で下記があります。
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot;
       ◆これを下記に書き換えてよろしいでしょうか?

    質問2
    FacebookアプリIDを追加する
    アプリIDが取得できたらシーサーブログの管理画面から「デザイン」⇒「HTML」と進む。
    OGPの設定をしているとHTMLの「head」部分にこのような記述が追加されているはず。


    検索してもこれが出てこないです。

    質問3
    ブログにFacebookのLikeBox(Page Plugin)を設置する方法
    シーサーブログにPage Pluginを設置する

    上記にて自由形式で二番目のコードを貼り付けてプレビューで見てみましたら
    「このページにいいね!」ではなくFacebookのサイト名が表示されました。

    質問内容が、わかりずらいかもしれませんが伝わりましたら
    ご指導よろしくお願いいたします。