Phonegap + Facebook答案

【问题标题】：Phonegap + FacebookPhonegap + Facebook
【发布时间】：2015-05-18 12:44:35
【问题描述】：

我想在我的混合应用程序中集成一个 Facebook“like”按钮和 Facebook javascript SDK 插件。 “like”按钮在浏览器上完美运行，但是当我使用Phonegap 3.7.0 构建项目并在Android(5.0) 和iOS(8.1.2) 上运行它时，like 按钮不会出现

我试过这个：https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/pg-build/README.md 但仍然没有喜欢按钮...

希望有人能帮帮我，

提前致谢！

HTML：

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale = 1.0">

    <script src="js/cordova/cordova.js" type="text/javascript"></script>
</head>

<body>

    <!-- Facebook SDK plugin -->
    <div id="fb-root"></div>


    <div class="uitje_detail_bot_content">
        <div class="uitje_detail_social_media">
            <table>
                <tr>
                    <td>
                        <div class="fb-like" data-href="http://www.mamyloe.nl/uitjes/{{uitje.id}}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
                    </td>
                    <td>
                        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.mamyloe.nl/uitjes/{{uitje.id}}" data-text="{{uitje.title}} |" data-via="httpstwittercommamyloe" data-size="large" data-count="none">Tweet</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

</body>

Javascript：

function getFacebook() {
window.fbAsyncInit = function () {
    FB.init({
        appId: 'xxx',
        xfbml: true,
        version: 'v2.3'
    });
};

(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/nl_NL/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));};

XML 配置：

<gap:plugin name="com.phonegap.plugins.facebookconnect" version="0.9.0">
    <param name="APP_ID" value="xxx" />
    <param name="APP_NAME" value="Mamyloe app" />
</gap:plugin>

            <access origin="*" />

        <feature name="Accelerometer">
            <param name="ios-package"     value="CDVAccelerometer" />
        </feature>
        <feature name="Geolocation">
            <param name="ios-package"     value="CDVLocation" />
        </feature>
        <feature name="Geolocation">
            <param name="android-package"   value="org.apache.cordova.geolocation.GeoBroker" />
        </feature>
        <feature name="Camera">
            <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
        </feature>
        <feature name="Camera">
            <param name="ios-package" value="CDVCamera" />
        </feature>
        <feature name="File">
            <param name="android-package" value="org.apache.cordova.FileUtils" />
        </feature>
        <feature name="FileTransfer">
            <param name="android-package" value="org.apache.cordova.FileTransfer" />
        </feature>
        <feature name="File">
            <param name="ios-package" value="CDVFile" />
        </feature>
        <feature name="FileTransfer">
            <param name="ios-package" value="CDVFileTransfer" />
        </feature>
        <feature name="org.apache.cordova.facebook.Connect">
            <param name="android-package value="org.apache.cordova.facebook.ConnectPlugin" />
        </feature>



        <feature name="http://api.phonegap.com/1.0/camera" />
        <feature name="http://api.phonegap.com/1.0/file" />
        <feature name="http://api.phonegap.com/1.0/geolocation"/>
        <feature name="http://api.phonegap.com/1.0/network" />

【问题讨论】：

标签： javascript android ios facebook cordova

【解决方案1】：

@蒂姆，

我没有看到你的 CSS。您的 HTML 中显然有一个 class="fb-like"。您很可能需要将该图像的 URL 添加到您的访问类。或者更改 CSS，以便您可以将图像保存在本地。

但是，我可能是错的，因为我看不到 CSS。

杰西

【讨论】：

您好 Jesse，感谢您的回复，我认为这不是 CSS 问题。据我了解，让 Javascript SDK 显示一个按钮。但是当我在通用浏览器和 gapdebug 中调试应用程序时，我得到了完全不同的元素输出。我认为当我在移动设备上运行 facebook javascript SDK 时，它从未执行过。
打开你的 CSS。寻找类 fb-like 它可能是一个 url()。无论您认为什么显然是错误的，因为您离解决方案还差得远。
但是您指的是哪个 URL？我的 CSS 中没有“fb-like”类，那么我应该输入哪个 URL？提前致谢。

【解决方案2】：

您的代码中有：

<div class="fb-like" data-href="http://www.mamyloe.nl/uitjes/{{uitje.id}}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

<div> 中的第一个“类”表示 “fb-like”。在你的 CSS 中的某个地方，它必须有一个类似 .fb 的文件。如果你不这样做，这是没有意义的。

在图片url()上，见：CSS background-image Property

杰西

【讨论】：

我尝试了您的解决方案，但没有奏效，符合我的预期。首先，您从 Facebook 开发人员处获得的 javascript 代码负责显示点赞按钮。由于 Javascript 代码不会在移动设备中运行，因此没有按钮。所以问题是为什么 Javascript 代码在通用浏览器（例如 Firefox）中运行，而不是当我在 Phonegap 中构建我的项目并在移动设备上运行它时。我添加了 facebook-connect-plugin，它允许您以原生方式使用来自 Facebook 开发人员的 javascript 代码。
当你说，（代码）负责显示点赞按钮时，我不知道该怎么做。似乎有些不对劲。然而，另一种选择是 Facebook 在 Javascript 中使用了一些特殊情况，而 Phonegap 使用的 Javascript 引擎不支持这种情况。注意： Javascript 在网络浏览器和移动设备之间差异很大。您可能遇到了 FB 尚未遇到的 JS 错误。我会跟踪这个 StackOverflow 问题，如果我发现了什么，我会回复你。
没关系，无论如何感谢您的帮助 :) 我也会对此进行进一步调查。