CINXE.COM
Getting started with Cards | Docs | Twitter Developer Platform
<!DOCTYPE html> <html lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" data-behavior="i18n" data-environment="prod" data-server-mode="publish" data-dc="p" class=" twtr-type--chirp"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>Getting started with Cards | Docs | Twitter Developer Platform </title> <meta name="description"/> <link rel="canonical" href="https://developer.x.com/en/docs/x-for-websites/cards/guides/getting-started"/> <meta property="og:url" content="https://developer.x.com/en/docs/x-for-websites/cards/guides/getting-started"/> <meta property="og:type" content="article"/> <meta property="og:title" content="Getting started with Cards"/> <meta property="og:image" content="https://cdn.cms-twdigitalassets.com/content/dam/developer-twitter/x_sharing_card.png.twimg.768.png"/> <meta name="keywords"/> <meta name="twitter:card" content="summary_large_image"/> <link rel="alternate" hreflang="en" href="https://developer.x.com/en/docs/x-for-websites/cards/guides/getting-started"/> <meta name="twitter:widgets:new-embed-design" content="on"/> <meta name="twitter:widgets:csp" content="on"/> <link href="https://abs.twimg.com/favicons/twitter.3.ico" rel="shortcut icon" type="image/x-icon"/> <script type="application/json" id="analytics-settings">{"google":{"accounts":[],"options":{"displayAdvertisingFeatures":false}},"scribe":{"scribeSectionWithImpression":false},"trackingPixel":{},"bing":{}}</script> <script type="application/json" class="u14-data-layer" data-component="u14-data-layer" id="data-layer">{"page":{"pageId":"09f5cc9","pageKey":"09f5cc9-en-en","pageName":"Getting started with Cards","pagePath":"/content/developer-twitter/en/docs/x-for-websites/cards/guides/getting-started","pageType":"documentation-page","pagePublishDate":"16/07/2020","language":"en","geoRegion":"en","category":{"tags":{"tagIDs":[],"tagNames":[]},"scribe":{"component":"x-for-websites/cards/guides/getting-started","section":"docs","page":"developer","element":"page"}},"attribute":{}}}</script> <link rel="preload" href="https://fonts.twitter.com/chirp/chirp-bold-italic-web.woff2" as="font" type="font/woff2" crossorigin/> <link rel="preload" href="https://fonts.twitter.com/chirp/chirp-bold-web.woff2" as="font" type="font/woff2" crossorigin/> <link rel="preload" href="https://fonts.twitter.com/chirp/chirp-display-extended-black-web.woff2" as="font" type="font/woff2" crossorigin/> <link rel="preload" href="https://fonts.twitter.com/chirp/chirp-regular-web.woff2" as="font" type="font/woff2" crossorigin/> <link rel="preload" href="https://fonts.twitter.com/chirp/chirp-regular-italic-web.woff2" as="font" type="font/woff2" crossorigin/> <link rel="preload" href="https://fonts.twitter.com/chirp/chirp-extended-bold-web.woff2" as="font" type="font/woff2" crossorigin/> <link rel="stylesheet" href="https://cdn.cms-twdigitalassets.com/etc/designs/developer2-twitter/public/css/chirp.css.twhash.p.f.41e1f29c2d4295d68b05db0725781db3.css" media="screen" type="text/css"/> <link rel="stylesheet" href="https://cdn.cms-twdigitalassets.com/etc/designs/developer2-twitter/public/css/legacy-colors.css.twhash.p.f.20fd26d638816cbce52d44904fc9c3c2.css" type="text/css"/> <link rel="stylesheet" href="https://cdn.cms-twdigitalassets.com/etc/designs/developer2-twitter/public/css/project.css.twhash.p.f.6f0077497aec915e1289fe335d870a31.css" media="screen" type="text/css"/> <link rel="stylesheet" href="https://cdn.cms-twdigitalassets.com/etc/designs/developer2-twitter/public/css/print.css.twhash.p.f.67de1c964d9398cbf614aab841910ad6.css" media="print" type="text/css"/> </head> <body class=" twtr-theme--blue page documentation-page page-- twtr-color-bg--white-neutral js-no-scroll atm-light " style="--theme-color: var(--blue-dark)" data-analytics-page="developer" data-analytics-section="docs" data-analytics-component="x-for-websites/cards/guides/getting-started" data-analytics-element="page"> <div id="twtr-dtc-main" style="--nav-height: var(--navbar-tall)" data-dtc-rebrand-on="true" class="dtc-rebrand-flag-on"> <div id="twBearerToken" data-value="AAAAAAAAAAAAAAAAAAAAACHguwAAAAAAaSlT0G31NDEyg%2BSnBN5JuyKjMCU%3Dlhg0gv0nE7KKyiJNEAojQbn8Y3wJm1xidDK7VnKGBP4ByJwHPb" style="display:none"></div> <div id="twAuthenticationFlag" data-value="guest" style="display:none"></div> <div id="twGeoLocationRegion" data-value="other" style="display:none"></div> <div class="u01-meganav__page-padding"></div> <div class="u01-meganav js-twtr-nav twtr-color-bg--white-neutral is-fixed"> <div class="twtr-container--wide"> <div class="twtr-grid"> <div class="twtr-col-12"> <div class="u01-meganav__container" data-bg-color="white-neutral" data-home-path="/content/developer-twitter/en" data-icon-close="<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" aria-hidden="true" focusable="false" role="none" class="twtr-icon--md"> <g> <g> <defs> <rect id="SVGID_1_" x="-468" y="-1360" width="1440" height="3027" /> </defs> <clippath id="SVGID_2_"> <use xlink:href="#SVGID_1_" style="overflow:visible;" /> </clippath> </g> </g> <rect x="-468" y="-1360" class="st0" width="1440" height="3027" style="fill:rgb(0,0,0,0);stroke-width:3;stroke:rgb(0,0,0)" /> <path d="M13.4,12l5.8-5.8c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L12,10.6L6.2,4.8c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4 l5.8,5.8l-5.8,5.8c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l5.8-5.8l5.8,5.8c0.2,0.2,0.5,0.3,0.7,0.3 s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L13.4,12z" /> </svg>" data-icon-chevron-right="<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false" role="none" class="twtr-icon"> <path opacity="0" d="M0 0h24v24H0z" /> <path d="M17.207 11.293l-7.5-7.5c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414L15.086 12l-6.793 6.793c-.39.39-.39 1.023 0 1.414.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg>" data-icon-chevron-down="<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false" role="none" class="twtr-icon"> <path opacity="0" d="M0 0h24v24H0z" /> <path d="M20.207 7.043c-.39-.39-1.023-.39-1.414 0L12 13.836 5.207 7.043c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg>" data-icon-arrow-left="<svg width="28px" height="28px" viewbox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="none" class="twtr-icon u01-meganav__icon-arrow-left"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"> <g transform="translate(-1216.000000, -298.000000)" stroke-width="2.25"> <g transform="translate(1200.000000, 282.000000)"> <g transform="translate(17.000000, 17.000000)"> <path d="M0.756410256,12.8589744 L25.7179487,12.8589744"></path> <path d="M13.2371795,25.3397436 L25.7179487,12.8589744"></path> <path d="M13.2371795,12.4807692 L25.3397436,0.378205128" transform="translate(19.288462, 6.429487) rotate(-90.000000) translate(-19.288462, -6.429487) "></path> </g> </g> </g> </g> </svg>" data-left-nav-items="[{"isActive":false,"hasActiveChild":false,"children":[{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"X API","linkDisabled":false,"title":"X API","path":"https://developer.x.com/en/products/twitter-api"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"X Ads API","linkDisabled":false,"title":"X Ads API","path":"https://developer.x.com/en/products/x-ads-api"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"X for websites","linkDisabled":false,"title":"X for websites","path":"https://developer.x.com/en/products/x-for-websites"}],"overviewTitle":"Products","linkDisabled":true,"title":"Products","path":"https://developer.x.com/en/products"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Docs","linkDisabled":false,"title":"Docs","path":"https://docs.x.com/"},{"isActive":false,"hasActiveChild":false,"children":[{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Build for business","linkDisabled":false,"title":"Build for business","path":"https://developer.x.com/en/use-cases/build-for-businesses"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Build for the public","linkDisabled":false,"title":"Build for the public","path":"https://developer.x.com/en/use-cases/build-for-consumers"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Do research","linkDisabled":false,"title":"Do research","path":"https://developer.x.com/en/use-cases/do-research"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Teach \u0026 learn","linkDisabled":false,"title":"Teach \u0026 learn","path":"https://developer.x.com/en/use-cases/teach-and-learn"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Build for good","linkDisabled":false,"title":"Build for good","path":"https://developer.x.com/en/use-cases/build-for-good"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Build for fun","linkDisabled":false,"title":"Build for fun","path":"https://developer.x.com/en/use-cases/build-for-fun"}],"overviewTitle":"Use Cases","linkDisabled":true,"title":"Use Cases","path":"https://developer.x.com/en/navigation/left-nav-items/use-cases"},{"isActive":false,"hasActiveChild":false,"children":[{"isActive":false,"hasActiveChild":false,"children":[{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Changelog","linkDisabled":false,"title":"Changelog","path":"https://docs.x.com/updates/changelog"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Blog","linkDisabled":false,"title":"Blog","path":"https://developer.x.com/en/blog"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Newsletter","linkDisabled":false,"title":"Newsletter","path":"https://developer.x.com/en/updates/stay-informed"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"YouTube","linkDisabled":false,"title":"YouTube","path":"https://www.youtube.com/c/twitterdev"}],"linkDisabled":true,"title":"Stay informed","path":"https://developer.x.com/"},{"isActive":false,"hasActiveChild":false,"children":[{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Forums","linkDisabled":false,"title":"Forums","path":"https://twittercommunity.com/"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Events","linkDisabled":false,"title":"Events","path":"https://twitterdev.bevylabs.com/"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Insiders","linkDisabled":false,"title":"Insiders","path":"https://developer.twitter.com/en/community/insiders"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Community leaders","linkDisabled":false,"title":"Community leaders","path":"https://developer.x.com/en/community/leaders"}],"linkDisabled":true,"title":"Connect","path":"https://developer.x.com/"}],"overviewTitle":"Community","linkDisabled":false,"menuType":"multiCategory","title":"Community","path":"https://developer.x.com/en/community"}]" data-right-nav-items="[{"isActive":false,"hasActiveChild":false,"children":[{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Policies","linkDisabled":false,"title":"Policies","path":"https://developer.x.com/en/developer-terms"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Developer agreement","linkDisabled":false,"title":"Developer agreement","path":"https://developer.x.com/en/developer-terms/agreement-and-policy/source"}],"overviewTitle":"Support","linkDisabled":false,"title":"Support","path":"https://developer.x.com/en/support"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Developer Portal","linkDisabled":false,"title":"Developer Portal","path":"https://developer.twitter.com/en/portal/petition/essential/basic-info"}]" data-cta-enabled="true" data-profile-enabled="true" data-cta-link-new-tab="false" data-root-page-title="Developer Platform"> </div> <div aria-label="Search" class="u01-meganav__search-modal twtr-color-bg--blue-dark" role="dialog" aria-modal="true"> <button aria-label="Close search menu" class="u04-search__close-button js-close-search" type="button"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" aria-hidden="true" focusable="false" role="none" class="u04-search__close-svg twtr-icon"> <g> <g> <defs> <rect id="SVGID_1_" x="-468" y="-1360" width="1440" height="3027" /> </defs> <clippath id="SVGID_2_"> <use xlink:href="#SVGID_1_" style="overflow:visible;" /> </clippath> </g> </g> <rect x="-468" y="-1360" class="st0" width="1440" height="3027" style="fill:rgb(0,0,0,0);stroke-width:3;stroke:rgb(0,0,0)" /> <path d="M13.4,12l5.8-5.8c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L12,10.6L6.2,4.8c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4 l5.8,5.8l-5.8,5.8c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l5.8-5.8l5.8,5.8c0.2,0.2,0.5,0.3,0.7,0.3 s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L13.4,12z" /> </svg> </button> <div class="search-bar search-bar--js" data-theme="blue" data-search-path="https://developer.x.com/en/search-results.html"> <input placeholder="Type your search here" type="search" autocomplete="off" class="search-bar__input" name="q"/> <button id="u04-search__button" class="u04-search__button" aria-label="Search"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false" role="none" class="u04-search__button-icon twtr-icon--mega twtr-color-fill--white-neutral"> <path opacity="0" d="M0 0h24v24H0z" /> <path d="M22.06 19.94l-3.73-3.73C19.38 14.737 20 12.942 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c1.943 0 3.738-.622 5.21-1.67l3.73 3.73c.292.294.676.44 1.06.44s.768-.146 1.06-.44c.586-.585.586-1.535 0-2.12zM11 17c-3.308 0-6-2.692-6-6s2.692-6 6-6 6 2.692 6 6-2.692 6-6 6z" /> </svg> </button> </div> </div> </div> </div> </div> </div> <main class="twtr-color-bg--white-neutral" id="twtr-main"> <div class="page-wrapper documentation-page twtr-color-bg--white-neutral"> <div class="u07 is-hidden" aria-hidden="true"> <div class="u07__item u07__bg-color--neutral"> <div class="u07__item-content"> <div class="u07__notification twtr-type--bold-200 chirp--bold-200 twtr-color--gray-900"> </div> <div class="u07__close"> <button type="button" class="u07__close-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="72" viewbox="0 0 46 72" aria-hidden="true" focusable="false" role="none" class="twtr-icon"> <path d="M27.243 36l14.879-14.879a2.998 2.998 0 0 0 0-4.242 2.998 2.998 0 0 0-4.242 0L23 31.758 8.122 16.879a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242L18.758 36 3.879 50.879A2.998 2.998 0 0 0 6.001 56a2.99 2.99 0 0 0 2.121-.879L23 40.242l14.879 14.879A2.991 2.991 0 0 0 40 56a2.998 2.998 0 0 0 2.121-5.121L27.243 36z" /> </svg> </button> </div> </div> </div> </div> <div class="page-content twtr-container-wide left-rail-container"> <div class="sidebar-content docs-side-nav"> <div class="sidebar-content__wrapper"> <span class="docs-side-nav__close"> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="72" viewBox="0 0 46 72" aria-hidden="true" focusable="false"> <path d="M27.243 36l14.879-14.879a2.998 2.998 0 0 0 0-4.242 2.998 2.998 0 0 0-4.242 0L23 31.758 8.122 16.879a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242L18.758 36 3.879 50.879A2.998 2.998 0 0 0 6.001 56a2.99 2.99 0 0 0 2.121-.879L23 40.242l14.879 14.879A2.991 2.991 0 0 0 40 56a2.998 2.998 0 0 0 2.121-5.121L27.243 36z"> </path> </svg> </span> <div class="d08-navigation-sidebar" data-sidenav-json="{"navigationTitle":"Documentation","rootPageUrl":"/content/developer-twitter/en/docs.html","navigationGroups":[{"groupName":"","navItems":[{"title":"Getting started","url":"/content/developer-twitter/en/docs/platform-overview"},{"childNavItems":[{"title":"Developer Apps","url":"/content/developer-twitter/en/docs/apps"},{"title":"Projects","url":"/content/developer-twitter/en/docs/projects"},{"title":"Developer portal","url":"/content/developer-twitter/en/docs/developer-portal"},{"title":"Authentication","url":"/content/developer-twitter/en/docs/authentication"},{"title":"Counting characters","url":"/content/developer-twitter/en/docs/counting-characters"},{"title":"Rate limits","url":"/content/developer-twitter/en/docs/rate-limits"},{"title":"X IDs","url":"/content/developer-twitter/en/docs/x-ids"},{"title":"Security","url":"/content/developer-twitter/en/docs/security"}],"title":"Fundamentals","url":"#"},{"title":"Tools and libraries","url":"/content/developer-twitter/en/docs/tools-and-libraries"},{"title":"Tutorials","url":"/content/developer-twitter/en/docs/tutorials"},{"title":"API reference index","url":"/content/developer-twitter/en/docs/api-reference-index"}],"groupUrl":"#"},{"groupName":"X API","navItems":[{"childNavItems":[{"title":"About the X API","url":"/content/developer-twitter/en/docs/x-api/getting-started/about-x-api"},{"title":"Getting access","url":"/content/developer-twitter/en/docs/x-api/getting-started/getting-access-to-the-x-api"},{"title":"Make your first request","url":"/content/developer-twitter/en/docs/x-api/getting-started/make-your-first-request"},{"title":"Important resources","url":"/content/developer-twitter/en/docs/x-api/getting-started/important-resources"}],"title":"Getting started","url":"#"},{"childNavItems":[{"title":"SDKs","url":"/content/developer-twitter/en/docs/x-api/tools-and-libraries/sdks"}],"title":"Tools and libraries","url":"/content/developer-twitter/en/docs/x-api/tools-and-libraries"},{"title":"What to build","url":"/content/developer-twitter/en/docs/x-api/what-to-build"},{"childNavItems":[{"title":"Overview","url":"/content/developer-twitter/en/docs/x-api/migrate/overview"},{"title":"Data format migration","url":"/content/developer-twitter/en/docs/x-api/migrate/data-formats"},{"title":"X API endpoint map","url":"/content/developer-twitter/en/docs/x-api/migrate/x-api-endpoint-map"}],"title":"Migrate","url":"/content/developer-twitter/en/docs/x-api/migrate"},{"childNavItems":[{"grandChildNavItems":[{"title":"Data dictionary","url":"/content/developer-twitter/en/docs/x-api/data-dictionary"},{"title":"Fields","url":"/content/developer-twitter/en/docs/x-api/fields"},{"title":"Expansions","url":"/content/developer-twitter/en/docs/x-api/expansions"},{"title":"Tweet annotations","url":"/content/developer-twitter/en/docs/x-api/annotations"},{"title":"Metrics","url":"/content/developer-twitter/en/docs/x-api/metrics"},{"title":"Conversation ID","url":"/content/developer-twitter/en/docs/x-api/conversation-id"},{"title":"Pagination","url":"/content/developer-twitter/en/docs/x-api/pagination"},{"title":"Versioning","url":"/content/developer-twitter/en/docs/x-api/versioning"},{"title":"Consistency","url":"/content/developer-twitter/en/docs/x-api/consistency"},{"title":"Rate limits","url":"/content/developer-twitter/en/docs/x-api/rate-limits"},{"title":"Tweet cap","url":"/content/developer-twitter/en/docs/x-api/tweet-caps"},{"title":"Edit Tweets","url":"/content/developer-twitter/en/docs/x-api/edit-tweets"}],"title":"Fundamentals","url":"#"},{"grandChildNavItems":[{"title":"Tweets lookup","url":"/content/developer-twitter/en/docs/x-api/tweets/lookup"},{"title":"Manage Tweets","url":"/content/developer-twitter/en/docs/x-api/tweets/manage-tweets"},{"title":"Timelines","url":"/content/developer-twitter/en/docs/x-api/tweets/timelines"},{"title":"Search Tweets","url":"/content/developer-twitter/en/docs/x-api/tweets/search"},{"title":"Tweet counts","url":"/content/developer-twitter/en/docs/x-api/tweets/counts"},{"title":"Filtered stream","url":"/content/developer-twitter/en/docs/x-api/tweets/filtered-stream"},{"title":"Volume streams","url":"/content/developer-twitter/en/docs/x-api/tweets/volume-streams"},{"title":"Retweets","url":"/content/developer-twitter/en/docs/x-api/tweets/retweets"},{"title":"Quote Tweets","url":"/content/developer-twitter/en/docs/x-api/tweets/quote-tweets"},{"title":"Likes","url":"/content/developer-twitter/en/docs/x-api/tweets/likes"},{"title":"Bookmarks","url":"/content/developer-twitter/en/docs/x-api/tweets/bookmarks"},{"title":"Hide replies","url":"/content/developer-twitter/en/docs/x-api/tweets/hide-replies"}],"title":"Tweets","url":"#"},{"grandChildNavItems":[{"title":"Users lookup","url":"/content/developer-twitter/en/docs/x-api/users/lookup"},{"title":"Follows","url":"/content/developer-twitter/en/docs/x-api/users/follows"},{"title":"Blocks","url":"/content/developer-twitter/en/docs/x-api/users/blocks"},{"title":"Mutes","url":"/content/developer-twitter/en/docs/x-api/users/mutes"},{"title":"Search","url":"/content/developer-twitter/en/docs/x-api/users/search"},{"title":"Personalized Trends","url":"/content/developer-twitter/en/docs/x-api/users/personalized-trends"}],"title":"Users","url":"#"},{"grandChildNavItems":[{"title":"Tweets","url":"/content/developer-twitter/en/docs/x-api/usage/tweets"}],"title":"Usage","url":"#"},{"title":"Trends","url":"/content/developer-twitter/en/docs/x-api/trends"},{"grandChildNavItems":[{"title":"Overview","url":"/content/developer-twitter/en/docs/x-api/spaces/overview"},{"title":"Spaces lookup","url":"/content/developer-twitter/en/docs/x-api/spaces/lookup"},{"title":"Search Spaces","url":"/content/developer-twitter/en/docs/x-api/spaces/search"}],"title":"Spaces","url":"#"},{"grandChildNavItems":[{"title":"Direct Messages lookup","url":"/content/developer-twitter/en/docs/x-api/direct-messages/lookup"},{"title":"Manage Direct Messages","url":"/content/developer-twitter/en/docs/x-api/direct-messages/manage"},{"title":"Direct Message blocks","url":"/content/developer-twitter/en/docs/x-api/direct-messages/blocks"}],"title":"Direct Messages","url":"#"},{"grandChildNavItems":[{"title":"Lists lookup","url":"/content/developer-twitter/en/docs/x-api/lists/list-lookup"},{"title":"Manage lists","url":"/content/developer-twitter/en/docs/x-api/lists/manage-lists"},{"title":"List Tweets lookup","url":"/content/developer-twitter/en/docs/x-api/lists/list-tweets"},{"title":"List members","url":"/content/developer-twitter/en/docs/x-api/lists/list-members"},{"title":"Pinned Lists","url":"/content/developer-twitter/en/docs/x-api/lists/pinned-lists"}],"title":"Lists","url":"#"},{"grandChildNavItems":[{"title":"Communities lookup","url":"/content/developer-twitter/en/docs/x-api/communities/lookup"},{"title":"Search Communities","url":"/content/developer-twitter/en/docs/x-api/communities/search"}],"title":"Communities","url":"#"},{"grandChildNavItems":[{"title":"Batch compliance","url":"/content/developer-twitter/en/docs/x-api/compliance/batch-compliance/"},{"title":"Compliance streams","url":"/content/developer-twitter/en/docs/x-api/compliance/streams/"}],"title":"Compliance","url":"#"}],"title":"X API v2","url":""},{"childNavItems":[{"grandChildNavItems":[{"title":"Gnip Console","url":"/content/developer-twitter/en/docs/x-api/enterprise/console"},{"title":"Data dictionary","url":"/content/developer-twitter/en/docs/x-api/enterprise/data-dictionary"},{"title":"Data enrichments","url":"/content/developer-twitter/en/docs/x-api/enterprise/enrichments"},{"title":"Rules and filtering","url":"/content/developer-twitter/en/docs/x-api/enterprise/rules-and-filtering"},{"title":"Rate limits","url":"/content/developer-twitter/en/docs/x-api/enterprise/rate-limits"},{"title":"Edit Tweets","url":"/content/developer-twitter/en/docs/x-api/enterprise/edit-tweets"}],"title":"Fundamentals","url":"#"},{"title":"PowerTrack API","url":"/content/developer-twitter/en/docs/x-api/enterprise/powertrack-api"},{"title":"Decahose API","url":"/content/developer-twitter/en/docs/x-api/enterprise/decahose-api"},{"title":"Account Activity API","url":"/content/developer-twitter/en/docs/x-api/enterprise/account-activity-api"},{"title":"Search API","url":"/content/developer-twitter/en/docs/x-api/enterprise/search-api"},{"title":"Engagement API","url":"/content/developer-twitter/en/docs/x-api/enterprise/engagement-api"},{"title":"Compliance Firehose API","url":"/content/developer-twitter/en/docs/x-api/enterprise/compliance-firehose-api"},{"title":"Usage API","url":"/content/developer-twitter/en/docs/x-api/enterprise/usage-api"}],"calloutLabel":"Gnip 2.0","title":"Enterprise - Gnip 2.0","url":"/content/developer-twitter/en/docs/x-api/enterprise"}],"groupUrl":"/content/developer-twitter/en/docs/x-api"},{"groupName":"X Ads API","navItems":[{"childNavItems":[{"title":"Step by step guide","url":"/content/developer-twitter/en/docs/x-ads-api/getting-started"},{"title":"Increasing access","url":"/content/developer-twitter/en/docs/x-ads-api/increasing-access"},{"title":"Subscribe for updates","url":"/content/developer-twitter/en/docs/x-ads-api/newsletter"}],"title":"Getting started","url":""},{"childNavItems":[{"title":"Hierarchy and terminology","url":"/content/developer-twitter/en/docs/x-ads-api/hierarchy-terminology"},{"title":"Accessing Ads accounts","url":"/content/developer-twitter/en/docs/x-ads-api/obtaining-ads-account-access"},{"title":"Making authenticated requests","url":"/content/developer-twitter/en/docs/x-ads-api/making-authenticated-requests"},{"title":"Error codes and responses","url":"/content/developer-twitter/en/docs/x-ads-api/response-codes"},{"title":"Rate limiting","url":"/content/developer-twitter/en/docs/x-ads-api/rate-limiting"},{"title":"Pagination","url":"/content/developer-twitter/en/docs/x-ads-api/pagination"},{"title":"Sorting","url":"/content/developer-twitter/en/docs/x-ads-api/sorting"},{"title":"Versioning","url":"/content/developer-twitter/en/docs/x-ads-api/versioning"},{"title":"Timezones","url":"/content/developer-twitter/en/docs/x-ads-api/timezones"},{"title":"Currency","url":"/content/developer-twitter/en/docs/x-ads-api/currency"},{"title":"Sandbox","url":"/content/developer-twitter/en/docs/x-ads-api/ads-api-sandbox"}],"title":"Fundamentals","url":""},{"childNavItems":[],"title":"Tools and libraries","url":"/content/developer-twitter/en/docs/x-ads-api/tools-and-libraries"},{"childNavItems":[],"title":"Analytics","url":"/content/developer-twitter/en/docs/x-ads-api/analytics"},{"childNavItems":[],"title":"Audiences","url":"/content/developer-twitter/en/docs/x-ads-api/audiences"},{"childNavItems":[],"title":"Campaign management","url":"/content/developer-twitter/en/docs/x-ads-api/campaign-management"},{"childNavItems":[],"title":"Catalog management","url":"/content/developer-twitter/en/docs/x-ads-api/catalog-management"},{"childNavItems":[],"title":"Creatives","url":"/content/developer-twitter/en/docs/x-ads-api/creatives"},{"childNavItems":[{"title":"Mobile Conversions","url":"/content/developer-twitter/en/docs/x-ads-api/measurement/mobile-conversions/overview"},{"title":"Web Conversions","url":"/content/developer-twitter/en/docs/x-ads-api/measurement/web-conversions/overview"},{"title":"AB testing","url":"/content/developer-twitter/en/docs/x-ads-api/measurement/ab-testing/overview"}],"title":"Measurement","url":""}],"groupUrl":"/content/developer-twitter/en/docs/x-ads-api"},{"groupName":"X for Websites","navItems":[{"childNavItems":[{"title":"Webpage properties","url":"/content/developer-twitter/en/docs/x-for-websites/webpage-properties"},{"title":"Javascript API","url":"/content/developer-twitter/en/docs/x-for-websites/javascript-api"},{"title":"Supported languages and browsers","url":"/content/developer-twitter/en/docs/x-for-websites/supported-languages"},{"title":"Privacy","url":"/content/developer-twitter/en/docs/x-for-websites/privacy"}],"title":"Fundamentals","url":""},{"childNavItems":[],"title":"Tools and libraries","url":"/content/developer-twitter/en/docs/x-for-websites/tools-and-libraries"},{"childNavItems":[],"title":"Embedded Tweets","url":"/content/developer-twitter/en/docs/x-for-websites/embedded-tweets"},{"childNavItems":[],"title":"Embedded timelines","url":"/content/developer-twitter/en/docs/x-for-websites/timelines"},{"childNavItems":[{"title":"Tweets","url":"/content/developer-twitter/en/docs/x-for-websites/tweet-button"},{"title":"Follow","url":"/content/developer-twitter/en/docs/x-for-websites/follow-button"},{"title":"Direct Message","url":"/content/developer-twitter/en/docs/x-for-websites/direct-message-button"}],"title":"Embedded buttons","url":""},{"childNavItems":[],"title":"Web intents","url":"/content/developer-twitter/en/docs/x-for-websites/web-intents"},{"childNavItems":[],"title":"oEmbed API","url":"/content/developer-twitter/en/docs/x-for-websites/oembed-api"},{"childNavItems":[],"title":"Log in with X","url":"/content/developer-twitter/en/docs/x-for-websites/log-in-with-twitter"},{"childNavItems":[],"title":"Optimize Tweets with X Cards","url":"/content/developer-twitter/en/docs/x-for-websites/cards"},{"childNavItems":[],"title":"Publish faster articles with AMP","url":"/content/developer-twitter/en/docs/x-for-websites/amp"},{"childNavItems":[],"title":"Integrate X with your CMS","url":"/content/developer-twitter/en/docs/x-for-websites/cms"}],"groupUrl":"/content/developer-twitter/en/docs/x-for-websites"}]}" data-search-path="https://developer.x.com/en/search-results.html" data-side-nav-v2="true"> </div> </div> </div> <div class="main-content twtr-col-lg-6"> <div class="main-content__wrapper"> <div class="dtc-docs__header main-content__header"> <span id="dtc-docs__header-title" class="dtc-docs__header-title chirp--bold-700 twtr-color--gray-900">Getting started with Cards</span> </div> <div class="bl19-no-edit-wrap"> <div class="c15-column-container js-column-container"> <div class="container--mini container--mobile"> <div class="column column-3"></div> <div class="column column-6"> <div class="c01-rich-text-editor"> <div class="is-table-default"> <h2>Getting Started Guide</h2> <ol> <li><a class="reference external" href="#started">Getting Started with Cards</a></li> <li><a class="reference external" href="#attribution">Card and Content Attribution</a></li> <li><a class="reference external" href="#crawling">URL Crawling & Caching</a></li> <li><a class="reference external" href="#display">Card Display</a></li> <li><a class="reference external" href="#multiple">Multiple URLs in a Tweet</a></li> <li><a class="reference external" href="#opengraph">Twitter Cards and Open Graph</a></li> </ol> <p> </p> <h3>Getting Started with Cards<a class="headerlink" href="#getting-started-with-cards" title="Permalink to this headline"></a></h3> <p>To get started with implementing Cards markup, specify the type of card for your content by adding the following HTML markup to the HEAD section of the page:</p> <pre> <meta name="twitter:card" content="summary"></meta> </pre> <p>Card properties are simple key-value pairs, each defined in an HTML meta tag as seen above. The combined collection of properties defines the overall card experience on Twitter, and each card type supports and requires a specific set of properties.</p> <p>All cards have one basic property in common - the card type value:</p> <table border="1" class="docutils"> <colgroup><col width="12%" /><col width="76%" /></colgroup><tbody valign="top"><tr class="row-odd"><td>Card Property</td> <td>Description</td> </tr><tr class="row-even"><td><code>twitter:card</code></td> <td>The card type, which will be one of “summary”, “summary_large_image”, “app”, or “player”.</td> </tr></tbody></table> <p>Only one card type per-page is supported. If more than one <code>twitter:card</code> value exists in the page, the “last” one in sequence will take priority.</p> <p> </p> <h3>Card and Content Attribution<a class="headerlink" href="#card-and-content-attribution" title="Permalink to this headline"></a></h3> <p>Each card has built-in content attribution, which surfaces appropriate Twitter accounts for the content as specified by you. Users will be able to follow and view the profiles of attributed accounts directly from the card. There are two kinds of attribution:</p> <p><b>Website Attribution</b>: Indicates the Twitter account for the website or platform on which the content was published. Note that a service may set separate Twitter accounts for different pages/sections of their website, and the most appropriate Twitter account should be used to provide the best context for the user. For example, nytimes.com may set the the website attribution to “<a class="reference external" href="https://twitter.com/nytimes">@nytimes</a>” for front page articles, and “<a class="reference external" href="https://twitter.com/NYTArts">@NYTArts</a>” for articles in the Arts & Entertainment section.</p> <p><b>Creator Attribution</b>: Indicates the individual user that created the content within the card. This applies to the Summary with Large Image card.</p> <p>Configure card attribution using the following properties:</p> <table border="1" class="docutils"> <colgroup><col width="12%" /><col width="76%" /><col width="12%" /></colgroup><tbody valign="top"><tr class="row-odd"><td>Card Property</td> <td>Description</td> <td>Required</td> </tr><tr class="row-even"><td><code>twitter:site</code></td> <td>@username for the website used in the card footer.</td> <td>No</td> </tr><tr class="row-odd"><td><code>twitter:creator</code></td> <td>@username for the content creator / author.</td> <td>No</td> </tr></tbody></table> <p> </p> <h3>URL Crawling & Caching<a class="headerlink" href="#url-crawling-caching" title="Permalink to this headline"></a></h3> <p>Twitter’s crawler respects Google’s <a class="reference external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_txt">robots.txt specification</a> when scanning URLs. If a page with card markup is blocked, no card will be shown. If an image URL is blocked, no thumbnail or photo will be shown.</p> <p>Twitter uses the User-Agent of <b>Twitterbot</b> (with version, such as Twitterbot/1.0), which can be used to create an exception in the <code>robots.txt</code> file.</p> <p>For example, here is a <code>robots.txt</code> which disallows crawling for all robots, except Twitter’s fetcher:</p> <pre> User-agent: Twitterbot Disallow: User-agent: * Disallow: / </pre> <p>Here is another example, which specifies which directories are allowed to be crawled by Twitterbot (in this case, disallowing all except the images and archives directories):</p> <pre> User-agent: Twitterbot Disallow: * Allow: /images Allow: /archives </pre> <p>The server’s <code>robots.txt</code> file <b>must</b> be saved as plain text with ASCII character encoding. To verify this, run the following command:</p> <pre> $ file -I robots.txt robots.txt: text/plain; charset=us-ascii </pre> <p>Content is cached by Twitter for 7 days after a link to a page with card markup has been published in a Tweet.</p> <p>If you encounter issues with cards in Tweets not appearing properly, see the <a class="reference external" href="/cards/troubleshooting">Cards Troubleshooting Guide</a>.</p> <p> </p> <h3>Card Display<a class="headerlink" href="#card-display" title="Permalink to this headline"></a></h3> <p>Twitter Cards generated from meta tags only appear when a Tweet is either expanded in the timeline (on web) or viewed on the Tweet’s individual permalink page (by clicking on the date from the timeline, either on web or on mobile).</p> <p>In limited circumstances, Cards may appear in the timeline, such as in images posted to Twitter, Ad formats, and Twitter-run experiments.</p> <p>If you are looking to bring media (photos, videos and Cards) into the timeline, consider one of the following options:</p> <ul class="simple"> <li>Accounts can <a class="reference external" href="http://blog.twitter.com/2014/your-new-web-profile-is-here">pin a Tweet to the top of their timeline</a>, which auto-expands the Tweet and displays the Card. (This is possible on web only.).</li> <li>For photos and animated GIFs, upload the media directly with the Tweet or consider using the Twitter API to <a class="reference external" href="/rest/public/uploading-media-multiple-photos">upload media</a>.</li> <li>For Ad formats with a call-to-action, visit <a class="reference external" href="http://ads.twitter.com">Twitter Ads</a> for Website Cards.</li> </ul> <p> </p> <h3>Multiple URLs in a Tweet<a class="headerlink" href="#multiple-urls-in-a-tweet" title="Permalink to this headline"></a></h3> <p>In some circumstances, users may want to Tweet multiple URLs. Only one card may be shown in a Tweet. Here is the order of precedence when processing multiple URLs:</p> <ol> <li>Images or media attached to Tweets will have precedence over any card attached to a URL.</li> <li>URLs with cards are processed in order of appearance in the Tweet, first to last</li> </ol> <p> </p> <h3>Twitter Cards and Open Graph<a class="headerlink" href="#twitter-cards-and-open-graph" title="Permalink to this headline"></a></h3> <p>Twitter card tags look similar to Open Graph tags, and are based on the same conventions as the Open Graph protocol. When using Open Graph protocol to describe data on a page, it is easy to generate a Twitter card without duplicating tags and data. When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience.</p> <p>Note that while Open Graph recommends specifying the “og” RDFa Core 1.1 CURIE prefix mapping via <code><html prefix="og: http://ogp.me/ns#"></code>, no such markup is required for Twitter cards and its use of the <code>twitter:</code> prefix in a HTML meta element’s name attribute. Open Graph protocol also specifies the use of <code>property</code> and <code>content</code> attributes for markup (<code><meta property="og:image" content="http://example.com/ogp.jpg"/></code>) while Twitter cards use <code>name</code> and <code>content</code>. Twitter’s parser will fall back to using <code>property</code> and <code>content</code>, so there is no need to modify existing Open Graph protocol markup if it already exists.</p> <p>The example below uses a mix of Twitter and Open Graph tags to define a summary card:</p> <pre> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@nytimesbits" /> <meta name="twitter:creator" content="@nickbilton" /> <meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" /> <meta property="og:title" content="A Twitter for My Sister" /> <meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." /> <meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" /> </pre> </div> </div> </div> <div class="column column-3 last"></div> </div> </div> </div> <div id="twtr-article-embedded-survey" class="b32"></div> </div> </div> <div class="sidebar-content docs-right-side-nav twtr-col-lg-3"> <div class="dtc05-navigation-right" data-tab-title="Cards" data-header-title="Cards" data-tab-root-page="/content/developer-twitter/en/docs/x-for-websites/cards" data-sidenav-json="[{"isActive":false,"hasActiveChild":false,"children":[{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"About Twitter Cards","linkDisabled":false,"title":"About Twitter Cards","path":"https://developer.x.com/en/docs/x-for-websites/cards/overview/abouts-cards"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Summary Card","linkDisabled":false,"title":"Summary Card","path":"https://developer.x.com/en/docs/x-for-websites/cards/overview/summary"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Summary with large image","linkDisabled":false,"title":"Summary with large image","path":"https://developer.x.com/en/docs/x-for-websites/cards/overview/summary-card-with-large-image"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Player Card","linkDisabled":false,"title":"Player Card","path":"https://developer.x.com/en/docs/x-for-websites/cards/overview/player-card"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"App Card","linkDisabled":false,"title":"App Card","path":"https://developer.x.com/en/docs/x-for-websites/cards/overview/app-card"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Cards markup","linkDisabled":false,"title":"Cards markup","path":"https://developer.x.com/en/docs/x-for-websites/cards/overview/markup"}],"overviewTitle":"Overview","linkDisabled":false,"title":"Overview","path":"https://developer.x.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards.html"},{"isActive":false,"hasActiveChild":true,"children":[{"isActive":true,"hasActiveChild":false,"children":[],"overviewTitle":"Getting started with Cards","linkDisabled":false,"title":"Getting started with Cards","path":"https://developer.x.com/en/docs/x-for-websites/cards/guides/getting-started"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"CMS integration","linkDisabled":false,"title":"CMS integration","path":"https://developer.x.com/en/docs/x-for-websites/cards/guides/cms-integration"},{"isActive":false,"hasActiveChild":false,"children":[],"overviewTitle":"Troubleshooting Cards","linkDisabled":false,"title":"Troubleshooting Cards","path":"https://developer.x.com/en/docs/x-for-websites/cards/guides/troubleshooting-cards"}],"overviewTitle":"Guides","linkDisabled":false,"title":"Guides","path":"https://developer.x.com/en/docs/twitter-for-websites/cards/guides/getting-started.html"}]" data-icon-chevron-down="<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false" role="none" class="twtr-icon"> <path opacity="0" d="M0 0h24v24H0z" /> <path d="M20.207 7.043c-.39-.39-1.023-.39-1.414 0L12 13.836 5.207 7.043c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg>"> </div> </div> </div> </div> </main> <div> <footer class="u02fs twtr-background--blue-extra-light twtr-background--gray-0"> <div class="twtr-container"> <div class="twtr-grid"> <div class="u02fs__footer-link-col twtr-col-12 twtr-col-md-4"> <a href="https://developer.x.com/en/more/developer-terms/agreement-and-policy" title="Developer policy and terms" target="_blank" class="u02fs__footer-link twtr-type--roman-50 twtr-color--gray-900"> Developer policy and terms </a> </div> <div class="u02fs__footer-link-col twtr-col-12 twtr-col-md-4"> <a href="http://x.com/xdevelopers" title="Follow @XDevelopers" target="_blank" class="u02fs__footer-link twtr-type--roman-50 twtr-color--gray-900"> Follow @XDevelopers </a> </div> <div class="u02fs__footer-link-col twtr-col-12 twtr-col-md-4 u02fs__subscribe-button-col"> <a class="b03__button twtr-btn twtr-btn--secondary twtr-btn--size-default twtr-btn-color--secondary-blue u02fs__button twtr-btn__icon-- twtr-scribe-clicks" href="/en/twitterdev-news-subscription" rel="noopener noreferrer" target="_blank" data-twtr-scribe-section="b03-button" data-twtr-scribe-element="6Q82" data-twtr-scribe-component="subscribe-to-developer-news" data-text="Subscribe to developer news"> <!--/* Button text --> Subscribe to developer news </a> </div> </div> </div> </footer> </div> <div> <footer class="u02 twtr-color-bg--black-neutral"> <div class="twtr-container"> <div class="u02__wrapper"> <div class="u02__row u02__network-map"> <div class="twtr-grid u02__twtr-grid"> <div class="js-accordion u02__column"> <h4 class="u02__column__parent twtr-type--bold-14 twtr-color--gray-0 is-opaque"> X platform <span class="u02__icon twtr-dtc-fill--extra-light-gray twtr-hidden--md twtr-hidden--lg twtr-hidden--xl"> <svg xmlns="http://www.w3.org/2000/svg" width="17" height="9.5" viewbox="0 0 17 9.5" aria-hidden="true" focusable="false" role="none" class="twtr-icon--sm"> <path d="M16.707.293c-.39-.39-1.023-.39-1.414 0L8.5 7.086 1.707.293c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg> </span> </h4> <ul class="u02__column__list"> <li class="u02__link-item"> <a href="https://x.com/" title="X.com" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> X.com </a> </li> <li class="u02__link-item"> <a href="https://docs.x.com/status/status" title="Status" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Status </a> </li> <li class="u02__link-item"> <a href="https://help.x.com/resources/accessibility" title="Accessibility" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Accessibility </a> </li> <li class="u02__link-item"> <a href="https://publish.x.com" title="Embed a post" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Embed a post </a> </li> <li class="u02__link-item"> <a href="https://privacy.x.com/" title="Privacy Center" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Privacy Center </a> </li> <li class="u02__link-item"> <a href="https://transparency.x.com/" title="Transparency Center" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Transparency Center </a> </li> <li class="u02__link-item"> <a href="https://help.x.com/using-x/download-the-x-app" title="Download the X app" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Download the X app </a> </li> <li class="u02__link-item"> <a href="https://grok.com" title="Try Grok.com" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Try Grok.com </a> </li> </ul> </div> <div class="js-accordion u02__column"> <h4 class="u02__column__parent twtr-type--bold-14 twtr-color--gray-0 is-opaque"> X Corp. <span class="u02__icon twtr-dtc-fill--extra-light-gray twtr-hidden--md twtr-hidden--lg twtr-hidden--xl"> <svg xmlns="http://www.w3.org/2000/svg" width="17" height="9.5" viewbox="0 0 17 9.5" aria-hidden="true" focusable="false" role="none" class="twtr-icon--sm"> <path d="M16.707.293c-.39-.39-1.023-.39-1.414 0L8.5 7.086 1.707.293c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg> </span> </h4> <ul class="u02__column__list"> <li class="u02__link-item"> <a href="https://about.x.com/en/who-we-are/our-company.html" title="About the company" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> About the company </a> </li> <li class="u02__link-item"> <a href="https://blog.x.com/" title="Company news" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Company news </a> </li> <li class="u02__link-item"> <a href="https://about.x.com/en/who-we-are/brand-toolkit.html" title="Brand toolkit" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Brand toolkit </a> </li> <li class="u02__link-item"> <a href="https://careers.x.com/" title="Jobs and internships" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Jobs and internships </a> </li> <li class="u02__link-item"> <a href="https://investor.twitterinc.com/" title="Investors" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Investors </a> </li> </ul> </div> <div class="js-accordion u02__column"> <h4 class="u02__column__parent twtr-type--bold-14 twtr-color--gray-0 is-opaque"> Help <span class="u02__icon twtr-dtc-fill--extra-light-gray twtr-hidden--md twtr-hidden--lg twtr-hidden--xl"> <svg xmlns="http://www.w3.org/2000/svg" width="17" height="9.5" viewbox="0 0 17 9.5" aria-hidden="true" focusable="false" role="none" class="twtr-icon--sm"> <path d="M16.707.293c-.39-.39-1.023-.39-1.414 0L8.5 7.086 1.707.293c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg> </span> </h4> <ul class="u02__column__list"> <li class="u02__link-item"> <a href="https://help.x.com/" title="Help Center" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Help Center </a> </li> <li class="u02__link-item"> <a href="https://help.x.com/en/using-twitter" title="Using X" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Using X </a> </li> <li class="u02__link-item"> <a href="https://create.x.com/" title="X for creators" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> X for creators </a> </li> <li class="u02__link-item"> <a href="https://business.x.com/en/help.html" title="Ads Help Center" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Ads Help Center </a> </li> <li class="u02__link-item"> <a href="https://help.x.com/en/managing-your-account" title="Managing your account" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Managing your account </a> </li> <li class="u02__link-item"> <a href="https://preferencecenter.x.com/" title="Email Preference Center" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Email Preference Center </a> </li> <li class="u02__link-item"> <a href="https://help.x.com/en/rules-and-policies" title="Rules and policies" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Rules and policies </a> </li> <li class="u02__link-item"> <a href="https://help.x.com/en/forms.html" title="Contact us" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Contact us </a> </li> </ul> </div> <div class="js-accordion u02__column"> <h4 class="u02__column__parent twtr-type--bold-14 twtr-color--gray-0 is-opaque"> Developer resources <span class="u02__icon twtr-dtc-fill--extra-light-gray twtr-hidden--md twtr-hidden--lg twtr-hidden--xl"> <svg xmlns="http://www.w3.org/2000/svg" width="17" height="9.5" viewbox="0 0 17 9.5" aria-hidden="true" focusable="false" role="none" class="twtr-icon--sm"> <path d="M16.707.293c-.39-.39-1.023-.39-1.414 0L8.5 7.086 1.707.293c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg> </span> </h4> <ul class="u02__column__list"> <li class="u02__link-item"> <a href="https://developer.x.com/en" title="Developer home" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Developer home </a> </li> <li class="u02__link-item"> <a href="https://developer.x.com/en/docs" title="Documentation" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Documentation </a> </li> <li class="u02__link-item"> <a href="https://twittercommunity.com/" title="Forums" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Forums </a> </li> <li class="u02__link-item"> <a href="https://developer.x.com/en/community" title="Communities" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Communities </a> </li> <li class="u02__link-item"> <a href="https://blog.x.com/developer/" title="Developer blog" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Developer blog </a> </li> <li class="u02__link-item"> <a href="https://blog.x.com/engineering/en_us.html" title="Engineering blog" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Engineering blog </a> </li> <li class="u02__link-item"> <a href="https://developer.x.com/en/more/developer-terms" title="Developer terms" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Developer terms </a> </li> </ul> </div> <div class="js-accordion u02__column"> <h4 class="u02__column__parent twtr-type--bold-14 twtr-color--gray-0 is-opaque"> Business resources <span class="u02__icon twtr-dtc-fill--extra-light-gray twtr-hidden--md twtr-hidden--lg twtr-hidden--xl"> <svg xmlns="http://www.w3.org/2000/svg" width="17" height="9.5" viewbox="0 0 17 9.5" aria-hidden="true" focusable="false" role="none" class="twtr-icon--sm"> <path d="M16.707.293c-.39-.39-1.023-.39-1.414 0L8.5 7.086 1.707.293c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg> </span> </h4> <ul class="u02__column__list"> <li class="u02__link-item"> <a href="https://business.x.com/en/advertising.html" title="Advertise" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Advertise </a> </li> <li class="u02__link-item"> <a href="https://business.x.com/" title="X for business" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> X for business </a> </li> <li class="u02__link-item"> <a href="https://business.x.com/en/resources.html" title="Resources and guides" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Resources and guides </a> </li> <li class="u02__link-item"> <a href="https://marketing.x.com/" title="X for marketers" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> X for marketers </a> </li> <li class="u02__link-item"> <a href="https://marketing.x.com/en/insights" title="Marketing insights" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Marketing insights </a> </li> <li class="u02__link-item"> <a href="https://marketing.x.com/en/success-stories" title="Brand inspiration" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Brand inspiration </a> </li> <li class="u02__link-item"> <a href="https://www.xadsacademy.com/sl/5c3e29ed" title="X Ads Academy" target="_blank" class="u02__link twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> X Ads Academy </a> </li> </ul> </div> </div> </div> <div class="u02__row u02__legal twtr-spacing--pt-500"> <div class="twtr-grid u02__twtr-grid"> <div class="u02__column u02__column--bottom"> <span class="u02__column-footnote twtr-type--roman-14 twtr-color--gray-0 is-opaque"> © 2025 X Corp. </span> </div> <div class="u02__column u02__column--bottom"> <a href="https://help.x.com/rules-and-policies/twitter-cookies" title="Cookies" target="_blank" class="u02__column-footnote twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Cookies </a> </div> <div class="u02__column u02__column--bottom"> <a href="https://x.com/privacy" title="Privacy" target="_blank" class="u02__column-footnote twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Privacy </a> </div> <div class="u02__column u02__column--bottom"> <a href="https://x.com/tos" title="Terms and conditions" target="_blank" class="u02__column-footnote twtr-type--roman-14 twtr-color--gray-0 is-opaque has-hover"> Terms and conditions </a> </div> <div class="u02__column u02__column--bottom u08__language-selector"> </div> </div> </div> </div> </div> </footer> </div> <script async src="https://platform.twitter.com/widgets.js"></script> <div id="page-props" data-page-title="Getting started with Cards" data-page-path="/content/developer-twitter/en/docs/x-for-websites/cards/guides/getting-started"> </div> <script type="text/javascript" src="https://cdn.cms-twdigitalassets.com/etc/designs/developer2-twitter/public/js/core.js.twhash.p.f.c0a06ce3def1bf9035729fcf1b100bd4.js"></script> <script type="text/javascript" src="https://cdn.cms-twdigitalassets.com/etc/designs/developer2-twitter/public/js/project.js.twhash.p.f.84015c4a73e348503343b0b2dfd879cb.js"></script> <script src="https://cdn.cms-twdigitalassets.com/etc/designs/developer-twitter/clientlib-twtr-profile-adapter.min.twhash.p.cl.c3b119a4cc2249caed364b89790624a4.js"></script> <div id="u12" class="u12-data-protection-notice"> <div class="u12-data-protection-notice__item u12-data-protection-notice__item--b is-hidden"> <div class="u12b-opt-in" id="u12b" data-cname="twtr_pixel_opt_in"> <div class="u12b-opt-in__item u12-data-protection-notice__notice"> <div class="u12b-opt-in__content"> <div class="u12b-opt-in__copy"> <p class="mtc-font twtr-font"> <b>Did someone say … cookies?</b><br /><br /> X and its partners use cookies to provide you with a better, safer and faster service and to support our business. Some cookies are necessary to use our services, improve our services, and make sure they work properly. <a href="https://help.twitter.com/rules-and-policies/twitter-cookies" target="_blank">Show more about your choices</a>. </p> </div> <div class="u12b-opt-in__choice twtr-scribe-clicks-within"> <ul class="u12b-opt-in__choice-list"> <li class="u12b-opt-in__choice-list-item"> <button class="u12b-opt-in__button is-blue u12b-opt-in__button--accept mtc-font twtr-font js-accept twtr-scribe-clicks" data-twtr-scribe-section="u12-data-protection-notice" data-twtr-scribe-element="L9DK" data-twtr-scribe-component="data-protection-notice"> Accept all cookies </button> </li> <li class="u12b-opt-in__choice-list-item"> <button class="u12b-opt-in__button is-naked u12b-opt-in__button--decline mtc-font twtr-font js-decline twtr-scribe-clicks" data-twtr-scribe-section="u12-data-protection-notice" data-twtr-scribe-element="L9DK" data-twtr-scribe-component="data-protection-notice"> Refuse non-essential cookies </button> </li> </ul> </div> </div> </div> </div> </div> </div> <div id="gtag" data-gtag-csv="G-RJGMY4G45L"></div> <link rel="stylesheet" href="https://cdn.cms-twdigitalassets.com/etc/designs/common-twitter/clientlib-u12-data-protection-notice.min.twhash.p.cl.8d93205985d36dea4268f79e373e2b02.css" type="text/css"> <script src="https://cdn.cms-twdigitalassets.com/etc/designs/common-twitter/clientlib-u12-data-protection-notice.min.twhash.p.cl.6e7bf832b5adc4162fc58b1b629a7c6c.js"></script> </div> </body> </html>