Today on the web we have tons of information pages and movies to review, political news, technology, the professional field and other more personal things, all this means that we have to go browsing from one website to another, from one portal to another, from one blog to another; For this reason, the main social networks, microblogging or anything that resembles an information repository have developed ways in which we gather all this information and that we can easily display it on our website or blog.
Social networks have been of fundamental importance in recent years and everything indicates that it will be this way until they invent something else and it is that it is very easy to organize a theme from which other people can take advantage and that we can share all this information from direct and free way; in this entry The Twitter widget allows us to include a bar on our website that shows our latest Tweets through a JavaScript script; This is one of the best ways to promote our Twitter account on our site.
If your latest Tweets have integrated images or videos; these will also be displayed.
Your Twitter feed on your website: Get the Twitter widget
Enter your Twitter account and click on the icon of your profile image and then on the "settings" option:
Select the option "Widgets".
And now click on the "Create new" button.
Finally, it will show us a form; from which we can customize several aspects of it, among the most important:
- The username (1).
- Widget height (2).
- Light/dark stencil color (3).
- Link color (4).
After you customize it, we press the "Create widget" button and copy the code that it generates on our website.
Customize the Twitter widget
All personalization options must be set as attributes within the <a> tag.
- data-theme: allows you to set the theme of the widget, "dark" or "light".
- data-link-color: allows you to set the color of the links.
- width: Allows you to set the width of the widget.
- height: allows you to set the height of the widget.
- border-color: allows you to change the color of the borders that separate the Tweets.
- data-tweet-limit – Allows you to set the maximum number of Tweets displayed in the widget.
- data-chrome: this attribute allows us to customize the shape of the widget:
- noborders: removes separating borders between Tweets.
- noscrollbar: Hide the scroll bar.
- nofooter – Prevents an area for Tweeting from being displayed.
- noheader: Hide the header of the widget.
- transparent: removes the background color of the widget.
Remember to carefully review each tab and each section that everywhere we can customize the experience as well as the characteristics of the plugin so that it works and looks as you decide, aspects such as color, color height of the links, number of tweets, if you want it to be view the photos as well as the boxes to fill in the likes, lists, searches, all this allows customization to a large extent; for more information go to the official documentation:
Twitter Widget Features
The Twitter widget is not only used to show the TimeLine or what is the same, the last published tweets, retweets, comments, etc; You can also add any of the following custom filters:
- Likes: shows all the likes before favorites of the users on Twitter
- List: Shows all public tweets from own or subscribed Twitter lists
- User Timeline: Where you can display tweets and retweets from Twitter users.
- Search: You can show personalized search results with hashtags, mentions, etc.
Conclusions
Unlike social buttons, widgets provide a true channel for your visitors to view additional content in a simple and effective way.
Anyone who has their own Blog or a website that tries to generate a service is an almost mandatory measure to show their presence on the web, to be known, trustworthy, to have a track record, and you can see all of this reflected on social networks, since there You see how many users the community has, comments, how long it has been in the sector, among much more information that you can obtain from social media such as Twitter, Facebook, among others, and we can easily reflect all this on our website through these widgets.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter