![]() If you have any suggestions on making this better, or have other ideas for embedding Tweets in Sitecore, please share in a comment. This isn’t the most aesthetically pleasing HTML, but it will serve its purpose for testing:Īfter saving and publishing, I navigated to my test Item’s page, and saw this: I created a test Item, and added some legitimate and bogus Tweet URLs into one of its Rich Text fields (please pardon the grammatical issues in the following screenshots :-/): I then tied everything together using the following patch configuration file: Once all Tweet URLs have been processed, we append a script tag referencing Twitter’s widget.js file - this is supplied through a configuration setting, and it does the heavy lifting on making the Tweet HTML look Twitterific □ - to the field’s rendered HTML. If the HTML returned is empty - this could happen when an exception is encountered during the Twitter API call (of course we log the exception in the Sitecore log when this happens □ ) - we don’t touch the Tweet URL in the field’s value. If the returned HTML is not empty, we replace it in the field’s value for display. Otherwise, we make a request to Twitter’s API to get it, put it in cache one we have it (it is set to expire after a specified number of milliseconds from the time it was retrieved: Twitter returns the number of milliseconds in one full year by default), and then we return it. If the HTML is found in cache for a Tweet, we return it. Methods in the class above find all Tweet URLs in the Rich Text, Single-Line Text, or Multi-Line Text field being processed - the code determines if it’s a Tweet URL based on a pattern that is supplied by a configuration setting (you will see this below in this post) extract Tweets’ Twitter identifiers (these are located at the end of the Tweet URLs) and attempt to find the Tweets’ HTML in Sitecore’s HTML cache. The JSON above drove me to build the following POCO class to represent data returned by that URL: While doing some research via Google on how to do this in Sitecore, I found this page from Twitter that discusses how you could go about accomplishing this, and discovered how to get JSON containing information about a Tweet - including its HTML - using one of Twitter’s API URLs: This is what is seen on the rendered page: You might be asking “what’s an Embedded Tweet?” An Embedded Tweet is basically the process of pasting a Tweet URL from Twitter into an editable content area of your website/blog/whatever (think Rich Text field in Sitecore), and let the code that builds the HTML for your site figure out how to display it.įor example, I had used an Embedded Tweet in a recent post: In a previous post, I showcased a “proof of concept” for shortcodes in Sitecore - this is a shorthand notation for embedding things like YouTube videos in your webpages without having to type up a bunch of HTML - and felt I should follow up with another “proof of concept” around incorporating Embedded Tweets in Sitecore. You will also need to add before the at the beginning of the embed codeĪs a result, the tweet will not automatically appear pushed up against the left or right side of your webpage.ĥ. Paste the tweet's embed code into the window.ģ. Click on the block to activate the menu.With this embed code copied to your clipboard, return to the Sitebuilder and go to the newly added HTML block. Once you've found the tweet you want to embed, click the downward-facing arrow icon located on the top-right of the tweet.Ĭlicking this arrow icon will reveal a dropdown menu of options, including one called Embed Tweet : For this example, we'll embed a tweet from The Health Renegade's Twitter feed, as shown in the screenshots below. Locate the tweet in your Twitter newsfeed or on the Twitter user's profile. To embed a tweet onto your blog or website, you'll need to first find the tweet you want to display in its natural habitat - Twitter, complete with likes and comments. Step 2 - Find the tweet you'd like to embed Your new block will be only visible inside the Sitebuilder until you add custom code to it. In the Block library, click on the Embed block. Locate the spot on the page where you would like to embed a Tweet and click + Add a block button.Ģ. ![]() Here’s how you can do it using custom code. Click the three dots at the top right of the tweet. Open Twitter in a web browser, log in if necessary, and find the tweet you want to embed. ![]() You may want to embed a tweet mentioning your product, service, or a review into your website page. How to embed a tweet using the Twitter website. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |