The Joomla! Community Magazine™

How to Install a Joomla Twitter Widget

Written by | Tuesday, 01 October 2013 00:00 | Published in 2013 October
It is known that the text editor in Joomla allows special configurations needed to incorporate content in the code. There are times when I do not want to change these settings to keep some order on our website for the authors, but nevertheless we would like to add modules with PHP or XHTML code, as in the case of widgets. The subject of this article, by way of tutorial, is to explain how to enter Javascript, PHP, HTML or CSS code in modules without relying on the editor you have installed (JCE, TinyMCE, FCK, etc..). As an example, I will illustrate how to add a Twitter widget to your website.
How to Install a Joomla Twitter Widget Helvecio da Silva @hlvcdesign

While there are many ways and different extensions that can be used, for my purposes I use Blank Module or Mod HTML, both of whic are available in the JED.

Let's begin ....

In principle we will generate the javascript code for a Twitter widget. To do this we access the following URL (Twitter account required): https://twitter.com/widgets

From there we will click on "My Website" and see a number of options for different types of widgets:

  • Profile Widget: to show our profile
  • Search Widget: to show a search engine based on a specific search. For example if we search for "CNN", we will be shown all the entries that contain those three letters.
  • Faves Widget: to show those entries marked as favorites and follow them.
  • List Widget: to show the user input of a list we have set. For this article I took as an example the latter case. Once clicked on a menu will appear with a first item called Settings that looks like this:

joomla 1

Here we will put our Twitter username, choose the list below we have set, then we can put a title and a subtitle or "legend" to be located below the title.

In "Preferences" (preferences) will see these options:

joomla 2

Here you can specify whether or not to show the valuations of the new results (Poll for new results?), a scrollbar, if you want to load all tweets or at a certain interval time, the number of tweets, if we are to show the avatar, the time and whether or not we will show hash tags.

Next comes the appearance widget view options with the following configurations:

joomla 3

The "Shell background" would be the bottom of the titles and legend over the foot and the edge of the widget. The "Shell text" would be the color of the text of the title and legend, plus the text that appears at the bottom. Then "tweet background" would be the bottom where tweets appear, "tweet text" the colors of the inputs and "links" the colors of the links.

In the dimensions or "Dimensions" we have the following options:

joomla 4

From here we can give a width in pixels but observe that we can also choose "auto width", i.e. self-adjusting. This is ideal for placement in Joomla templates or self-adjusting variable widths.

Finally we have two buttons at the bottom. One is "Test setting" to test how the widget looks.

joomla 5

Here, select all the code in the box, copy and paste it into your "Blank Module" . This module not only allows us to put this code in and run it, but we can also link the code to other pages (including titles) and it is carried out in those places as well. You install it just like any Joomla extension and once done, from the Module Manager, you can access the back-end configuration which has many possible configurations but for our case we'll leave it as is. Paste your Twitter javascript inside the box where it says "Place your code snippet ...." and voila! ... we have the Twitter widget on our Joomla website.

Read 11805 times
Tagged under English, Sitebuilders
Ashutosh Chauhan

Ashutosh Chauhan

Author at magazine.joomla.org Works at eukhost.com.