With the iDiD Twitter Connector, you can retrieve the feeds of public Twitter accounts for your signage displays.
NB! The use of this HTML element is only allowed in the iDiD digital signage system.
NB! You can only display tweets from public Twitter accounts with the Connector.
Implementing the Twitter Connector
Start using the Twitter Connector at https://extra.idid.fi/twitter/configure/
Depending on your computer's operating system and the browser's language settings, you will see the Twitter Connector either in Finnish or English. Both options are shown in the instructions.
1. First, define the Twitter account whose updates you want to display on your signage display. Type the Twitter handle with the @ sign and press Enter.
2. View Selection: By default, updates are displayed in a grid of three columns and three rows.
- You can switch from the grid to the list view in the DISPLAY menu.
Grid View
3. Number of Feeds in the Grid View:
Change the number of columns and rows displayed in the columns and rows fields.
Optionally, change the amount of space between the tiles in pixels in the grid gap field
Define whether the text is displayed on the left, right, top or bottom of the image in the tweet in the TEXT POSITION field.
List View
3. Number of Feeds in the List View:
Specify the number of posts to be displayed in the number of posts field.
Optionally, change the space in pixels between the posts in the list gap field.
If all the tweets in the list do not fit on the display at once, you can determine the duration of display for the tweet by setting the time per card (s).
Determine whether the text is displayed above or below the image in the TEXT POSITION menu.
Image Settings
4. Determine the positioning of the image in the IMAGE FIT menu.
- contain: the entire image is contained into the space reserved for it. No part of the image is cropped out. As a result, there may be empty space above and below the image, depending on the aspect ratio.
- cover: the image fills out the entire space reserved for it in the image slot of the grid or list. In this case, part of the image may be cropped outside of the slot.
- In this case, also specify the IMAGE FOCALPOINT, which determines its placing in the image slot.
Text Settings
5. Edit the formatting of the posts in the following ways:
- Change text color in the TEXT COLOR menu.
- Change the font size in the text size (px/em) field, either in pixels (add px without spaces after the number) or relative to the window size (em). For example: 20px or 1em.
- Determine the display length of the post by setting the maximum number of characters allowed in the post length (in characters) field
Post Information
6. Additional Information: By default, when publishing, the user's name, Twitter handle, profile picture and information about how long it has been since the update is published are displayed.
Just like the text of the tweets, you can also edit the size and color of the info text.
By default, publications show all of these, but you can remove one or more piece of information from view. Hide all information by unchecking SHOW INFO.
You can edit the size and color of the tweet information in the same way as for published texts:
- Change the text size of the post information in the info text size (px/em) either in pixels (px) or relative to the window size (em).
- Change text color in the INFO TEXT COLOR menu.
- Change the size of your Twitter profile picture in the field icon size (px/em).
- Edit the distance between your profile picture and post information in the icon gap (px/em) field.
If you want to hide a selection of the information, deselect the desired items
- SHOW HANDLE: Twitter username with @ tag
- SHOW NAME: The name of the Twitter user
- SHOW DATE: Time since publication
- SHOW ICON: The user's profile picture on Twitter
- SHOW TWITTER ICON: Twitter bird icon
In addition, you can change the color of the Twitter icon from the menu TWITTER ICON COLOR.
The URL of the HTML Element
7. As you create the settings, the URL according to the selected attributes is created on the bottom line of Connector. When you are satisfied with the configuration, copy the URL.
If you want to edit the feed view you created earlier, paste it in the address field and press import settings from url and then make the changes you want.
Adding Twitter Feed to Content
- Create a new content slide in which to display the Twitter feed. Create or select an HTML element.
- Copy the URL from the bottom field of the Twitter Connector and paste it into the address field of the HTML element.
Remember to save the content. Please note that the feed content created with the Twitter Connector has a transparent background, so you can use your desired background color, background images, and other elements when finalizing the content.
Created 15.12.2022 EJ