Sandvox has over two dozen built-in objects that make it easy to add lots of functionality to Sandvox websites — but the options expand even further with the Raw HTML object. This month, our refresher article on the Raw HTML object features step-by-step examples for using it, that describe adding a Twitter feed and embedding video. Don’t be shy — zero prior HTML experience is needed!
Using the Raw HTML object enables you to add all kinds of useful widgets to Sandvox websites. To demonstrate how it works, we’ve prepared a couple of examples that you follow along with to try out the object yourself.
Example 1: Add a Twitter Feed/Timeline
Twitter’s Embedded Timeline allows you to display tweets, favorites, or any search query or hashtag on a Sandvox website.
(If you’ve been using Sandvox for a while, you may remember that Sandvox once offered an object that provided some Twitter timeline integration. Last year, we changed — well, removed — that Sandvox object due to changes that Twitter made to their system which prevented it from working as it was designed.)
Here, we’re going to describe adding a Twitter Feed/Timeline in a different way — by creating and modifying it through Twitter’s Widgets Configurator page. It is very easy to do with the Sandvox Raw HTML Object, and we’ll walk through the steps now.
Step 1: Get Widget Code
First, log in to your Twitter account. Then, go to the upper right-hand corner of your Twitter page, and click on the
icon to go to Settings. Click Widgets from the left sidebar then click the “Create new” button. This takes you to the Widget Configurator page, where you can choose what type of widget you would like to use. Choose “User timeline” to create a feed from a specified Twitter account for your website. In the username field, type your username (or any Twitter username you wish to use, as long as it is a public Twitter profile and not a protected account). Then you can adjust other settings such as the height and theme of the timeline. The widget preview auto-updates as you make adjustments to it.
Once you’re satisfied with the settings, click “Create widget”. Then copy the code generated below the preview.
Now that you’ve created the widget, it’s time to insert it into your website. The code (yes, raw HTML!) you copied is all that Sandvox needs to display your Twitter timeline.
Step 2: Add the Widget to your Website
On your Sandvox document, click “Objects” from the toolbar and choose “Raw HTML”. A window where you can paste the code will pop up. If it doesn’t, just go to Edit → Edit Raw HTML in the menubar. Next, delete the sample raw HTML and paste the code you copied from Twitter.
Close the Raw HTML window. Sandvox then displays the timeline as it appears on the Widget Configurator page. You may want to place your timeline on the sidebar so it’s visible on every page of your site. To do that, select your timeline, go to the Wrap Inspector and choose “Sidebar” under “Object Placement”. You may need to resize it to fit the sidebar by going to the Metrics Inspector or by using the sizing handle. And that’s it! You now have a Twitter timeline on your website!
Not seeing what you expected? To see the widget as it will appear on your website, go to Sandvox Preferences, and make sure that “Load data from the internet” is enabled. If it isn’t, you’ll see a placeholder where you placed the Raw HTML object in your Sandvox document.
Note: This setting doesn’t impact publishing. Once the website is published with the object added, you’ll see the widget displayed from your browser — regardless of the way the Sandvox preference is set.
Example 2: Embed a Video
Next, let’s insert a video from a video hosting website. Sandvox already has a built-in object for videos from YouTube, but if you would like to add a video from another video hosting site, you can do it via Raw HTML objects. Let’s insert a video from Dailymotion.com.
For this example, go to Dailymotion.com and search for a video you want to embed on your website. Find and click on the “Export” tab beneath the video (other video hosting sites use terms like “Share” or “Embed”). Dailymotion allows you to change some of the attributes of the video such as the size. Once you’ve made your selections, copy the code under “Get embed code”.
Now, go back to Sandvox, and just follow the same steps you used in the Twitter example, above, where you insert a new Raw HTML object from the Sandvox toolbar and paste the code you copied into the Raw HTML Editor. Sandvox will then show a player for the video you inserted.
Inserting Other Objects
As you did with the two examples in this article, to insert other objects, simply repeat the steps to obtain code, and add new widgets to your site using Raw HTML objects.
Just go to the site or service that provides the object or widget, get the provided code and paste it into Sandvox. No prior experience with HTML is required! Using this process, you can add objects such as calendars, weather updates, PayPal “Buy” or “Donate” buttons, and lots of other objects that add to the visitor experience of your Sandvox website.
That’s all there is to it! We hope this article helps you spring into something new!