TwitFeed is a highly customisable and responsive Twitter feed widget for Adobe Muse. It can be placed anywhere on the page to display a live feed from your own account, or perhaps one that has relevance to your interests or business.
The new version is even easier to use using the Twitter username to display the stream. Almost every aspect of the widget styling can be configured, so can be seamlessly added into your existing site design.
Browse to the location where you downloaded the widget file. Extract the contents of the file. Double-click the .mulib file to import it into the Library. This will launch Muse if it's not already open.
Alternatively, once you’ve unarchived the file, you can import the widget into the library by clicking the Import Muse Library icon at the base of the Library Panel.
Once it's imported the new widget will appear in the Library panel as a folder containing one or more items..
Start by dragging the widget onto the canvas from the Library Panel. The default Twitter account is ours, so we see our latest tweets once the widget has refreshed.
Remove the default account from the Twitter Username field; you could keep it there to keep up to date with Creative Muse, of course!
Type in a new account name without the leading @ symbol. We've used the Adobe Muse team account here (adobemuse). The widget will reload and display the stream with the settings we applied.
Our first option is the Feed Style. This determines how the feed display behaves on the page. We've stuck with the default setting here.
Note: if you use or switch to the fixed option, the widget will make space on the page, which may disrupt the design.
The next option determines how many posts will appear in the stream. This can be set to an amount between 1 and 9999. The default is 5; we'll change it to 10 for the example. We don't see any change, as the additional posts are hidden.
Next we can set the amount of padding for the individual posts. We can set this to a range of 0 to 9999. The default is 15. We'll reduce it to 5 here.
We can also change the distance between posts. The default setting is 6px. Again, the range can be anything between 0 and 9999. We'll set it to 3 for the example.
The default colour for the post background is light grey. We can change this if required. If you want the background to be transparent, set the option to No Color. We've left it at the default here.
With the main style set up, we can choose to include or remove some additional options. We've added rounded corners to the posts and opted to display the inline images.
The next section is for the user details display header. The first option is for the background colour. By default it's set to No Color. Use the colour chip to choose a colour. Here we've chosen a slightly darker grey.
We can also set the colour of the text for the name and username entries. This is independent of the main post text. Here we've used a charcoal grey colour.
Next we have the Avatar Size option. The default is Responsive, which we'll keep for our example.
We can choose between a square and circular avatar. Some images work better in circles than others. The Muse logo is square so we'll keep the default square option.
Now we've finished with the widget options, we can look at changing the typesetting. Make sure the widget container is selected. Open the Text panel.
The first thing we'll change is the typeface. We've selected the Lato web font here. We've increased the size to 14 and set the colour to green. Note how this only affects the post text.
Finally we can change the appearance of the post links. We've created an new link preset named TwitFeed and applied it via the Text panel.
The example widget is below. This page isn't responsive so the widget proportions are fixed. Check out the TwitFeed widget preview page for a demonstrations of a responsive version.