Facebook connect with Qt 5.3

cowboyxs

Hi, can anyone show me working example how to connect to facebook with Qt 5.3 (Qt quick 2.0>).

Thank you for any advice.

cowboyxs

SGaist

Hi,

Maybe "this":https://github.com/yoka/QMLFB/blob/master/Facebook.qml ?

Gianluca

In my experience, it's more easy to use directly the official Facebook SDK.
For doing so, you need to create a subclass of QObject and register it using qmlRegisterType. In this way, you can use it directly from QML as any other non-visual Items.
Then, you can implement the method for logging into Facebook using the SDK, of course this means that you need to implement the method for each platform you support.
In my case, one for iOS and one for Android.

I don't have a clean example code, I can share some code snippets if you want.

cowboyxs

Hi, SGaist. It's good advice, but i'm still at dead point.

Hi, Gianluca. I think it may help me. Please share some snippets :).

I thank you all

Gianluca

[quote author="cowboyxs" date="1415356027"]
Hi, Gianluca. I think it may help me. Please share some snippets :).
[/quote]

I have sparse code among various projects, and because now I need Facebook connect and some open graph actions for sharing content, I'm going to reorganize the code and put everything in one place.
If you can wait, I'll post here where to get the code. And I'll share to the community.

feldifux

Hi,
you can use our "Facebook plugin":http://plugins.v-play.net/doc/plugin-facebook/ which uses the native Facebook SDK on iOS & Android (and not just a WebView).

Example Code:
@import VPlay.plugins.facebook 1.0

Facebook {
licenseKey: "<your-plugin-license-key>"

appId: "xxxxxxxxxxxxxxxx"
readPermissions: [ "email", "user_friends" ]
publishPermissions: ["publish_actions"]

Component.onCompleted: {
// this performs a Facebook connect at app startup
// if the user already connected with Facebook before, no login dialog will be shown
openSession()
}
}@

chrisadams

Hi,

There is a lot of social network interaction code which is open source in the Nemo Mobile project.

The nemo-qml-plugin-social module provides a QML plugin which allows interaction with the Facebook Open Graph (currently only version 1 - patches to make it support the latest version are welcome!). It doesn't handle authentication, so you need to do your OAuth2 flow via cpp/webview/etc.

The repository (BSD licensed) is here: https://github.com/nemomobile/nemo-qml-plugin-social

An example app (this one just shows the home feed / wall):
@
import QtQuick 2.0
import org.nemomobile.social 1.0

Item {
id: root
width: 600
height: 900
property string accessToken: "YOUR_ACCESS_TOKEN" // provided by main.cpp
// note: for testing, you can copy the one from https://developers.facebook.com/tools/explorer

Facebook {
    // this provides the connection to the Facebook service
    id: facebook
    accessToken: root.accessToken
    onCurrentUserIdentifierChanged: {
        console.debug("Current user identifier: " + currentUserIdentifier)
    }
}

SocialNetworkModel {
    // this models the data offered by the social network
    id: model
    socialNetwork: facebook
    nodeIdentifier: facebook.currentUserIdentifier
    filters: [ ContentItemTypeFilter { type: Facebook.Home } ]
    Component.onCompleted: model.populate()
}

Text {
    id: countText
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    text: "There are: " + model.count + " posts!"
}

ListView {
    id: view
    clip: true
    spacing: 5
    anchors.top: countText.bottom
    anchors.bottom: parent.bottom
    width: parent.width
    model: model
    delegate: Item {
        width: view.width - 20
        height: content.height + 20
        x: 10
        Rectangle {
            id: background
            anchors.fill: parent
            color: index % 2 == 0 ? "red" : "blue"
            opacity: 0.3
        }
        Column {
            id: content
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            Text { text: "From: " + model.contentItem.from.objectName }
            Text { text: model.contentItem.message != ""
                       ? model.contentItem.message
                       : model.contentItem.story }
            Image { source: model.contentItem.picture }
        }
    }
    footer: Item {
        width: view.width
        height: childrenRect.height
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: model.hasNext ? "Load more" : "Cannot load more"
            MouseArea {
                anchors.fill: parent
                onClicked: model.loadNext()
            }
        }
    }
}

}
@

Alternatively, if you want better offline caching support, you can synchronise data to an sqlite database cache, which is then queried via models exposed to QML. This is the approach taken by the libsocialcache library in Nemo Mobile (which is LGPLv2.1 licensed):

https://github.com/nemomobile/libsocialcache/blob/master/src/qml/facebook/facebookpostsmodel.h

The data is cached by the synchronizer:

https://github.com/nemomobile/buteo-sync-plugins-social/blob/master/src/facebook/facebook-posts/facebookpostsyncadaptor.cpp

For simple in-memory graph access, however, I'd suggest using nemo-qml-plugin-social.

If you need any help / have any questions, just yell :-)

Kind regards,
Chris Adams.

http://www.qinetic.com.au/ - Qt & QML User Experience Specialists

chrisadams

Hi,

There is a lot of social network interaction code which is open source in the Nemo Mobile project.

The nemo-qml-plugin-social module provides a QML plugin which allows interaction with the Facebook Open Graph (currently only version 1 - patches to make it support the latest version are welcome!). It doesn't handle authentication, so you need to do your OAuth2 flow via cpp/webview/etc.

The repository (BSD licensed) is here: https://github.com/nemomobile/nemo-qml-plugin-social

An example app (this one just shows the home feed / wall):
@
import QtQuick 2.0
import org.nemomobile.social 1.0

Item {
id: root
width: 600
height: 900
property string accessToken: "YOUR_ACCESS_TOKEN" // provided by main.cpp
// note: for testing, you can copy the one from https://developers.facebook.com/tools/explorer

Facebook {
    // this provides the connection to the Facebook service
    id: facebook
    accessToken: root.accessToken
    onCurrentUserIdentifierChanged: {
        console.debug("Current user identifier: " + currentUserIdentifier)
    }
}

SocialNetworkModel {
    // this models the data offered by the social network
    id: model
    socialNetwork: facebook
    nodeIdentifier: facebook.currentUserIdentifier
    filters: [ ContentItemTypeFilter { type: Facebook.Home } ]
    Component.onCompleted: model.populate()
}

Text {
    id: countText
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    text: "There are: " + model.count + " posts!"
}

ListView {
    id: view
    clip: true
    spacing: 5
    anchors.top: countText.bottom
    anchors.bottom: parent.bottom
    width: parent.width
    model: model
    delegate: Item {
        width: view.width - 20
        height: content.height + 20
        x: 10
        Rectangle {
            id: background
            anchors.fill: parent
            color: index % 2 == 0 ? "red" : "blue"
            opacity: 0.3
        }
        Column {
            id: content
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            Text { text: "From: " + model.contentItem.from.objectName }
            Text { text: model.contentItem.message != ""
                       ? model.contentItem.message
                       : model.contentItem.story }
            Image { source: model.contentItem.picture }
        }
    }
    footer: Item {
        width: view.width
        height: childrenRect.height
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: model.hasNext ? "Load more" : "Cannot load more"
            MouseArea {
                anchors.fill: parent
                onClicked: model.loadNext()
            }
        }
    }
}

}
@

Alternatively, if you want better offline caching support, you can synchronise data to an sqlite database cache, which is then queried via models exposed to QML. This is the approach taken by the libsocialcache library in Nemo Mobile (which is LGPLv2.1 licensed):

https://github.com/nemomobile/libsocialcache/blob/master/src/qml/facebook/facebookpostsmodel.h

The data is cached by the synchronizer:

https://github.com/nemomobile/buteo-sync-plugins-social/blob/master/src/facebook/facebook-posts/facebookpostsyncadaptor.cpp

For simple in-memory graph access, however, I'd suggest using nemo-qml-plugin-social.

If you need any help / have any questions, just yell :-)

Kind regards,
Chris Adams.

http://www.qinetic.com.au/ - Qt & QML User Experience Specialists

Gianluca

I started to collect my code for using Facebook SDK into the following project:
https://github.com/GMaxera/QtFacebook
For now there is only the login for iOS platform.
During the next week, I'll add more functionality and Android support.
Take a look. Of course, it's very small respect to other project but...

Respect to V-play plugin, it's free ... but require more effort for you to use, because you need to install it manually.

Respect to Nemo Mobile project, you don't have to write any OAuth2 code for login and it will support the latest open graph API because I directly use the native Facebook SDK. So, it's easier.

Gianluca

I started to collect my code for using Facebook SDK into the following project:
https://github.com/GMaxera/QtFacebook
For now there is only the login for iOS platform.
During the next week, I'll add more functionality and Android support.
Take a look. Of course, it's very small respect to other project but...

Respect to V-play plugin, it's free ... but require more effort for you to use, because you need to install it manually.

Respect to Nemo Mobile project, you don't have to write any OAuth2 code for login and it will support the latest open graph API because I directly use the native Facebook SDK. So, it's easier.

Facebook connect with Qt 5.3

Felgo simplifies

What others say