gpt4 book ai didi

javascript - 如何将 Facebook/Google+/Twitter 共享按钮添加到移动应用程序 (PhoneGap)

转载 作者:数据小太阳 更新时间:2023-10-29 05:00:25 29 4
gpt4 key购买 nike

我正在开发一个移动应用程序(通过 jQuery MobilePhoneGap)。

如何将 FacebookTwitterGoogle+ Sharing buttons 添加到我的应用程序中?有没有API或这么简单的方法? (我的应用程序的服务器端使用 ASP.NET MVC 4。)

有目的的方式是服务器端还是客户端并不重要。

(例如,Zite 应用程序有分享按钮)

编辑:如果您的目的方法需要打开弹出窗口,PhoneGap 会处理此弹出窗口并在共享后关闭它,以便用户可以返回我的应用程序?

以及如何保存用户的凭据以便用户不想每次都登录?(凭据应该保存在客户端,通过 cookie 或其他方式...(我们可以允许PhoneGap 用于保存来自 FacebookTwitterGoogle 的 cookies?))

最佳答案

您要问的(在您编辑之后)非常复杂,但这里有一些提示。

对于 Facebook,您可以使用 PhoneGap Facebook Platform Plugin或使用 Javascript SDK .您需要向他们注册您的应用程序并获得一个应用程序 ID。由于 FB 验证有很多步骤,研究他们的样本并寻找一个好的 tutorial .

Twitter 提供了类似的身份验证 API,但它需要一些服务器端代码才能使其正常工作。我从未使用过 Google 的,但我认为他们也有一个相当简单的 API。所有这些 API 的凭据都保存在 PhoneGap UIWebView 的 cookie 存储中,因此您实际上不必管理它。

对于 PhoneGap 中的弹出窗口,您可以使用 ChildBrowser Plugin .

这是我用于按钮的内容。这是在您的页面加载完成后在客户端调用的。由于它们需要一段时间来加载和定位自己,因此使用了四秒的延迟来给它们时间,然后它们淡入。

演示: jsFiddle

脚本

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>

关于javascript - 如何将 Facebook/Google+/Twitter 共享按钮添加到移动应用程序 (PhoneGap),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11639933/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com