TL;DR <a href="https://github.com/cosmicjs/twitter-extension" rel="noopener noreferrer" target="_blank"></a><a href="https://cosmicjs.com/extensions/twitter-search" rel="noopener noreferrer" target="_blank">Install the Twitter Search Extension</a> <a href="https://github.com/cosmicjs/twitter-extension" rel="noopener noreferrer" target="_blank">View Source Code</a> IntroIn this article, we will walk through how to build a <a href="https://cosmicjs.com/extensions">Cosmic Extension</a> that can search and embed a Twitter timeline in our dashboard, and save selected Tweets from the timeline to our Bucket. &nbsp;We will utilize a couple of Twitter APIs to build our customized Twitter search API for our extension. This Cosmic Extension greatly simplifies the workflow for developers who need to embed Tweets into their websites based on dynamic Twitter search queries. Get Twitter consumer key and consumer secret&nbsp;To be able to use the Twitter APIs, we need to have a copy of Twitter consumer key and consumer secret. To retrieve these, log into your Twitter account, then go to apps.twitter.com and apply for a developer account.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/312f2f60-96d0-11e8-93c9-0d7cfa50638b-Screen Shot 2018-08-02 at 8.47.27 PM.png" style="width: 100%;" class="fr-fic fr-dib fr-fil">After getting approval from Twitter, create a new application in your developer account and fill out this form:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/baa49680-96d1-11e8-b52d-e18492f8c75e-Screen Shot 2018-08-02 at 8.59.26 PM.png" style="width: 100%;" class="fr-fic fr-dib fr-fil">Next, Twitter will generate your consumer key and secret which are displayed under &#39;Details&#39; tab. Keep these since we will use them to implement our own search API.&nbsp; Implement Twitter Authentication&nbsp;Anyone who uses our Cosmic Twitter Extension needs to sign in Twitter to be authenticated. Twitter uses oAuth 1.0 for authentication and authorization. Our extension redirects our users to a Twitter sign in and consent popup page. Upon our users&#39;
successful login to Twitter and consenting Cosmic to send Twitter APIs on their behalf, users will be returned to the dashboard and able to perform Twitter search. &nbsp; &nbsp;&nbsp; Develop our customized Twitter search APIAs we mentioned above, Twitter does not provide an API for searching and embedding search results. We will develop our own customized API by using the combination of two APIs provided by Twitter. The two Twitter APIs that will become our building blocks are:1, Twitter search API that gets a list of relevant Tweets matching a search query, in JSON.Example from Twitter API documentation: &nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chunan16/2fc4770af32bf2c0610dd71ba226abcf.js' class='embedly-card'></a>"><a href="https://gist.github.com/chunan16/2fc4770af32bf2c0610dd71ba226abcf.js" class="embedly-card"></a></div>2, API for getting the HTML of a Tweet given its author and Tweet ID, ready to be embedded on a website.&nbsp;Example from Twitter documentation:&nbsp;&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chunan16/602b7a6ffca05727be37ede2fe09fbf1.js' class='embedly-card'></a>"><a href="https://gist.github.com/chunan16/602b7a6ffca05727be37ede2fe09fbf1.js" class="embedly-card"></a></div>The basic idea is to use the Twitter search API to get a list of Tweets in JSON. The results return from the Twitter search API does not contain the HTML of the Tweets, so we cannot directly embed the search results into Cosmic. This is where the second
Twitter API comes into play. For each Tweet returned from the first API, we extract its author ID and Tweet ID, and use these information to invoke the second API to get its HTML. Here is the code:&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chunan16/83c9e976b3c002ddd80dd9d60ffa178f' class='embedly-card'></a>"><a href="https://gist.github.com/chunan16/83c9e976b3c002ddd80dd9d60ffa178f" class="embedly-card"></a></div> The rest is straightforward. We can now invoke our own search API from the browser and embed the results that are just a list of HTML blocks in Cosmic. A Tweet Object only has one Metafield which is &ldquo;html-textarea&rdquo; type. Invoke the relevant
Cosmic APIs to add or delete Tweet Object Type and Tweet Objects in Cosmic dashboard. If you have any doubts of how to use the Cosmic APIs, please check out the Cosmic API documentation.&nbsp;Conclusion I hope you found this tutorial helpful in demonstrating how Cosmic Extensions allow you to extend the power of your Cosmic Bucket and communicate with third-party APIs like Twitter. Join the conversation on <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">the Cosmic Slack channel</a> and <a href="http://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to Cosmic on Twitter</a>.

Blogs by Chunan Liang

Start building today

Blogs by Chunan Liang

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today