3/4 知っておくと便利なFacebookページ用HTML記述法 [ホームページ作成] All About

単独でページが閲覧された場合に、Facebookへ誘導する方法

独自ページのHTMLは、直接facebook.comサーバ内にアップロードできるわけではありません。自分で用意した外部のサーバにアップロードする必要があります。そのため、「Facebookページ」としてではなく、単独のウェブページとしてアクセスされる可能性があります（特に、検索サイトからアクセスされた場合など）。

Facebookを経由せずに、中身だけが単独で表示される可能性もある。

そこで、単独のページとして表示された場合に限って、Facebookページへ誘導するメッセージを表示する仕組みを用意してみましょう。Facebookページの内部で表示された際にはコンテンツだけを表示し、単独で表示された際には下図のように「Facebookページから閲覧して下さい」等の誘導メッセージを表示します。

単独で表示された際には誘導するメッセージを表示する。

これは、HTMLソース中に次の2点を追記することで実現できます。
１．単独で表示された際のメッセージ表示用HTMLソースを用意する
２．単独で表示された際にのみメッセージが表示されるようJavaScriptを記述する

１．単独で表示された際のメッセージ表示用HTMLソースを用意
まず、ページ上部に以下のようなHTMLを記述し、単独で表示された際に表示するメッセージを用意します。内容は何でも構いませんが、表示・非表示をJavaScriptで制御するため、一番外側のdiv要素には、id属性を使ってid名（ここでは「tofacebook」）を加えておきます。

<div id="tofacebook">
   <p>
      このページは、Facebook Page「ホームページ作成TIPS」からご覧下さい。<br>
      <a href="http://www.facebook.com/hp.tips" target="_top">http://www.facebook.com/hp.tips</a>
   </p>
</div>

今表示しているページが「Facebookページ」の一部であることを述べ、Facebookページへのリンクを掲載しておけば良いでしょう。

２．単独で表示された際にのみメッセージが表示されるようJavaScriptを記述
HTMLの末尾（少なくとも上記ソースよりは後方）に、以下のJavaScriptソースを記述します。先ほどのソースで、表示・非表示を制御するためのid名を「tofacebook」にした場合は、何も修正することなくコピー＆ペーストするだけでOKです。id名を他のものにした場合は、「tofacebook」の部分だけを、実際に使用したid名に修正して下さい。

<script type="text/javascript"><!--
   // フレーム内部に表示された場合は冒頭のFacebook案内を消す
   if( self != top ) {
      document.getElementById('tofacebook').style.display = 'none';
   }
// --></script>

上記のJavaScriptは、「自分自身がフレーム内部に表示されている場合には、id名がtofacebookである要素を非表示にする」という機能になります。

上記のように記述しておけば、ページが単独で表示された場合のみ、Facebookページへ誘導するメッセージが表示されるようになります。サンプルFacebookページ「ホームページ作成TIPS」でも、この方法を使っています。例えば、「ようこそ！」ページを単独で表示すると、このメッセージが見えるはずです。

最後に、他の独自ページへのリンクの仕方、外部ページへのリンクの仕方をご紹介致します。