Flasherへの提案ソーシャルブックマークボタンを付けてみませんか

ブログなどで見かけるソーシャルブックマークボタン。HTMLベースのWebサービスでよく見かけますが、キャンペーン系などのFlashサイトで見かける事はありません。話題作りを目的とすることが多いにも関わらず、SEOに弱いFlashサイトこそ実装するべきではないかと考えています。

例：先日立ち上げたテキストエディタとSDKで作ったフルフラッシュサイトのフッターに実装

フラッシュサイト立ち上げたのにPVが伸びない、そんなクリエイターも多いんじゃないかと思います。少しでもアクセス数増加が見込めれば、モチベーションも高まるというもの。今回のブログでは、ブッマークボタンを追加するメリットから実装方法まで紹介してみたいと思います。

まずはメリットから紹介します。

Flashサイトに実装する理由

SEOの不利を補うため、ページランクの強化ができる
被リンクを増加させて誘引の導線作りができる
一時的な話題作り(はてななどでホットエントリに入れば、莫大なPV獲得に)
フルフラッシュサイトはバナーで導線を作る事が多いが、メディアへのバナー出稿ができない場合の告知効果
ランディング効果(検索したときにブックマーカーのページが引っ掛かり、そこからの誘引効果)が発生

逆にデメリットを上げてみます。

ブックマークボタンがサイトの世界観に合わない
ブックマークするときに一時的にページから離脱してしまう
ネットのライトユーザーにとっては意味不明なボタン

私はAdobe Color CCを見てフッターにdel.icio.usのボタンがあることに感銘を受けました。フッターに小さくボタンがあるだけなので、サイト閲覧の邪魔にならないし雰囲気も壊していない。なおかつライトユーザーは気に留めないだろうし、ヘビーユーザーは個性的なボタンは一目に触れる。そう、フッターに小さく入れれば十分デメリットは回避できると思いました。

特にデメリットがなければ、ないよりは効果があるというもの。それでは実装方法を以下に紹介します。

Flashへの実装方法

Flashにボタンを追加

○FlashではJavaScript関数を呼び出すボタンを作る
直接Flashのスクリプトで直リンクを貼っても可能ですが、タイトルやアドレスをGET引数に持たせる必要があるのでJavaScriptを利用した方が融通が利きます。以下はJavaScriptと併用する方法で紹介します。

○ボタンのActionScriptについて
Flash上で適当なボタンを作成します。冒頭でも説明しましたが、フッターにボタンを入れる事がお勧めです。

スクリプトの実装ですが、Flash8以上ならExternalInterface.callを使いましょう。ここでははてなブックマークを追加する「bHatena」というJavaScriptのメソッドを呼び出してみます。

// ActionScript 3.0の場合
import flash.external.*;
my_btn.addEventListener(MouseEvent.CLICK, function()
{
    ExternalInterface.call("bHatena");
});

// ActionScript 2.0の場合
import flash.external.*;
my_btn.onRelease = function()
{
    ExternalInterface.call("bHatena");
});

※getURL()でJavaScriptを呼び出すのはIE6でバグがあるので個人的にはお進めしません(getURLを使ったタイミングでIE6はページのレンダリングをストップするバグがあります)。

HTML(コンテナページ)にJavaScriptを追加

SWFのコンテナとなっているHTMLページには次のJavaScriptを記述します。はてなブックマーク以外にもdel.icio.usなどもありますが、基本は同じ書式を使います。

<script type="text/javascript">
// Social Boomark
function bHatena()
{
    location.href="http://b.hatena.ne.jp/add?mode=confirm&url="
                  +encodeURIComponent(location.href)
                  +"&title="
                  +encodeURIComponent(document.title);
}
</script>

ソーシャルブックマークのJavaScriptの参考になるサービス

他のサービスのリンクを知りたい時はこちらのサービスを参照するといいでしょう。国内外の様々なブックマークサービスのリンクを生成してくれます。

http://www.seotaisaku.com/smoplus/bmplus.html

国内サイトでは、はてな、ヤフー、ライブドアー、Del.icio.usをおさえておけば十分だと思います。

サイトキャプチャのためにダミーの画像を入れておく

はてなやヤフーではサイトのサムネイル画像を作ります。FlashサイトはJavaScriptでエンベッド(埋め込み)することが大半だと思いますが、キャプチャのクローラはJavaScriptは実行しないので、内容のない真っ白なキャプチャが撮られてしまう可能性があります。そこでフラッシュの代替画像を予め埋め込んでおく事をお勧めします。クローラは代替画像をキャプチャしてくれます。

例：SWFObjectを使ってFlashをエンベッドしている場合

<div id="flashcontent"><img src="no_flash.jpg" /></div>
<script type="text/javascript">
    var so = new SWFObject( "Main.swf", "main", "100%", "100%", "9", "#000000" );
    so.write( "flashcontent" );
</script>

メリットのところで紹介しましたが、ブックマーカーのページ自体も検索の対象になります。そのページではサイトキャプチャが表示されるため、代替画像を用意していないとでランディング効果が損なわれる可能性があります。

最後のステップ Webサーバーにアップして検証

最後はサーバーにアップしてブックマークが実行できるか検証してみましょう。いくつか検証するためにも予め色んなブックマークサービスのアカウントを用意しておくとよいでしょう。

ソーシャルブックマーク コンポーネントorキットを用意すればいいのではないか!?

ここまで実装方法を紹介してきましたが、設定を行うのは面倒ですよね。コンポーネントパネルからドラッグ＆ドロップで簡単実装とかできると便利ではないでしょうか。

その場合はjsの名前はswfaddressやswfobjectに倣って、swfbookmark.jsという名前がふさわしいところでしょうか。「いつか作る」と開発宣言して今日のブログは終了です。

FlashとSEOの相性問題解決作戦 - Yasu Log::Flash/Flex/AIR::ブログ

yasu-log's blog