Join Now

Creating a Blog in Adobe Muse - Powered by Nabble

Since this writing, we've released Mumblr - a search engine friendly blogging solution for Muse, powered by Tumblr. This widget requires no complex server setup, and allows you to take advantage of the user-friendly Tumblr content management system to upload new posts and media. Check out Mumblr here: http://www.muse-themes.com/products/tumblr-blog-content

 

Muse Blog Widget Mumblr

 


With no true “Blogging” capability built directly into Adobe Muse, users must find an alternative way to mimic this functionality.  By using embedded HTML and the free Blog provider Nabble (www.nabble.com) this tutorial will explain how to include a fully featured blog in your website without writing any code.

Here's a sample blog that I built in a few minutes as a demonstration:
http://mtsampleblog.businesscatalyst.com/index.html

 

Why aren’t blogs available right now in Adobe Muse?

Although services like Tumblr and Wordpress simplify blogs greatly, the truth is they are fairly complex to code from scratch and often require complicated backend systems (servers with databases).  Think of all the functionality a typical blog includes - commenting, login systems, archiving, searching - those aren’t features that can be easily achieved with simple HTML / CSS.

While I certainly can’t speak for Adobe, I can say that for a blog “widget” to simply exist in Muse you wouldn’t be able to host a site on any server, with any configuration. The same is true for the “Forms” widget in Muse - for a form to work, you must host with Adobe’s Business Catalyst. This isn’t because Adobe wants to force you to host your site on their servers; it’s because that’s the only place where they can control the backend setup and build a widget that will consistently work every single time.

Remember the days of cross-browser bug fixing (before Muse saved us), well just imagine doing that for every hosting server in the world.  But I digress…

Similar to browsers, there are many different types of hosting servers and configurations
Image from: http://www.seo4q.com/2012/02/several-types-of-websites.html

 
About Nabble

I like Nabble as a blogging solution for a few simple reasons:

1. It’s really easy to use, quite powerful, and best of all... free.

2. Once your site is embedded in Muse, you won’t need to edit your Muse file to make updates.  You will simply login to the Nabble website, post updates (and even change the appearance) and your changes will be reflected immediately on your Muse website.

3. You have just enough control over the look & feel to integrate it seamlessly into your website, but without advanced features that might be overwhelming.

4. It contains the core functionality most bloggers look for - searching, archiving, RSS feeds, commenting, etc.

 

Get Started:

Step 1 – Sign Up

Sign up for a Nabble blog at www.nabble.com.  Give your blog a name and brief description (you can change or hide these options later).

Once you have setup the blog, you’ll need to confirm your email address via verification email.  Ensure you are actually registered and logged in - the blog “options” menu looks very different for a normal user vs. the administrator who is logged in.

 

If your name isn't in the top right corner, you are not logged in.

 

 

Pictured above: The options menu changes significantly when logged in as an Administrator

 

Step 2 – Embed it

Click the blog “options” button (pictured above) and select Embedding Options.  A window will appear displaying the embed code you will need to use in Muse.

Pictured above: The embed code provided by Nabble

Copy / paste this code, and insert it into your Muse website by using the “Object > Insert HTML” menu.  Once you've dropped the embed code in, Muse will try and generate a preview of the site automatically.

Pictured above: After placing the embed code in Muse

You can control the area that the blog takes up by scaling the frame around the embedded HTML.  Drag it to the appropriate size, and preview your site in the browser (File > Preview Page in Browser) to see how it looks.

Pictured above: Previewing the embed code in the browser

 

Step 3 – Style it

Now that the blog is actually embedded in your Muse website, I would suggest you publish the site online as future edits won’t be made in Muse - they will be made right in the Nabble interface.

Jump back to Nabble in your browser, and under the blog “Options” dropdown select “Change Appearance”.  This will reveal a control bar on the top of the screen and give you the ability to change fonts, colors, etc.

The appearance toolbar in Nabble is powerful - change colors, fonts, and preferences.

In order to seamlessly integrate Nabble (the blog) into your site, you will likely need to change the background / heading colors of the blog.  I’d recommend you choose the same background color for the blog as you use for your website.

Nabble uses Hex Codes to define colors.  Muse displays the Hex codes in the swatches menu as pictured below.  This is your key to styling them as close together as possible - define colors in Muse, and use the same hex values in Nabble.

Match up your Hex numbers to ensure color consistency between Muse and Nabble

Once you’re done editing the look of your Nabble site, click APPLY and refresh your browser window containg your Muse site preview. The changes should automatically be reflected on your site once you've applied them - no “re-embedding” is required.  The code you place in Muse simply tells Muse where to find the blog, but it’s still always hosted and powered on the nabble platform. 

Be sure to also check out the “Preference” options available in the styling toolbar.  This area controls alignment, post structure, and what headings / titles you want to appear. There are lots of options, so I’d suggest you experiment as needed. 

Explore the Preferences dropdown for additional options

 

Step 4 – Post!

It’s time to actually add content to your blog by creating a new Post.  Select the “New Post” button on your blog home page, and plug in your content as needed. The Post editor window in Nabble provides lots of options for adding images, links, and even embedding additional HTML into your posts (for example a YouTube video).

You can also add polls (user surveys) and control subscription options for the topic, such as receiving an email automatically when someone comments on the post.

Pictured above: The Nabble "New Post" windows gives you plenty of options for creating a beautiful blog post

 

Limitations

There are two sides to every story, and although Nabble is a great option for blogging in Muse there are downsides to embedding any content in general (mainly related to Search Engine Optimization).

Conventional blogs are great for improving search rankings, since content is being updated regularly and the site is full of quality / searchable keywords. By embedding a third party blog like Nabble or Tumblr, you're unfortunately not going to see the SEO benefits because all of that beautiful content isn't actually hosted on your own website.

Think of embedding content as opening a "window" to another website. A YouTube video that you've embedded into your site isn't actually hosted on your own server, you've just opened up a hole in your site that looks into YouTube. When Google indexes your website, it won't see that content and use it to improve search rankings.  Is this a deal breaker?  NO.

Nabble is still a great option for blogging in Adobe Muse. Good quality search rankings come from a varity of different factors, and as long as the rest of your website is full of quality content don't be afraid to implement embedded HTML to satisfy your needs.

Best of luck!
Steve Harris

 

by Steve Harris

Comments

Bosco
Bosco

Have any link to a demo blog made with Muse? Or the one you used to test it? Thanks! ;)

MuseThemes
MuseThemes

@Bosco – good idea. I added one to the first paragraph of this article. Or go here:
http://mtsampleblog.businesscatalyst.com/index.html

Santiago
Santiago

Hey there, how could i make the background of Nabble transparent?

Luiz Carvalho
Luiz Carvalho

Hi! nabble.com is in trouble? I can no longer access it.

Karl Nuttall
Karl Nuttall

@Santiago – have a look on here for transparent background

http://old.nabble.com/help/Answer.jtp?id=39&skin=27240

Annette
Annette

Thank you. Worked great.

Chris KIMBER
Chris KIMBER

Do you have any suggestions to get full SEO benefits from a blog with Muse? I.e what software to use etc? I only want a blog for the SEO benefits so it seems Nabble is pointless for me.

Thanks in advance

Ellen
Ellen

As an add-on to Chris Kimber’s query. Other than having the site hosted with Adobe BC and using their blog function (and hosting with BC is a no go for me), it seems like there is no good way to gain SEO from a blog “embedded” in Muse. Has anyone found a workaround?

Steve Harris
Steve Harris

@Chris / @Ellen
Other than embedding a BC blog, there isn’t a great workaround that will yield good SEO results (at least not without manually editing code). The only suggestion I would have is to just style a page of posts to look like a blog (embed a share button, or a disqus feed). You won’t have any features like archived posts or tagging, but at least all of your quality content will be available to search engines.

Ellen
Ellen

@Steve:
Thank you for your excellent suggestion for a blog-like page with a disqus feed or similar. I like it!

Franck Payen
Franck Payen

Hi Steve. Thanks for the tutorial(s). Talking about the archived posts or tagging, that’s where i’d love to get a secondary level menu widget that would help a lot for this archives posts.

I proposed more features on an existing idea for that : http://forums.adobe.com/ideas/2638

Let me know if that sounds like a good direction.

buccigraphic
buccigraphic

is there any way to make sure nobody can post to your blog? i’ve hidden all the buttons inder a layer of images, but i want the site owner to be able to post, so i put a ‘new post’ button at the top of the blog. thing is anyone can click that and post. the other method is to make the posts by email only. but you lose a bit of formatting with that and i’m not sure if you can post images that way.
so what i need to know, is there a way to have the site owner click a post now button and have to enter a name and password before typing.

Jay
Jay

I actually just used a nabble news forum to start an online business directory, taking advantage of nabbles simple search features. Each business listing is another article. I list keywords at the bottom if each listing, tag style so that they can be searched if the user is looking for a. Certain type of business using certain keywords.

Any thoughts, pro or con, on this?

Maria
Maria

Hi Steve,

thank you for a great tutorial. I am at the moment creating a muse site, but as I try to embed the blog, it muse does not preview it, it just stays loading after I give the HTML code. Any advise?

Kakeh Paris Adelaida
Kakeh Paris Adelaida

What is the easiest blog site to use? I also need one that you can post pics to from your cell phone?

michi
michi

Ugh, I really want to make a blog site in muse to try out using the new software, because it will also have static elements and seems like more control. I can’t help but to think this is not my option with no Seo and having another site just for the blog aspect to connect. So do I punk out and use a blog site, maybe work out in old school dream weaver or suck it up and try to bend muse to my will, ahah.

Your site was very helpful, I kept looking but could not see a direct answer to the blog aspect of Muse in detail. Back to the drawing board, I think it will to be too many blog entries to make each its own page, as I plan this to be longer term and extensive. Come on adobe, you couldn’t wow me with a special widget for this.

bob
bob

nice post Steve nabble.com is a great bloging site but the interface could not march my site it is too classic for my flat design so i found a work around with Wix.com They have great blog themes to customize to your test and just insert them in to your adobe muse site with the use of iframe here is a test site i did http://zzzxxx.businesscatalyst.com/index.html

Vero Jimenez
Vero Jimenez

Thanks Steve Harris, so simple to understand and I used to think that embed a blog into muse was nos possible. :-)
Good work!

Jared
Jared

Great tutorial. I was looking for a way for people who visit my site to have a way to easily comment on content. I can refer them to a nabble blog Muse page where a dialog could take place without disturbing the look and feel of the rest of the site.

For those wanting SEO boost from their blog, perhaps installing a WordPress blog in a folder at their directory root (with a URL like http://example.com/blog) would do the trick, as you domain will be hosting the blog. While you’ll get your SEO the blog will have a different look than your Muse site – but if you pick the right theme, you can come probably come close enough.

Scott
Scott

Hey Steve, Great tutorial…but my problem is that when I past in the the two lines of Javascript, the little tags that read, "… Etc. show up on my muse site, and worse yet get transmitted to the preview in my browser! What is going on with this?

Bill
Bill

You state in your article: “The same is true for the “Forms” widget in Muse – for a form to work, you must host with Adobe’s Business Catalyst.”

Not true. I’m using the forms contact widget in my site on my hosts’s apache server hosting my basic service account. I never thought whether it would be supported or not. I added it and uploaded it. It functions fine.

mohammad
mohammad

very good article.thank
http://www.new4android.ir/

Rose
Rose

Thank you…you made it very easy!
Rose

Jo
Jo

Wonderful article … as always. Thanks so much Steve. -Jo

Kernel Training
Kernel Training

This article provides lot of information. Thanks for sharing.

Ava Marie
Ava Marie

Its a very great article. Thank you so much to give this information.

Post A Comment

Trusted by over 50,000 Muse Designers

Join now to download our entire library of templates, widgets, and tutorials Join Now