0

私のiframeコードはそのように設定されています

<iframe 
    src="
          https://www.facebook.com/plugins/registration
          ?client_id=
          &redirect_uri=
          &fields=
          [
            {'name':'name'},
            {'name':'email'}, 
            {'name':'phone', 'description':'Your Phone Number','type':'text'},
            {'name':'available','description':'When are you available?'}
          ]
        "

    scrolling="auto"
    frameborder="no"
    style="border:none;"
    allowTransparency="true"
    width="100%"
    height="400">
</iframe>

そして、それはうまく機能し、機能に問題はありません。私の問題は、入力ボックスが iframe の端から出てきていることです。これは望ましくありません。

サイトをレスポンシブに構築しているため、コンテナーのサイズが変更され、モバイル ブラウザー (縦表示) では次のようになります。

iframe から抜け出す入力

このプラグインをスタイルする方法はありますか? ここに画像の説明を入力

私はそれを持つことができました

Name of Field
[input]

等々？

それとも、新しいページに移動するか、登録フォームを含む Facebook ポップアップをロードするオプションを用意する方が簡単ですか?

4

2 に答える 2

2

iFrame メソッドは幅が 340px 未満の場合はきれいなサイズ変更を提供しませんが、XFBML統合は 260px までの狭い幅をより適切に処理する必要があり、説明したようにラベルとフィールドを別々の行に配置できます。詳細については、登録プラグイン ドキュメントの XFBML セクションを参照してください。

以下にサンプル コードと、FF13 でのこのフローのスクリーンショットを示します。

<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js#appId={YOUR_APP_ID}&xfbml=1"></script>
<fb:registration 
  fields="[{'name':'name'},{'name':'email'}, {'name':'phone', 'description':'Your Phone Number','type':'text'},{'name':'available','type':'text','description':'When are you available?'}]" 
  redirect-uri="https://developers.facebook.com/tools/echo/"
  width="260">
</fb:registration>

例

于 2012-05-04T22:18:47.993 に答える
0

これらのフィールドには、最小幅とサイズが設定されているようです。右側のラベルは 240px、左側のラベルは 38% です。私はそれをハックしようとしましたが、登録フォームを自分で作成し、認証メカニズムを介して POST することが唯一の方法のようです: http://developers.facebook.com/docs/plugins/registration/#fb-root

于 2012-05-03T16:36:54.880 に答える