1. Home
  2. Support
  3. Widget - Twitter
  4. Create a custom X widget with FeedWind

Create a custom X widget with FeedWind

  • Created : Dec, 14, 2017
  • Last Updated: Jan, 12, 2024

Easy Steps

About our Twitter widget

The FeedWind Twitter widget is easy to set up and customize to match your website design.

As with all our RSS widgets, the Twitter widget is fully featured with customization options. You can choose which elements of your calendar feed to display and choose fonts, colors and use a custom CSS (Pro and Plus plan only) to make more detailed styling adjustments.

Getting started

To create a Twitter widget you must first either sign in to your FeedWind dashboard or if you don’t have an account, you can create one in no time at all! (We just need an email address and that’s it!). Sign in to your dashboard and then click on the “Create widget” button.

create google calendar widget

You will then be presented with 4 options, select the option to create a Twitter Widget. You will then see our setup screen, tailored specifically to fit Twitter.

Create a Twitter widget

The Twitter widget setup screen

Entering your Twitter ID

To get a feed of your tweets, you must first authorize FeedWind to use your Twitter account.

Input Twitter ID and password

Twitter Widget Options in FeedWind

Showing and Hiding Specific Twitter Information

You can select which types of Tweets are displayed in their FeedWind. Three options are available with the Twitter widget.

There are three options from which to choose:

  • Your tweets – By selecting this option, you can display tweets and retweets you posted, as well as people you follow.
  • Hashtag – Limits the widget to only display tweets with a specific hashtag. This feature is ideal for controlling the visibility of certain feed items by tag in a company feed, for example. (Only tweets posted within the last 7 days are displayed.)
  • User tweets – Display tweets created by a specific Twitter user. For instance, a fan website could display a feed from its featured celebrity.

Replies can be displayed in both Your tweets and User tweets, though their default setting is ‘off’. To display replies, navigate to your Twitter widget’s settings in the FeedWind setup screen.  Under the section labeled ‘Tweets’, select ‘Advanced Settings’. Click the switch to the right of ‘Display reply’ and set it to ‘on’.

Twitter widget Options

These are options are  specific to Twitter widgets in the FeedWind options menu:

  • Twitter icon – Toggle ‘on’ if you want to display the Twitter icon in each feed item.
  • Displaying large images – Presents the tweet’s main image with its text placed above
  • Font sizes – Each font element in a tweet can be resized to within ranges that fit the view.

What do you want display on a Twitter widget

Display a large image on a Twitter widget

Customize the font size and the color

Create custom design Twitter widget


Follow these steps to create your own Twitter Widget.

  • Create widget -> Twitter
  • What do you want to show? -> Your tweets
  • What do you want to show? -> Tweets from you and users that you are following
  • General -> Width -> Responsive/In Pixels -> Responsive
  • General -> Style -> Thumbnail
  • General -> Height -> Posts -> 2
  • General -> Scroll -> ON
  • General -> Scroll -> Vertical
  • General -> Scroll -> Scroll Bar -> OFF
  • General -> Scroll -> Autoscroll -> ON
  • General -> Scroll -> Autoscroll -> Normal
  • General -> Advanced Settings -> Custom CSS link -> Show custom css 
    Note: Copy CSS from below, paste into your CSS file [your-file-name.css] , make changes as per your need and upload to your server or in Dropbox [ Check How to host CSS on Dropbox Click here], copy the complete CSS path [e.g. http//example.com/css/your-file.css] and paste in "Custom CSS Link" field in Feedwind setting.


/* Copy CSS from here  */

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}



header {
  background: linear-gradient(270deg, #11ca9a, #0da17b, #0773f0, #ec155f, #b2154b, #f02c2c, #f98600, #ce7815, #75bb15, #64a70a);
  background-size: 2000% 2000%;

  -webkit-animation: AnimationName 50s ease infinite;
  -moz-animation: AnimationName 50s ease infinite;
  animation: AnimationName 50s ease infinite;
}

header .fw-tw-feed-title-username {
  font-size: 14px;
  padding-left: 10px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

header .fw-tw-feed-header-title .fa-twitter.tw_twitter_icon_blue {
  color: #fff;

}

header .fw-tw-feed-header-title {
  padding: 20px;
  border-bottom: 0px solid #dbdee1;
}

#fw-tw-feed-items {
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

a.fw-tw-links-in-tweets {
  color: #fff;
  display: inline-block;
  margin: 5px 0 0 0;
  padding: 0px 5px;
  text-decoration: underline;
}

.fw-tw-reply-text {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.25);
  display: inline-block;
  margin: 5px 0 0 0;
  padding: 0px 5px;
}

#fw-tw-feed-items .fw-tw-feed-item-image-module {
  margin: 0 10px 0 0;
  padding: 0;
  float: left;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
  height: 100px;
}
/* CSS Ends Here  */
  • Feed Title -> Custom -> ON
  • Feed Title -> Font size -> 16
  • Feed Title -> Colors -> Background color -> #FFFFFF
  • Feed Title -> Colors -> Font color -> #FFFFFF
  • Feed Title -> Advanced Setting -> Twitter Icon -> Blue Twitter Icon
  • Tweets -> Font size & Color -> Tweets -> [14] [#FFFFFF]
  • Tweets -> Font size & Color -> Links in Tweets -> [#55a0ff]
  • Tweets -> Font size & Color -> Full Name -> [16] [#FFFFFF]
  • Tweets -> Font size & Color -> User name -> [14] [#FFFFFF]
  • Tweets -> Font size & Color -> Date/Time -> [12] [#FFFFFF]
  • Tweets -> Font size & Color -> Action Icons -> [16] [#FFFFFF]
  • Tweets -> Font size & Color -> Retweet Label -> [14] [#FFFFFF]
  • Tweets -> Font size & Color -> Background -> [#FFFFFF]

Rest keep as default

Privacy Setting

Please uncheck “Protect your Tweets” of “Tweet privacy” on your Twitter setting page as follows to display your tweets on FeedWind widget.

Related posts

Advanced Tweet Options

Advanced Tweet Options

This is an official document introducing the advanced settings in the ‘Tweets’ section of the FeedWind Twitter widget.

Tutorial Categories