Twitter Integration to Qt using Qt WebKit

Comments

(no comments yet)

Log in or Join to leave comments.

Article Metadata

---

Code Example

Source file: Media:QtTwitter.zip

---

Article

Created: chintandave_er (18 Nov 2010)

Last edited: hamishwillee (11 Oct 2012)

Overview

This code snippet shows how to integrate Twitter and fetch tweets using Twitter API in Qt with the [ http://doc.qt.nokia.com/4.7/qtwebkit.html Qt WebKit].

Precondition

• Qt is installed on your platform.
  • Download Nokia Qt SDK from here.

• Read this Wiki article for Display local web page with Qt WebKit

header (qttwitter.h)

#ifndef QTTWITTER_H
#define QTTWITTER_H
 
#include <QtCore/QPointer>
 
#include <QtWebKit/QWebView>
#include <QtWebKit/QWebPage>
#include <QtWebKit/QWebFrame>
 
#include <QtGui/QWidget>
#include <QtGui/QApplication>
#include <QtGui/QMainWindow>
#include <QtGui/QFrame>
#include <QtGui/QVBoxLayout>
 
class QtTwitter : public QMainWindow
{
    Q_OBJECT
 
public:
    QtTwitter(QWidget *parent = 0);
    ~QtTwitter();
 
private:
    QPointer<QWebView> _webView;
    QPointer<QVBoxLayout> _layout;
 
    void setupTwitter();
};
 
#endif // QTTWITTER_H

Source (qttwitter.cpp)

#include "qttwitter.h"
 
QtTwitter::QtTwitter(QWidget *parent)
    : QMainWindow(parent)
{
    setupTwitter();
}
 
QtTwitter::~QtTwitter()
{
 
}
 
void QtTwitter::setupTwitter()
{
    /**
      * Create the central widget
      * and set it.
      */
    QFrame* cW = new QFrame(this);
    setCentralWidget(cW);
 
    /**
      * Set the layout to central widget.
      */
    _layout = new QVBoxLayout(this);
    cW->setLayout(_layout);
    _layout->setMargin(0);
    _layout->setSpacing(0);
 
    /**
      * Let's create the web view which
      * will be used to display our page.
      */
    _webView = new QWebView(this);
    _webView->load(QUrl("qrc:///html/Home.html"));
    //_webView->setEnabled();
    _webView->show();
 
    /** Add it to layout */
    _layout->addWidget(_webView);
 
}

Main File (Main.cpp)

#include <QtGui/QApplication>
#include "qttwitter.h"
 
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QtTwitter w;
 
    w.showFullScreen();
 
    return a.exec();
}

Project File (.pro File)

QT       += core gui webkit
 
TARGET = QtTwitter
TEMPLATE = app
 
 
SOURCES += main.cpp\
        qttwitter.cpp
 
HEADERS  += qttwitter.h
 
CONFIG += mobility
MOBILITY = 
 
symbian {
    TARGET.UID3 = 0xe1455763
    # TARGET.CAPABILITY += 
    TARGET.EPOCSTACKSIZE = 0x14000
    TARGET.EPOCHEAPSIZE = 0x020000 0x800000
}
 
RESOURCES += \
    Resource.qrc

Resource File (.qrc file)

<RCC>
    <qresource prefix="/">
        <file>html/view.html</file>
        <file>html/ForumNokia.html</file>
        <file>html/Home.html</file>
        <file>html/My_Maemo.html</file>
        <file>html/nokia.html</file>
        <file>html/Nokian8.html</file>
        <file>html/ovidailyapp.html</file>
        <file>html/qtbynokia.html</file>
        <file>html/symbian.html</file>
    </qresource>
</RCC>

Twitter Script

• Here is the official Twitter Script to fetch the Tweets from the twitter account. You can get this script on this link.

• There you can set your Preference for Twitter account like AccountName, Color, No of Tweets etc. You can also used 3rd party Script available on the Internet to get advance feature of twitter API.

• Here is one script to get tweets from Nokia Developer User.

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
    new TWTR.Widget({
        version: 2,
        type: 'profile',
        rpp: 8,
        interval: 5000,
        width: 'auto',
        height: 640,
        theme: {
            shell: {
                background: '#2dc70e',
                color: '#f2f2f2'
            },
            tweets: {
                background: '#f0edf0',
                color: '#050405',
                links: '#eb1307'
            }
        },
        features: {
            scrollbar: false,
            loop: false,
            live: false,
            hashtags: true,
            timestamp: true,
            avatars: true,
            behavior: 'all'
        }
    }).render().setUser('forumnokia').start();
</script>

html page (forumnokia.html)

here is one html page for getting the tweets from "forumnokia" user.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px;font-size:medium; }
 
#Button1
{
    width: 132px;
    height: 26px;
}
 
#Button2
{
    width: 132px;
    height: 26px;
}
</style>
<title>Twitter</title>
 
</head>
<body>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
    new TWTR.Widget({
        version: 2,
        type: 'profile',
        rpp: 8,
        interval: 5000,
        width: 'auto',
        height: 640,
        theme: {
            shell: {
                background: '#2dc70e',
                color: '#f2f2f2'
            },
            tweets: {
                background: '#f0edf0',
                color: '#050405',
                links: '#eb1307'
            }
        },
        features: {
            scrollbar: false,
            loop: false,
            live: false,
            hashtags: true,
            timestamp: true,
            avatars: true,
            behavior: 'all'
        }
    }).render().setUser('forumnokia').start();
</script>
<div align="center"><input id="Button1" type="button" value="Refresh" onClick="window.location.reload()" /> 
 
<input id="Button2" type="button" value="Home" onClick='window.location="Home.html"' />
</div>
</body>
</html>

Source Code

Here is some screenshot of attached QtTwitter application. Download Source code from File:QtTwitter.zip.

-- chintandave_er 05:44, 9 December 2010 (UTC)