フルブラウザのFlashアプリケーションの上にオーバーレイされるFacebookのようなボタン(iFrameエディション)があります。「いいね」ボタンは、アプリケーション内の個別の画像を「いいね」するために接続され、新しい画像が表示されるたびに、「いいね」ボタンは、ExternalInterfaceを使用してデータで更新されます。
「いいね」ボタンは、JQueryのfadeIn()/およびfadeOut()を使用して、新しい画像ごとにフェードインおよびフェードアウトします。これもExternalInterfaceで呼び出されます。
私が抱えている問題は、Windowsでは、これは機能したくないようです。特にFirefoxでは...
CSS:
html {
height: 100%;
overflow: hidden;
min-width: 800px;
min-height: 600px;
}
#flashContent {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
}
body {
margin: 0;
padding: 0;
background-color: #000000;
}
#fb-like {
position: absolute;
bottom: 32px;
left: 510px;
width: 280px;
z-index: 9999;
display: none;
}
fb-likeはiFrameを含むdivであり、常に一番上にあることを確認するために、z-indexは9999です。
使用されているJSは次のとおりです。
<script type="text/javascript">
var isVisible = false;
function showLikeButton( visible ){
if( visible == true )
{
$('#fb-like').fadeIn( 'slow' );
isVisible = true;
}
else if ( isVisible )
{
$('#fb-like').fadeOut( 'slow' );
isVisible = false;
}
}
var begOfUrl = "http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmywebsite.com%2fdirectory";
var endOfUrl = "&layout=button_count&show_faces=false&width=150&action=like&colorscheme=dark&height=21";
function sendIdToLikeButton( title, id ){
$( '#facebook-like' ).attr( 'src', begOfUrl + "%3Fid=" + id + endOfUrl );
}
</script>
ここで、sendIdToLikeButtonメソッドは、ExternalInterfaceを使用してFlashから送信された写真のIDを取得し、iFrameのsrc属性を再作成します。
そしてもちろん、これはフラッシュアプリケーションであるため、最小限のHTMLは次のとおりです。
<body>
<div id="fb-like">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fnfb.designaxiom.com/build13&layout=button_count&show_faces=false&width=150&action=like&colorscheme=dark&height=21" scrolling="no" frameborder="0" style="position: absolute; border:none; overflow:hidden; width:300px; height:40px;" allowTransparency="true" id="facebook-like"></iframe>
</div>
<div id="flashContent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</body>
繰り返しになりますが、これはWindowsのFirefoxを除いてどこでも機能し、どうしたらよいかわかりません。CSSまたはJavascriptのどこかにエラーがあると思います。
どんな助けでも大歓迎です。
前もって感謝します。
文法