- #Embed a tweet inside a tweet how to#
- #Embed a tweet inside a tweet full#
- #Embed a tweet inside a tweet code#
def result = new URL("" + params.tweetId).text The content of this script is just a simple HTTP request.
#Embed a tweet inside a tweet code#
Source code of this file can be found here: įor the next step, we add a Groovy script that actually sends requests to oEmbed AP.Īdd a new script with the name. Note: We used a minified version of plugin_static.js. $ cp plugin_ CRAFTER_HOME/data/repos/sites/SITE_NAME/sandbox/config/studio/plugins/tinymce/embed_tweet_static/ $ mkdir -p CRAFTER_HOME/data/repos/sites/SITE_NAME/sandbox/config/studio/plugins/tinymce/embed_tweet_static $ cd CRAFTER_HOME/data/repos/sites/SITE_NAME/sandbox/ Go to Crafter Studio > Configuration > RTE (TinyMCE5) Configuration.Īdd extended elements so that it won’t be stripped by Studio: script Add new plugin to toolbar items: embed_tweet_static Add a link to the plugin source code: Ĭreate plugin folder and add the file to the correct location: First of all, let’s take a look at the configuration for TinyMCE 5.
The RTE plugin sends another HTTP request to this Groovy REST API and extracts HTML data from the response. In order to achieve this, we need an RTE plugin and a Groovy script that actually sends HTTP GET requests from Crafter Studio server to oEmbed Twitter API.
} From the response, t he html field will be included on pages. "html": "Happy 50th anniversary to the Wilderness Act! Here's a great wilderness photo from #Wilderness50 /HMhbyTg18X- US Dept of Interior September 3, 2014n",
#Embed a tweet inside a tweet how to#
Note: Check out this document for how to add an RTE plugin to TinyMCE in Crafter Studio.įor this type of plugin, we use the oEmbed API to convert a Tweet ID into embedded Tweet markup. While static raw HTML is more suitable for sites with static page content in HTML, dynamically rendering is more suitable for dynamic SPA sites such as React or Angular applications. We will introduce two ways to embed a Tweet to a Crafter site: static with raw HTML or dynamically rendering with JavaScript. For more information, check out the Twitter official documentation. We can even customize how the Tweet should look with some supported options such as color themes, show cards, conversations, threads or not, and so on.
#Embed a tweet inside a tweet full#
Full source code can be found in this repository.Įmbed Tweets bring the ability to include Twitter content to your site. In this section, we discuss more how to implement this kind of RTE plugin. Input any Tweet ID to insert raw html to the page. Click on Add Tweet Embed Static to open a popup. In the next section, we will discuss more details about this. We have two buttons to embed Tweets: Add Tweet Embed Dynamic or Add Tweet Embed Static. If you successfully create the site, go to the dashboard, articles pages, check a page which we have included a Tweet as the following screenshot.Ĭlick Edit to confirm that our plugin has been included. To create a new site with the above blueprint, from Crafter Studio, click create a new site from Git Remote Repository.
This blueprint is based on the Editorial Blueprint. You can use this repository to do a quick scan of how the plugin is added.
For this article, we are using CrafterCMS 3.1 version and TinyMCE 5.įor convenience, we have already created a site blueprint to include this RTE plugin. You only need a running instance of Crafter Studio. This plugin uses Tweet ID as the only input required to render Embed Tweets either by inserting static HTML or dynamically at runtime. In this article, we will build an RTE plugin for TinyMCE that enables authors to easily embed Tweets to site pages. This Rich Text Editor (RTE) enables users to input different types of content such as text, images, videos, and so on to Crafter Studio. TinyMCE is one of the most powerful WYSIWYG editors. Crafter Studio supports Rich Text Editing via TinyMCE by default.
0 kommentar(er)
