DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: Twitter Feed

Author:Kasper Skårhøj
Created:2002-11-01T00:32:00
Changed by:Nicole Cordes
Changed:2013-06-12T14:43:35.110000000
Classification:wt_twitter
Keywords:twitter, feed, twitterfeed
Author:Nicole Cordes
Email:cordes@cps-it.de
Info 4:
Language:en

img-1 img-2 EXT: Twitter Feed - wt_twitter

EXT: Twitter Feed

Extension Key: wt_twitter

Language: en

Keywords: twitter, feed, twitterfeed

Copyright 2000-2013, Nicole Cordes, <cordes@cps-it.de>

img-3

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Introduction

What does it do?

  • Show your twitter feed (let's call it tweets) in the frontend of your homepage.
    • Your twitter feed
    • Feeds searched by a hashtag
  • Use prototype for a newsticker version of the feeds (just include further static template)
  • Flexform or Typoscript give you the most flexibility – userFuncs are used to manipulate the text:
    • to show a retweet icon
    • to make typolinks in the text
    • to generated linked hashtags and
    • to show geotag icons with its link to maps.google.com
  • Extbase and Fluid is used for the MVC concept

Who is responsible for wt_twitter?

Since 2013 wt_twitter is supported by CPS-IT GmbH.

Visit us at http://www.cps-it.de

The in2code team offered this free extension till 2013.

Visit them on http://www.in2code.de

Screenshots

Frontend: Default list entries from twitter
Show Feeds from searchterm

img-4

Show Feeds from your account

img-5

Show Feeds via hashtag

img-6

Show Feeds with geotag

img-7

img-8

Frontend: Newsticker from twitter RSS

img-9

Backend: Plugin configuration

img-10

Installation

Quickstart

  • Install the extensions extbase and fluid (system extensions)
  • Install the extension wt_twitter
  • Include the static template (Main TypoScript)
  • Add wt_twitter Plugin to a standard page
  • Add username and searchterm into the plugin configuration
  • Make some changes in the constants if you want

Step by Step

Default mode (listview)

Install extbase and fluid from the system.

img-11

Import wt_twitter with the extension manager from the TER.

Include the main static template for the extension.

img-12

Add a new wt_twitter plugin to any default page.

img-13

Add plugin to a default page and enter your Twitter Account name and maybe a searchterm or a hashtag

img-10

Title

a

Title

b

Explanation

c

Default Value (if empty)

Mode

a

Mode

b

Show your feeds or show friendly feeds or show both or show feeds from a search

c

showOwn

Twitter Account

a

Twitter Account

b

Enter your twitter name

c

einpraegsam

Enter a hashtag

a

Enter a hashtag

b

If mode is form search, enter “searchphrame”

If you want to show from a hashtag enter “#hashtag”

If you want to show feeds from two hashtags enter “#hash1 #hash2”

If you want to show feeds from two hashtags with OR relation enter “#hash1 OR #hash2”

c

Limit

a

Limit

b

Set a limit for the last X entries

c

10

That's it – you will see the FE output now.

Newsticker mode

First of all, do all steps as descibed in the default mode (see above).

Than add another static template “Newsticker” below the standard template which does:

  • Load 3 JS files in the frontend (prototype.js, effects.js and wt_twitter_newsticker.js)
  • Overwrite the default html with another html template (details in the typoscript section below)
  • Load an additional CSS file

img-14

That's it – changes could be seen in FE output.

Configuration

TypoScript

setup (main template)
# WT_TWITTER PLUGIN #
includeLibs.user_wttwitter_userfuncs = EXT:wt_twitter/Resources/Private/UserFuncs/user_wttwitter_userfuncs.php

plugin.tx_wttwitter {

    settings {
            setup {
                    # Constants
                    mode  = {$plugin.wttwitter.main.mode}
                    account  = {$plugin.wttwitter.main.account}
                    hashtag  = {$plugin.wttwitter.main.hashtag}
                    limit = {$plugin.wttwitter.main.limit}
                    sortDESC = {$plugin.wttwitter.main.sortDESC}
                    showRetweets = {$plugin.wttwitter.main.showRetweets}
                    rssFeed = {$plugin.wttwitter.main.rssFeed}
                    main.utf8  = {$plugin.wttwitter.main.utf8}
                    debug  = {$plugin.wttwitter.debug}

                    # Tweet Fields (Feed in a loop like text, link, etc..)
                    tweets {

                            # text
                            text = COA
                            text {
                                    # Userfunc to change RT to a retweet image
                                    10 = USER
                                    10 {
                                            userFunc = user_wttwitteruserfuncs->user_wttwitter_retweetIcon
                                            userFunc {

                                                    # Userfunc to change links, hashtags and accounts to its links
                                                    string = USER
                                                    string {
                                                            userFunc = user_wttwitteruserfuncs->user_wttwitter_link
                                                            userFunc {
                                                                    field = text
                                                                    typolink.extTarget = _blank
                                                            }
                                                    }

                                                    image = IMAGE
                                                    image {
                                                            file = EXT:wt_twitter/Resources/Public/Icons/icon_retweet.gif
                                                            altText = Retweet
                                                            titleText = Retweet
                                                            params = class="retweet_icon"
                                                    }

                                            }
                                    }
                            }

                            # pubDate
                            created_at = COA
                            created_at {
                                    10 = USER
                                    10.userFunc = user_wttwitteruserfuncs->user_wttwitter_date
                                    10.userFunc {
                                            field = created_at
                                            strftime = %d.%m.%Y, %H:%M
                                    }
                            }

                            # link
                            user_url = TEXT
                            user_url {
                                    field = user_url
                                    typolink.parameter.field = user_url
                            }

                            # geotag
                            geotag = CASE
                            geotag {
                                    if.isTrue.field = geo_type
                                    key.field = geo_type

                                    Point = IMAGE
                                    Point {
                                            file = EXT:wt_twitter/Resources/Public/Icons/icon_geotag.gif
                                            imageLinkWrap = 1
                                            imageLinkWrap.enable = 1
                                            imageLinkWrap.typolink.parameter.cObject = COA
                                            imageLinkWrap.typolink.parameter.cObject {
                                                    10 = TEXT
                                                    10.value = http://maps.google.com/maps?z=16&q=
                                                    20 = TEXT
                                                    20.field = geo_0
                                                    30 = TEXT
                                                    30.field = geo_1
                                                    30.wrap = ,|
                                                    40 = TEXT
                                                    40.field = text
                                                    40.wrap = ("|")
                                                    40.rawUrlEncode = 1
                                                    100 = TEXT
                                                    100.value = _blank
                                                    100.noTrimWrap = | ||
                                            }
                                    }

                            }

                    }
            }

    }
}
constants (main template)
###
# This are the default TS-constants for wt_twitter
##

plugin.wttwitter {

        # cat=plugin.wt_twitter//0020; type=options[showOwn,showHome,showFriends]; label= Mode: Show only own twitter feeds or show own and from friends or show only from friends
        main.mode = showOwn

        # cat=plugin.wt_twitter//0040; type=text; label= Twitter Account: Write your username (e.g. http://twitter.com/USERNAME)
        main.account = einpraegsam

        # cat=plugin.wt_twitter//0060; type=text; label= Show feed from hashtag: Type a hashtag
        main.hashtag =

        # cat=plugin.wt_twitter//0070; type=int+; label= Feed limit: Maximum numbers of the last feeds in frontend (e.g. 10)
        main.limit = 10

        # cat=plugin.wt_twitter//0080; type=boolean; label= Sort by crdate: DESC or ASC (1 means DESC)
        main.sortDESC = 1

        # cat=plugin.wt_twitter//0090; type=boolean; label= Show retweets: Also show own retweets - only if mode is showOwn (e.g. 1)
        main.showRetweets = 1

        # cat=plugin.wt_twitter//100; type=text; label= URL of the twitter rss feed: Public rss feed to get the tweets written by an user. Please replace user name with %q as placeholder.
        main.rssFeed = http://www.twitter-rss.com/user_timeline.php?screen_name=%q

        # cat=plugin.wt_twitter//0800; type=options[,utf8_encode,utf8_decode]; label= Convert Text: Only if you have problems with UTF8 in Frontend (e.g. utf8_decode)
        main.utf8 =

        # cat=plugin.wt_twitter//9999; type=boolean; label= Debug Mode: Enable or disable some debug output
        debug = 0

}
setup (newsticker template)
# WT_TWITTER PLUGIN - additional Typoscript for Newsticker #

# Set new path for the templates
plugin.tx_wttwitter.view.templateRootPath = EXT:wt_twitter/Resources/Private/Templates/TwitterNewsTicker/

# Include Prototype and newsticker JS
page {
        includeCSS.file3160 = EXT:wt_twitter/Resources/Public/Media/CSS/wt_twitter_newsticker.css

        headerData.3160 = COA
        headerData.3160 {
                # add prototype.js
                10 = TEXT
                10.wrap = <script src="|" type="text/javascript"></script>
                10.value = /typo3/contrib/prototype/prototype.js

                # add effects.js
                20 = TEXT
                20.wrap = <script src="|" type="text/javascript"></script>
                20.value = /typo3/contrib/scriptaculous/effects.js

                # add own newsticker.js
                30 = TEXT
                30.wrap = <script src="|" type="text/javascript"></script>
                30.value = /typo3conf/ext/wt_twitter/Resources/Public/Media/JS/wt_twitter_newsticker.js
        }
}

FAQ

Default

Q: How to change the HTML Template
  • Create a new folder called “Twitter” (case sensitive)
  • Create a new file in the folder “List.html” (case sensitive)
  • Copy the content of the extisting file typo3conf/ext/wt_twitter/Resou rces/Private/Templates/Twitter/List.html into the new file
  • Activate it via TypoScript (without the Twitter Folder)
plugin.tx_wttwitter.view.templateRootPath = fileadmin/templates/
  • Modify the content
  • See fluid manual for more information how to work with a fluid HTML template

img-15

Q: Newsticker won't work
  • Have you included the second static template?
  • Three more JS are loaded in the frontend (also check the path to the javascripts)?
  • No another JS libraries are working on the same page (e.g. mootools, jquery, etc...)?
  • Tested with the default html template for newsticker (some html id's and structures are needed)?
Q: How can I change the CSS?

If you use the newsticker function, a default CSS is added to the output. Check the css, copy the content and paste it in your CSS. Try to make your changes

Q: I want to convert the charset of the output

Example constants:

  • plugin.wttwitter.main.utf8 = utf8_decode
  • plugin.wttwitter.main.utf8 = utf8_encode
  • plugin.wttwitter.main.utf8 =
Q: Problems with the output

You can activate the debug output via constants (see Constants Editor)

Q: How to manipulate the cache timings of wt_twitter

For default wt_twitter works as a USER extension (no more USER_INT since 0.4.0) and the cache time is set to 50 minutes. That's because twitter allows only 50 request each hour.

This means that the complete page cache is refreshed after 50 min.

If you want to change this time, you can use the dropdown field “Cache expires:” of your page module:

img-16 Note: This also effects the cache of the whole page

Error messages of the plugin

E: Please add wt_twitter Static Template in the TYPO3 Backend

Did you forget to include the static template? Some of the settings are missed.

E: Could not authenticate you

Check your username and password in the flexform settings

E: TypoScript and Flexform settings

You have activated the debug mode in the constants – you'll see some nice information in the frontend

E: Result Array from Twitter

You have activated the debug mode in the constants – you'll see some nice information in the frontend

E: Please enable CURL on your server

CURL is not installed on your server – please ask your server hoster

(Another message)

It's possible that twitter shows a complete new message – please follow the instructions

To-Do list

  • Switch to Twitter Api 1.1 (oAuth)
  • Make the wt_twitter_newsticker.js dynamic to set the fade time, etc...

Are there any further feature requests or bugs? Please visit http://forge.typo3.org/projects/extension-wt_twitter

ChangeLog

Version 0.5.0 alpha

2013-06-12: TER Update to version 0.5.6
  • Bugfix: Wrong rss feed url due to twitter api changes
  • Bugfix #42682: Still "missing image"
2010-09-10: TER Update to version 0.5.3
  • Bugfix #9653: Possibility to convert the text with utf8_encode or _decode
  • Bugfix #9651: TYPO3 4.4 needed now
  • Bugfix #9620: Remove own account name in front of own tweets
2010-09-02: TER Update to version 0.5.2
  • Bugfix #9533: Deactivate Basic Auth (Major Bugfix)
  • Bugfix #9470: Hashtags with umlauts
2010-08-10: TER Update to version 0.5.1
  • Bugfix: Limit could not be used in some cases
  • Bugfix #9149: Renaming list.html into List.html
2010-07-09: TER Update to version 0.5.0

Complete redesign with Fluid and Extbase

Version 0.4.0 alpha

2010-06-20: TER Update to version 0.4.0

Feature #8259: Caching for wt_twiitter enabled

Version 0.3.0 alpha

2010-05-12: TER Update to version 0.3.4

Feature: Anymarker for outside the loop enabled

2010-05-12: TER Update to version 0.3.3
  • Bugfix #7096: No more crashes if a tweet is with geotag
  • Feature #7752: Support geotags
  • Bugfix: External links with target _blank
  • Bugfix: UTF8 en- and decode could be activated via constants
2010-04-11: TER Update to version 0.3.2

Bugfix: Anymarker was not supported

2010-03-02: TER Update to version 0.3.1

Bugfix: If Retweets shouldn't be shown and limit was 1

2010-02-23: TER Update to version 0.3.0
  • Show tweets from a searchterm
  • Show retweeted messages

Version 0.2.0 alpha

2010-01-25: TER Update to version 0.2.2
  • Wrong method call for function msg()
  • Improve errors if no password was set
2010-01-19: TER Update to version 0.2.1
  • Bugfix #5023: Charset problem fixed
  • Improving error messages
2009-12-15: TER Update to version 0.2.0
  • Complete new code
  • API call instead of RSS
  • Show own entries, show entries from friends, show own and friend enties
  • Much more markers (background-image, font colors from twitter, etc...)

Version 0.1.0 alpha

2009-09-24: Initial release 0.1.0

First upload to TER

21