ShoutEm

Archive for the ‘Shout'Em Tutorials’ Category

If you would like to add a new link to your navigation toolbar, here is a piece of code that will help you do that.

<script type="text/javascript">
//<![CDATA[
jQ(document).ready(function() {
var linkUrl = ‘www.shoutem.com’; // replace this with your link (w/o http://)
var linkText = ‘ShoutEm’;       // replace this with your link text
jQ(‘.pageHead .nav’).append("<li><a href=’http://&quot; + linkUrl + "’>" + linkText + "</a></li>");
});
//]]>
</script>

Copy this code, open your admin pages, go to Settings –> Ads and paste it in the Analytics code textbox (at the bottom). Change linkUrl and linkText properties and Save everything. You should see it now at your network homepage.

new_link

Shoutem enables users to forward their shouts to Twitter, but using Twitterfeed, you can also forward all your tweets to your Shoutem network. There are only few steps to take to enable this, so let me show you how to enable it.

First of all, go to http://www.twitterfeed.com and create your account (you can also sign up with OpenID).

twitterfeed_create_account

After account creation, in a first step you have to add the name of your feed (you can put whatever you want) and the URL of your RSS feed. URL can be found on the right sidebar of your Twitter homepage, saying something like: “RSS feed of ilijabrajkovic’s tweet”.

twitterfeed_add_name_url

In a next step, you have a list of available services to use. Click on Statusnet.

twitterfeed_services

Now you have to enter some information about your network. In a StatusNet server textbox, enter the URL of your network, without the prefix http:// (e.g. team.shoutem.com , NOT http://team.shoutem.com). Also, enter your username and a password for that network. You can add some additional tags if you prefer to. Click on Create service button.

twitterfeed_statusnet_account

twitterfeed_done

And that’s it. After some time, you will see your tweets forwarded to your network.

ilijabrajkovic_home

Also, you can change some advanced settings on a Twitterfeed dashboard:

twitterfeed_advanced

Do you already use Twitterfeed to post statuses to your network? Do you like it?

Update: this post is outdated as of March 17th, 2010

At this moment ShoutEm supports 18 different styles that you can use on your network (and we are adding even more styles, like Marble), but you may want to customize the look of your micro-blogging network just the way you want.

Using ShoutEm Admin pages, you can change look of many parts of your network, sometimes even without special knowledge of programming and/or designing. For example, look at the great example at HorseTweet network. These guys created a great skin using Settings page under their ShoutEm Admin panel. Let me show you what can you do using your admin page, and how can you modify some of our skins to look just the way you want.

For starters, let’s see the screenshot of my test network ilijabrajkovic.shoutem.com. I use “Elegant Dark Groove” skin, which (because of its dark color) gives me good foundations for what I want to achieve.

 

elegant_dark_groove

 

Let’s try to change it a little bit.

First, go to your admin page, then from the left menu select Appearance –> Settings. You’ll see the page where you have a lot of options to change the look and feel of your ShoutEm network. The first part of this page is called Header settings, and here you can change look of the header of your network. For example, you can change the logo image, if you have a logo for your network. Just be aware that the maximum size for the logo is 990×50 pixels. Also, you can setup background image for your header, and also text, navigation and background color.

header_settings

In the Body settings part of the admin page you can change the way how the main part of your network looks like: list of the shouts on your network and users panel. You can setup Body font, Font size, colors… This procedure is pretty much straightforward, so spend some time playing with these settings and choose the right settings for your design.

body_settings

 

Shout settings area gives you ability to change the look of a single shout on your network. You can change colors of the text, links, info and background as well as shout transparency.

shout_settings

You can see the preview of these settings applied to my test network in the screenshot below.

 

shout

Also, if you want to monetize your network and you want to show Google ads on it, you can change the Ads style. You have the option to choose between five different styles: Red, Green, Blue, Dark and Light. Just choose the one the will be the best fit for the design of your network.

 

ads_style

You can also change the background color and/or background image on your network. Using the simple color picker you can select the color, or upload a background image from your computer.

background_settings

You can even upload your own Favicon. Just create an icon that is not larger than 16×16 pixels, convert it to .ico file, and upload it.

favicon_settings

I’ve been playing with these settings for a little bit, here you can see the end result:

 

final_result

As you can see, most of the design is changed. This is just a quick, rough style change; I’m sure you can do better than me with a bit of effort!

This tutorial shows you how easy is to change design of your Shout’Em network, if our predefined designs don’t satisfy you.

Also, there are some other things that you can do to change some of the design of your network, but we’ll leave that for some other post. For now, go to your Admin page and play with these setting for a while, and if you still don’t have your network, go to http://www.shoutem.com and create one for free.

Your Shout'Em Network - Public or Private!

Privacy is a key factor of both security and interaction on social networks, such as your Shout’Em network. If you want to create a community, keeping it as open as possible will let more people join. If you created your network for your company or group, keeping the communication private could be essential. Now lets see what exactly we can do to make it happen….

Setting up your Shout’Em privacy settings

Your privacy settings

Your privacy settings

Go to your Shout’Em settings for your particular network and click on Settings. You’ll find the privacy options under Basic settings. While most options will obviously be found under “Privacy”, you can enable anonymous shouts under “General behavior”. What do the options let you do:

Shout'Em Privacy Options

  • Allow private profiles lets users make their own profiles private, making all their shouts visible only to their friends. Users will have to subscribe. The subscription will then have to be approved by the user who set the private profile. This option is useful if the user wants to limit his or her communication to a small group of people inside the network;
  • A private network is accessible only to its registered members and hidden from the general public. Enabling this options will only let registered users see and create content on the network, but won’t restrict registrations themselves;
  • By selecting to approve every new member, every potential user will have to be approved by the network administrator (you) before he or she can see or create any shouts. This options will work nicely if you want to let only certain people join your network;
  • By restricting email domains you can limit registrations only to people who register with a certain e-mail address. For example, you could limit it to your company’s domain name. If you limited it to example.com, then john@example.com and lucy@example.com could join, while mark@gmail.com couldn’t. You can restrict access to multiple e-mail domains if needed;
  • If you enable anonymous shouts, users won’t have to register in order to create shouts on your network. This can be very useful if you don’t want to bother your users with the registration process at all.

You can always selected the predefined “Private network” option on the right side of the Basic settings, which will lock down the network securely. Remember that by making your network private, you’ll also make its content hidden from search engines!

Whether you decide to keep your network hidden from prying eyes or make it more accessible by making it public, don’t worry. You can always switch options, as you’ve seen, in a matter of seconds.

The Power User's Guide to Shout'Em Microblogging

After you’ve setup your Shout’Em network, customized it and gotten it on the right track, you’re on your way to becoming a power user. To make the journey easier, we’ve compiled a list of tips and tricks:

Shouting out!

How to get your message out…

Twhirl on your desktop

Shout from Your Desktop

Shout from Your Desktop

The web is all fine and dandy, but why not use a desktop client on your Windows, Linux or Mac machine? Setting up Twhirl is easy and it works intuitively with any Shout’Em network. Having a desktop client that supports Shout’Em such as Twhirl set up, lets you dedicate your browser to other sites or shout while you’re not even surfing. For admins and moderators, keeping an eye on your community can explore your userbase!

Ping.fm & HelloTXT for all your social media

Ping.fm and HelloTXT

If you update multiple social network, you might find it easier to do so with Ping.fm or HelloTXT. Both these services save you valuable time by propagating your message to multiple networks or blogs, including Shout’Em.

Shout’Em mobile

Shout'Em mobile

Shout'Em mobile

When on the move, or just not at your computer, you can access any Shout’Em network and be greeted by an interface optimized for mobile phones. A minimalistic interface, core features and small data size give you the ability to shout – really fast!

Shout’Em iPhone app

Shout'Em iPhone app

Shout'Em iPhone app

Oh, we love our iPhones. Since you’re downloading apps from the iTunes App Store all the time, you might we interested in the upcoming official Shout’Em application for the iPhone. Let’s just say it’s slick and sexy and we can’t wait to show you the first 1.0 release. For now, however, it’s in beta. Hint: comment or e-mail us if you want to apply for beta testing.

Show your location

Like stalkers? Well then, why not share the location you’re shouting from? Seriously, there are lots of situations you’d want people to know where you are. Going to a concert, meeting up with friends? Don’t forget that you can attach your location to any shout on your Shout’Em network.

Integrate videos and photos

Videos, photos, multimedia?! Copy the link and paste it to your shout. Better yet, upload the photo you want to share and have it online instantly! Doing this is actually quite simple. When shouting, just click on Link, Photo or Location.

Your Blog / Website

Have a blog, website,…? You can add your network in seconds:

Your user feed

User feed-ing?!

Want to embed your shouts to your blog? Click on the Widgets link in the bottom of your Shout’Em network of choice and find the User feed code under “Widgets”. Paste the code on your site and there you go – you’re in two places at once… or at least your shouts are!

Everyone’s network feed

There’s more to life than just ourselves, right? Same goes for social media and microblogging. That’s why we’ve made it easier to get your whole network feed on your website in just a few clicks. Once again, click on Widgets in the bottom of your network and find Network feed under “Widgets”. Embed it. Done.

Share button

Shout'Em sharing

If you want to share articles from your website on a Shout’Em network, just get the “Share button”, located under “Widgets” and copy it onto your site. Promote, shout, get people reading.

API for advanced use

Developers, Develo… Sorry, someone already did that. 😉 Our devoted developers, we’ve prepared a Twitter-compatible application programming interface for you. Use it to integrate Shout’Em network into your applications, websites and any great idea you get in the middle of the night. Code and shout! Check out or API!

Social networking

You love the web and you love social network. Understandably. That’s why you love microblogging and use Shout’Em, eh? Well, we don’t want to keep you or your users all to ourselves:

Sync to Facebook

Facebook and Shout'Em

The biggest social network in the world (sorry, Myspace) may require your attention. If you use Facebook, make the most of it and sync your shouts to your Facebook statuses.

Get to Ning

No matter if you’re using Ning for your social network or migrating to Shout’Em, you can get your shouts or your network shouts on Ning. Just click on Widgets in the footer of your network and then find the widgets you need under “Ning”.

You’re on your way to becoming a Shout’Em power user and having your network featured on the homepage of Shout’Em. What are you using to power up your microblogging?

Reblog this post [with Zemanta]

Send an SMS with Shout'Em

Out of the house, without a web connection, yet still want to update your Shout’Em network? Now you can – via SMS! You’ve updated your statuses via the web, Ping.fm, Twhirl,… Now it’s just a matter of texting from any mobile phone! Here are some fast facts:

  • Send shouts via SMS from any mobile phone;
  • Updates appear on the Shout’Em network where you setup your phone.

While Shout’Em doesn’t charge you for this feature, your mobile-service provider’s text messaging rates do apply. The SMS feature is still in testing and supports only one number for sending your messages for now. However, expect updates in the near future.

Is Your Mobile-Service Provider Supported?

Check the list of supported providers. Carriers from countries all around the world are supported. For the US, for example, the supported carriers are AT&T, T-mobile, and a dozen others…

Now let’s set you up:

How to Setup SMS Shouting

Go to the Shout’Em network for which you want to setup SMS updating for and click on Settings. Now select Phone.

Setup Your Phone

Setup Your Phone

Send the provided code to the phone number +447797882315. Let us confirm your phone, and after we do, you’re all set.

You're set!

You're set!

Add the number +447797882315 to your address book and from now on – update your Shout’Em network status via SMS!

What’s next?

Shouting is getting easier and easier… We know you love e-mail, so we’re preparing e-mail updating for the fall. That’s right, you’ll be able to update from your e-mail client! How you do you update Shout’Em statuses?

3 Steps to Designing Your Shout'Em Network

After setting up your Shout’Em network, you’re all ready to start customizing it’s design. If you’re really into web design and know CSS/xHTML, you can always add your own css style settings. If you’re not all that comfortable with dealing with the CSS frontend – don’t worry. Shout’Em gives you an easy to use, yet advanced design editor. You can choose the colors and fonts you want, upload your header and much more. Let’s get to it….

1. Choose Your Style

Choose Your Style

Choose Your Style

You can choose between 15 high quality skins (more skins coming soon!) for the core look of your Shout’Em community. Customizing the chosen skin is then just a matter of tweaking the settings like the color of a headline,  etc. How to choose your skin:

  • Go to Shout’Em and choose your network from My networks;
  • Click on Skins and choose a light style like “Elegant Gray Paper” or a dark one like “Elegant Monsters;
  • Save it!

2. Tweak the Details

Tweak, Tweak, Tweak,...

Tweak, Tweak, Tweak,...

In Skins, click on Settings. Here you can tweak every visual detail of your Shout’Em network settings for the header, body, shout, ads and background. You can change the colors of each of the elements with the color picker. You can choose the size, as well as the type of font you want to the content to be displayed in. As far as the fine details, upload a 16×16 px favicon of your choice which appers in a browser’s address bar.

3. Edit Your Images

Prepare Your Images

Prepare Your Images

Use an image editor like Photoshop or Gimp to prepare the header and background of your choice:

  • The header should be 990 pixels wide and 95 pixels high;
  • The background image can be any size, but if you want the image to be tiled, check “Tile image”.

Design? Done!

Design? Customized.

Design? Customized.

In a couple of steps, with a few images, we’ve customized a network from header to footer. Here’s how it looks! Have you tweaked your Shout’Em network yet?

Reblog this post [with Zemanta]

Microblogging News & Tips

The ShoutEm blog is your guide to all things microblogging. Founded by the team of ShoutEm,which lets your create your own microblogging network, this blog gives you the latest news, guides and insight into microblogging and the mobile web! Get our RSS feed to stay up to date!






RSS Follow us on Twitter

  • An error has occurred; the feed is probably down. Try again later.