fbpx

Embed Twitter feed in your Learning Wall

We love Twitter and you can create a feed by #hashtag or even group a number of twitter accounts into one feed.
Note: you will need a Twitter account to create a feed properly so make sure you're all set up first.

Get your Twitter embed code

To get started you need to login to your Twitter account, go to Settings >> Widgets
Then click 'Create New'

twitter-embed-widget

There are lots of settings to look at but at its most basic, if you click 'Create widget' and copy the embed code created, that will then work really well in your Learning Wall and look nice straight away.

Customise, Test and Debug Embed Code

What Tweet content can I add to the widget?

twitter-embed-options

There are a few options available to add content to your Twitter widget.

User timeline
You can create an embedded timeline for any public Twitter user. Each user timeline includes a follow button in the header, which allows website visitors to follow the account with one-click. There’s a Tweet box in the footer, so that visitors can Tweet directly to the user without leaving the page.

Favourites
Like the user timeline, a favourites timeline can be created for any public Twitter user, and displays that user’s favourited Tweets.

List
The list timeline shows Tweets from a specific list of users. The header of the list widget contains the list name, description, and links to the list creator’s profile. Retweets by members of the list are included in the timeline. To create a list timeline you need to have either created that list yourself, or subscribe to it.

Search
You may create a search timeline for any query or #hashtag. Searches for a single #hashtag feature a simplified header section, and a “Tweet #hashtag” Tweet box in the footer so that visitors can easily contribute to the conversation directly from your page. Clicking on the #hashtag in the header will open twitter.com search page for that #hashtag. You can also choose to enable “safe mode”, which will exclude Tweets with common profanity and those marked possibly sensitive from appearing on your website.

Collection
Collections are timelines curated by Twitter users. Embedding collections lets you share your timelines with the world.

Customisation Options

Theme
You can change the default setting of the 'light' theme by adding a data-theme="dark" attribute to the embed code.

Link color
You can change the link colour to fit your styling by adding a data-link-color="#cc0000" attribute.
Note that some icons in the widget will also appear this color.

Chrome
Control the widget layout and chrome by using the data-chrome="nofooter transparent" attribute on the embed code.
You can add any of the controls below by using a space-separated set of the following options:

  • noheader: Hides the timeline header. Please refer to the timeline display requirements when implementing your own header.
  • nofooter: Hides the timeline footer and Tweet box, if included.
  • noborders: Removes all borders within the widget (between Tweets, cards, around the widget.) See also: border-color.
  • noscrollbar: Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.
  • transparent: Removes the background color.

Border color
Change the border color used by the widget. Takes an #abc123 hex format color e.g. data-border-color="#cc0000"

Tweet limit
To fix the size of a timeline to a preset number of Tweets, use the data-tweet-limit="5" attribute with any value between 1 and 20 Tweets. The timeline will show the specified number of Tweets from the timeline, expanding the height of the widget to display all Tweets without scrolling.

IMPORTANT NOTE:
Add any of these attributes in the <a> tag in the embed code.
Eg: <a class="twitter-timeline" href="https://twitter.com/schudio" data-widget-id="552786957097775105" data-theme="dark" data-link-color="#cc0000">

Testing

Make sure that any changes you make are spelt correctly or they won't work.
Make sure that you don't delete any punctuation and be careful for syntax errors.

Join Our Newsletter

Simply add your email and you'll get expert advice weekly, direct to your inbox.


Previous Post Old Entry

Share this article:

Share:

Next Post New Entry
WordPress Lightbox Plugin