Feeds:
Posts
Comments

Archive for July, 2011

You want to integrate a Twitter module to your DotNetNuke Portal in an easy way? This is module is for you. It can display your most recent Twitter updates on your DNN portal in seconds, without touching any JS or CSS. It helps you to customize the twitter profile widget from your DNN portal.

This blog post will describe the simple steps on how to use DNN Twitter Profile Widget module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded DNN Twitter Profile Widget, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-2: Add Module to a Page

Once the module is installed, it will be available in the Module drop-down. You can add Twitter Profile Widget (DZ_TwitterProfileWidget) to your desired pane.

Add Module to a Page

Add Module to a Page

Step-3: Module Settings

This module is added with default settings and configuration. You can go to module settings page and scroll to bottom section “Twitter Profile Widget Settings”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

To customize theme, we provide java-script based color picker:

Customize Theme using Color Picker

Customize Theme using Color Picker

Following table describes the available settings.

Setting Description
Username Twitter Username – This should be a Username of a public twitter accounts
Number of Tweets Enter number of tweets to fetch – please enter values betwen 1-30
Panel Dimension Width and height for the panel where scrolling twitter feed will be displayed
Panel Alignment Alignment of the twitter panel in the content pane
Show Twitter Logo Show or hide twitter logo in the footer
Show Twitter Link Show or hide twitter link in the footer
Tweet Interval Tweet Interval (milli-seconds) betweet tweet scroll
Poll for new results Select to poll for new results during scrolling
Show Avatars Show or hide twitter profile images
Show Tweet Time Show or hide the time that the tweet was sent
Show hashtags Show or hide the hashtags
Loop Results Select to loop results
Include Scrollbar Select to show scrollbar
Shell Background Color Choose the color for shell background
Shell Text Color Choose the color for header and footer text
Tweet Background Color Choose the color for tweets background
Tweet Text Color Choose the color for tweets text
Links Color Choose the color for tweet links
Include jQuery Select this setting, if jQuery is not available in the portal

Step-4: Twitter Search Widget View

You are all set – now you can go back to the page where you added the module and now you can see the Twitter Profile Widget in action.

DNN Twitter Profile Widget

DNN Twitter Profile Widget

Possible Issues and Quick Resolution

Twitter Profile Widget not working:

Make sure jQuery 1.4.x or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module setting page.

Read Full Post »

LatestTweetsTooltip is a DNN module for showing the latest tweets about a certain word or phrase. This module will help you Twitterize your content. This module does not have any user interface itself, it will integrate tweets with your existing content, which is added using any content module including HTML, Forum, Blog, Announcement or any other content module. You will just need to drop this module to your page, change settings according to your needs.

In your content, you just need to wrap the terms or phrases into pre-defined span tag like
<span class=”twitter_search”>[Term]</span>

This blog post will describe the simple steps on how to use Latest Tweet Tooltip module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded the module, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-2: Add Module to a Page

Once the module is installed, it will be available in the Module drop-down. You can add Latest Tweet Tooltip (DZ_LatestTweetTooltip) to your desired pane.

Add Module to a Page

Add Module to a Page

Step-3: Module Settings

After adding the module, you can go to module settings page and scroll to bottom section “Latest Tweet Tooltip”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Show Twitter Bird Show or hide twitter bird image
Show Tweet Time Show or hide the time that the tweet was sent
Pause on Hover Pause scrolling tweets while mouse is hover the twitter feed area
Show Avatars Show or hide twitter profile images
Avatar Icon Size Icon size for the twitter profile images
Delay Delay (milli-seconds) betweet tweet scroll
Underline Terms Choose to underline twitter terms
Underline Color Choose color for underline for twitter terms
Exterior Color Exterior color, this will be applied to frame border and title background
Interior Color Container background-color
Include jQuery Select this check-box, if jQuery is not already available in the portal
Resolve jQuery Conflict Select this check-box, if you are also using other java-script frameworks.

Step-4: Latest Tweet Tooltip View (with demo content)

You are all set – now you can go back to the page where you added the module and now you can see the latest tweet tooltip in action.

Latest Tweet Tooltip with Demo Content

Latest Tweet Tooltip with Demo Content

Possible Issues and Quick Resolution

Tweets not working:

Make sure jQuery 1.4.x or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module setting page.

Conflict with other java-script frame-works:

This module relies on jQuery, if your portal is also using other java-script frameworks (like moo-tools or prototype etc.), you should select the check box “Resolve Conflict” in module settings.

On DNN 04.xx.xx, please always select the “Resolve Conflict” settings.

Read Full Post »