Embedding your Mituyu stream in your website

code

Warning: Mituyu's web embed system is currently not aimed at high-traffic sites, and so we currently reserve the right to rate-limit embeds that receive more than 10,000 impressions per day. We're working hard to increase this limit, though, and hope that this won't be a consideration at all soon. Thanks for you patience on this!

Embedding your Mituyu stream on your website is easy; the embed section of the console will give you the code to insert, which will look like this:

<script src="https://mituyu.com/embed" data-mituyu="your special code" async></script>

You should place this code at the point in your webpage where you'd like the feed to appear. The feed comes with a standard style, as you'll see when you visit that section. Please use the code from the website, not this documentation - the 'your special code' part will be replaced with just that - a special code - which tells Mituyu which account's embed to display.

Re-styling your embed

The embed section of the console, as well as giving you the code to add to your site, contains an array of tools to enable you to alter the look and layout of your on-site stream. These controls are easy to use; click on the options in the navigation bar to view different style panels, and the changes you make will be immediately reflected in the stream you see on screen.

You can click between styling panels without saving your changes, but at the point when you're happy with what you see, you can publish that style. Be aware that, when viewing the embed outside of the Mituyu console (ie where it appears on your website), changes you publish can take up to ten minutes to appear.

There are two other options available to you while editing; revert to saved, which will undo any unpublished changes you've made, and reset to defaults, which will revert your style choices to the default, out-of-box Mituyu settings. This last option, while reverting the style, won't save that change automatically, for safety's sake.

Layout: number of content columns

Here you can choose how many columns wide you'd like your stream to be - essentially how many cards you'd like across the stream. If you're planning to use Mituyu for a side panel on an existing page, you'll want your stream to be one card wide, whereas for a full-page stream, four would be more appropriate.

One thing to note here is that, while you can specify the number of content columns, Mituyu will use its own judgement as to how many to ultimately display; because elements such as Tweets and videos have a minimum width, so do stream items, and so where there isn't space available, this figure will be automatically reduced. You can therefor consider this to be the maximum number of columns in many cases.

Layout: spacing (horizontal and vertical)

While you'll find elements such as padding are dealt with as a single figure, margins are editable as horizontal and vertical figures, should you wish to create a stream that sits flush with its horizontal margins, but maintains a space between feed items.

Layout: border curve

This is the equivalent of CSS' border-radius setting, and is applied to the outer edges of each stream item.

Headings, links, and text: general settings

Headings, links, and text all share a common set of controls, enabling you to set alignment, font size, weighting, etc. The padding setting here indicates the space inside the box for each element.

Headings, links, and text: choosing colours

You can choose the background and text colours for each item individually, by entering an HTML colour code (preceded by a #). If you're unfamiliar with how these codes work, an easier way is to double-click on the field, at which point a friendlier colour-picker will pop up.

Headings, links, and text: font name

You can specify a standard font that you feel most users will have - Times, Arial, Helvetica, Courier, etc - or you can enter the name of a Google font, and Mituyu will import it for use. You can view a complete list of available fonts at: https://fonts.google.com/.

This service uses cookies to enable log-ons, enhance your user experience, and aid in content delivery. It also employs third-party services that may also issue cookies.