6

モバイルアプリケーションを開発しています ( jQuery MobileAndによるPhoneGap)。

Facebook、TwitterおよびGoogle+ Sharing buttonsをアプリケーションに追加する方法は? APIまたはそのような簡単な方法はありますか? (私のアプリケーションのサーバー側は を使用しますASP.NET MVC 4。)

目的の方法がサーバー側かクライアント側かは問題ではありません。

(たとえば、Zite アプリには共有ボタンがあります)

編集:目的のメソッドでポップアップウィンドウを開く必要がある場合、PhoneGapこのポップアップを処理して共有後に閉じるので、ユーザーは私のアプリケーションに戻ることができますか?

また、ユーザーが毎回ログインする必要がないように、ユーザーの資格情報を保存する方法は? (資格情報は、Cookie などによってクライアント側に保存する必要があります... ( からの Cookie の保存を許可できますかPhoneGap? ))FacebookTwitterGoogle

4

3 に答える 3

9

（編集後に）あなたが求めていることはかなり複雑ですが、ここにいくつかの指針があります。

Facebook の場合、PhoneGap Facebook プラットフォーム プラグインまたはJavascript SDKを使用できます。アプリを登録し、アプリ ID を取得する必要があります。FB 認証にはかなりのステップがあるため、それらのサンプルを調べて、適切なチュートリアルを探してください。

Twitter も同様の認証 API を提供していますが、それを機能させるにはサーバー側のコードが必要です。私は Google のものを使ったことはありませんが、かなり単純な API も持っていると思います。これらすべての API の資格情報は PhoneGapUIWebViewの Cookie ストアに保存されるため、実際に管理する必要はありません。

PhoneGap のポップアップには、 ChildBrowser Pluginを使用できます。

ボタンはこちらを使用しています。これは、ページの読み込みが完了した後にクライアントで呼び出されます。ロードして配置するのに時間がかかるため、4 秒の遅延を使用して時間を与えてから、フェードインします。

デモ： jsフィドル

脚本

function showSocialButtons() {

    var html =
              '<div id="social-buttons" class="fade">'
            + '<div class="fb-like" data-href="YOUR_URL" data-send="true" data-layout="box_count" data-width="50" data-show-faces="true" data-colorscheme="dark"></div>'
            + '<div class="g-plusone-frame"><div class="g-plusone" data-size="tall" data-href="YOUR_URL"></div></div>'
            + '<a href="https://twitter.com/share" class="twitter-share-button" data-url="YOUR_URL" data-text="YOUR_APP_DESCRIPTION" data-count="vertical">Tweet</a>'
            + '<div id="fb-root"></div>'
            + '</div>';
    document.getElementById( 'viewport' ).insertAdjacentHTML( 'beforeEnd', html );

    var script = document.createElement( 'script' );
    script.async = true;
    script.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_FB_APP_ID';
    document.getElementById( 'fb-root' ).appendChild( script );

    script = document.createElement( 'script' );
    script.async = true;
    script.src = document.location.protocol + '//platform.twitter.com/widgets.js';
    document.getElementById( 'social-buttons' ).appendChild( script );

    script = document.createElement( 'script' );
    script.async = true;
    script.src = document.location.protocol + '//apis.google.com/js/plusone.js';
    document.getElementById( 'social-buttons' ).appendChild( script );

    window.setTimeout( function () {

        document.getElementById( 'social-buttons' ).removeAttribute( 'class' );

    }, 4000 ); //4 second delay

};

CSS

#social-buttons {
    height: 300px;
    transition:             opacity 1000ms ease;
        -moz-transition:    opacity 1000ms ease;
        -ms-transition:     opacity 1000ms ease;
        -o-transition:      opacity 1000ms ease;
        -webkit-transition: opacity 1000ms ease;
    width: 90px;
}

.fb-like,
.g-plusone-frame {
    margin: 10px 0 10px 3px;   
}

.g-plusone-frame {
    display: inline-block;
}

.twitter-share-button {
    margin: 10px 0;
}

.fade {
    opacity: 0 !important;
}

HTML

<div id="viewport"></div>
于 2012-07-24T22:16:51.963 に答える
3

現在、Cordova 2.5 以降でオプションを共有するためにこのプラグインを使用しています。

AndroidおよびiOSで完全に機能します

于 2014-02-27T13:45:17.243 に答える
3

ShareThisをチェックしてください。これらのボタンをアプリケーションに簡単に追加できます。

于 2012-07-24T22:01:06.040 に答える