Phonegap + Facebook

0
votes

I want to integrate a Facebook "like" button in my hybrid app with Facebook javascript SDK plugin. The "like" button works perfectly on a browser, but the like button doesn't show up when I build the project with Phonegap 3.7.0 and run it on Android(5.0) and iOS(8.1.2)

I tried this: https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/pg-build/README.md but still no like button...

I hope someone can help me,

Thanks in advance!

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 config: 

<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" />
2
javascriptandroidiosfacebookcordova

2 Answers

0
votes

@Tim,

I do not see your CSS. There is clearly an class="fb-like" in your HTML. It is quite likely you need to add that URL for the image to your access class. Either that or change the CSS so you can keep the image locally.

However, I could be wrong, as I cannot see the CSS.

Jesse

0
votes

You have in your code:

<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>

The first "class" in your <div> says "fb-like". Somewhere in your CSS it has to have a .fb-like If you do not, this does not make sense.

On the image url(), see: CSS background-image Property

Jesse