Embedding Mashups on Blogger & WordPress

Yes, creating mashups, and sharing/embedding them, isn't the easiest thing to do. But we've tried to make this as easy as possible & we're continually working on improving the process- Thanks for your patience!!

You can embed a Ucubd mashup directly to your website/blog as long as your platform supports JavasScript widgets. One notable exception is the free WordPress which is very restrictive when it comes to embedding. However, embedding your mashup in Blogger is pretty straightforward.

Getting Your Embed Code

Once you've gone through the steps of creating a mashup the embed code is on the right side of the template where it says "EMBED":

You should copy this embed code since you'll need to paste it into the HTML of your blog/website. The "URL" link below the embed code is useful for sharing on social networks.

Note: To grab an embed code from a mashup simply click on the "websites" embed option at the bottom of a mashup. The embed code will be copied to your clipboard:

Embedding Ucubd Mashups on Blogger

To embed your mashup on Blogger, paste the mashup embed code into the "Edit HTML" option in the Blogger editor:

Thanks to recent improvements in Blogger Preview mode, your mashup should now show up if you want to preview your blog post:

In this case the mashup has a custom image representing it with the Ucubd play button in the middle. The custom image option is the last option on the scroll down menu of a mashup template.

Embedding Ucubd Mashups on WordPress

The WordPress embedding process is similar to Blogger as long you are using a self-hosted version of WordPress. Here's an example of embedding Ucubd mashups from our good friends at SaveFans! Paste the mashup embed code in the HTML view of your new blog post:

Do not preview your blog post as the WordPress preview option will actually damage & prevent your mashup from generating! 

When you hit the "Publish" button the mashup will generate in your new blog post:

Notice that the mashup doesn't include a custom image as previously described in the Blogger example. Instead the mashup takes a default background from the contents (YouTube & Twitter) of the mashup. You should chose the option- our default image or your custom image- that will best encourage user interaction.

Slideshow + Twitter Ucubd Mashup

The blog from Pier59 Studios uses a Ucubd mashup to combine Slideshow & Twitter.

Here's how it looks in the blog-

Notice that the mashup sits conveniently on your blog with an inviting image & play button to drive interaction. Here's what you see when the play button is clicked-

This mashup has Slideshow on the left side, live Twitter feeds on the right, and an embed code at the bottom. Also, notice that the mashup loads on your blog so that users are not redirected to another site to consume the content. Instead, they return to your blog when close option is chosen on the bottom right corner.

How to build YouTube + Twitter/Amazon Mashups

Here's how you can quickly and easily build YouTube+Twitter or YouTube+Amazon mashup:

1) On the Ucubd templates page, first choose what kind of mashup you want to build. The templates page defaults to the Amazon Affiliates Carousel. You can also choose the Twitter or Amazon MP3 option from the bulleted list on the left side of the page.

2) Paste your YouTube embed code (or URL) into the embed window. After a few seconds, a preview of your mashup will display below the embed window.

3) At this point you can just click on the "Create Embed Code" button and your done!

4) Copy and paste your mashup embed code into the HTML of your blog.

Some extra options-

- At Step 1 in the Amazon mashup- In place of a YouTube video, you can tie an image to your Amazon Affiliates Carousel by changing the content type from "YouTube Video" to "Image."

- At Step 2- You can change the key words that are passed to Amazon or Twitter by inputting key words into the "Keyword Phrase:" box. For Amazon mashups, enter your Amazon Affiliate Code into the text box.

- At Step 2- Ucubd will automatically generate a mashup image (what your readers will click-on to open the widget) or you can upload a custom one if you'd like.

-At Step 2 in the Twitter mashup- You can customize the Twitter widget by controlling background colors and the colors of the Tweet links.

Ucubd's Amazon/Twitter + Youtube Templates are ready!!

You can now create your own Amazon/Twitter + Youtube mashups through Ucubd! Within minutes, your blog can include content that combines Youtube videos with live Twitter feeds or Amazon products. It's really simple! We'll be blogging more about the process as we receive user feedback. For now, here are some examples:

Youtube + Twitter

Youtube + Amazon (sell products related to your blog content!)