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
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:
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
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.
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
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!
Have any link to a demo blog made with Muse? Or the one you used to test it? Thanks! ;)
@Bosco – good idea. I added one to the first paragraph of this article. Or go here:
Hey there, how could i make the background of Nabble transparent?
Hi! nabble.com is in trouble? I can no longer access it.
@Santiago – have a look on here for transparent background
Thank you. Worked great.
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
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?
@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.
Thank you for your excellent suggestion for a blog-like page with a disqus feed or similar. I like it!
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.
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.
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?
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?
What is the easiest blog site to use? I also need one that you can post pics to from your cell phone?
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.
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
Thanks Steve Harris, so simple to understand and I used to think that embed a blog into muse was nos possible. :-)
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.
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.
very good article.thank
Thank you…you made it very easy!
Wonderful article … as always. Thanks so much Steve. -Jo
This article provides lot of information. Thanks for sharing.
Its a very great article. Thank you so much to give this information.