How to Embed Twitter in an Iframe
By Dan Stone
Twitter provides embedded widgets that inject Twitter content into an inline frame within another Web page through a script. Twitter's site blocks direct iframe display through the secure hypertext transfer protocol, which keeps someone from making a direct iframe to any given page on Twitter. Instead, Twitter widgets need to be created through the corresponding Twitter account to be embedded on a site within an iframe.
Pages Within Pages
Iframes are a feature within HTML that allows a Web developer to embed content from one website or Web page within another. Within HTML, there are other commands that can be used to create frames which divide a Web page into separately loading content: the iframe tag creates an enclosed frame. Twitter widgets use the iframe construct to display content that's hosted on Twitter within other websites to appear as if it is one cohesive Web page.
Twitter Iframe Widgets
Twitter's iframe-based widgets are the social media site's authorized and controlled version of displaying its content on other sites. An account owner can create user timeline, favorites, list and search widgets. Twitter widgets are created by using the widget creator within a Twitter user account: you can create widgets for other accounts within your own account. Twitter will generate a JavaScript code that can be embedded on another site that provides the authentication for the widget creation and content. The widgets themselves are customized and hosted on Twitter's site.
Creating Twitter Widgets
To create Twitter widgets, log in to the Twitter site with your personal account, click the "gear" icon and select the "Settings" option. Choose the Widgets subheading from the left-side menu and click "Create new." Choose "User timeline," "Favorites," "List" or "Search" depending on which kind of module you want to create. To set up "User timeline" and "Favorites," enter the account user name and click "Create widget" to generate the widget code. To setup a "List" widget, select the already created list you want to use and click "Create widget." To create a search widget, enter the hashtag you want to list under the "Search Query" and click "Create widget."
Implementing Twitter Widgets
All four Twitter widget types generate an embed HTML and JavaScript code that you can use to place the widget within Web pages. To use the code, copy it from field on Twitter's site and paste it into the website's page code. The self-contained script will load on the page and inject an iframe that contains the widget's contents.
Embed Third-Party Tweets
You can generate embed codes for individual tweets from any account by using the "Embed" option. To use the tweet embed feature, go to the Twitter account's timeline page and locate the tweet you want to embed. Mouse over the tweet, click "More" and select "Embed Tweet." The site pops up a box containing the embed code, which can be copied and pasted to another site to display the tweet.
References
Writer Bio
Dan Stone started writing professionally in 2006, specializing in education, technology and music. He is a web developer for a communications company and previously worked in television. Stone received a Bachelor of Arts in journalism and a Master of Arts in communication studies from Northern Illinois University.