Archive for the ‘Widgets’ Category

The MyMic Facebook application lets you post audio updates to your Facebook profile or onto your friend’s Wall. You can post up to five seconds for free and there are paid options to post longer messages.

I ran into the application’s creator, LeaAnna Hernandez (@MyMicApp on Twitter), during a #LATISM Twitter chat. I had asked the Twittersphere if there were any Latino/Latina startup techies out there and LeaAnna “raised her hand.”

The application caught my eye because:

1. It is super easy to use. There’s a tutorial at the end of this post just in case you have questions.
   
2. Your friends don’t have to install anything to listen to your messages.
   
3. My Facebook friends started asking about it once I posted my first message. I love attention.
   

I also liked the recent press release where LeaAnna says,

“Sometimes we don’t want to be on camera. Maybe we’re having a bad hair day or the lighting isn’t the most flattering. With MyMic, none of that matters. Users, musicians, celebrities can easily record updates in their pajamas and no one would know the difference”.

I caught up with LeaAnna for an interview

JPL: Why did you select audio?

LH: I come from the radio industry…specializing in advertising. So i wanted to build an app that could marry radio with social. Businesses run commercials on radio stations. So I built the app for businesses to be able to run “social commercials” on Facebook.

JPL: I think I saw some stats that only one in a thousand YouTube users actually records and uploads a video. What do you think that ratio will look like for audio?

LH: I think that there are a lot of people that are camera shy and don’t want to be on camera. It literally is a production, having to get the right angle from the camera…nice lighting….good backdrop maybe.

With audio, it’s much easier and faster so I am inclined to think that it would be better but it’s still so new that only time will tell.

JPL: I tested the application and was able to post to my profile and to a friend’s Wall. Is there a way to post MyMic messages to the Facebook pages that I administer?

LH: In 2 weeks we are adding the feature to post recordings on Fan pages. I “like” your thinking.

JPL: Do you see businesses using MyMic the same way they use radio? Will they even start off using the same on air commercials?

LH: I think some brands will initially use their same radio ads. But others will get more creative.
For example, one advertiser I know is looking to create a promotion where they ask their friends to come up with a new slogan for the brand and record with MyMic. (This is another reason why the post on fan page functionality is important ). And they have an incentive attached to the promotion.

How does MyMic work?

MyMic is extremely easy to use. All you have to do is:

1) Go to the MyMic Application page on Facebook.

2) Click on the “Start Recording” button.

3) The little Adobe Flash Player Settings alert box will appear. Click on “Allow” to give the application permission to access your microphone.

4) Now you’re ready to record. To post a five second audio message for free, just click on the little red record button and leave your message.

5) Click on the “Publish” button and you’ll have the option to set a post Title and add a Message.

6) Decide if you want to post to your Facebook Profile by clicking on the “Save and Publish” button or post on a friend’s Wall by clicking on the “Send To A Friend” button.

Once you click on the “Save and Publish” button, you’ll get the “Post To Your Wall” dialog box.

From the “Post to Your Wall” dialog box you can decide who can see this post. You can choose to make it visible to Everyone, Friends and Networks, Friends of Friends, Friends Only, or Customize things.

Your Facebook friends can now listen to your recording without having to install any kind of application.

If you’d like to send the audio message to specific friend, you can select the “Send to a Friend” option when you publish. When you do this, you’ll be able to search and click to select the message recipient. This will post the message to their Wall. (The application does not allow you to post private messages at this time.)

I like the way the application allows you to filter then select friends. As you type in letters, the little picture list below filters your friends. This is especially useful for people who have a ton of friends.

At this time, you’re only allowed to post to the Wall of one friend and there’s no option for tagging other people.

Final Thoughts

I like the simplicity of the MyMic app and already have a lot of ideas on how to use it for Facebook promotions. I think this will be a nice utility for companies, Facebook page admins, and heavy duty content creators. It will be interesting to see if removing the “bad hair day” factor, as it exists with video, will encourage “regular” Facebook users to take on a new medium. As LeaAnna says, “only time will tell.”

Ok, it’s time to test out MyMic Application then report back here to leave your feedback. Will MyMic catch on? Was it easy to use? Did your Facebook friends like it and ask about it? Come on back and share with the other readers!

Generating a “group picture” of your Twitter followers makes for a great visual for your Twitter background or for blog graphics.

I just ran into at tool called Twitter Mosaic which allows you to see either your followers or your friends (those you follow that follow you back).

It looks like the tool only captures about 100 followers then tiles them. So if you’re following a gazillion people then they won’t all show up.

You can also create a coffee mug or T-shirt or other products using the tool. I like the additional message on the shirt, “Are you following me?” Well are you?

I use Google Analytics to track activity to and from my blog. Unfortunately, there are a lot of holes in that process, especially related to Twitter clickthroughs.

• First, some users bookmark the page, then revisit the site. These visitors are great because they found value in the site and are coming back for more. However, there is no way to tell if someone actually bookmarked the page or if something else happened.
• Other visitors arrive here by clicking on a link from a mobile Twitter application. Several of these applications remove the “referrer” information which causes another question mark when I go to check stats.
• If a visitor is using Internet Explorer and clicks through on a link from a site that uses a JavaScript popup, then the referrer information is lost. This sounds like a minor case but if you’re doing hardcore tracking to drill down on a marketing campaign’s ROI, this factor can be maddening.
• Lastly, if a visitor clicks on the Tweet Button and posts a link to Twitter, the URL is “automagically” shortened via Twitter’s link service (http://t.co). If a user clicks on a tweeted out link, you’ll know that the visitor came from Twitter but you won’t know where the link originated. Did a user get there from clicking on a Tweet Button link? Did someone cut and paste the blog post’s URL from the Web browser into a tweet? Inquiring minds want to know.

The Benefits

Before I started using this Google Analytics tracking technique, 16.8% of my traffic was showing up as “Direct Traffic.” After I started tracking Tweet Button clicks and Feedburner subscription clicks, that number went down to 13.45% and a new “Other” figure emerged.

This is awesome because now I can examine the behavior of visitors who click on the Tweet Button. Do Tweet Button visitors stay longer, visit more pages, or take key actions? Now I can answer some of these questions when before it was a mystery.

Because a good chunk of my blog’s traffic comes from Twitter interactions, you can see that the TweetButton clicks are in the site’s top 10 Traffic Sources. I can also see individual stats related to these visitors such as Bounce Rates, Time On Site, Goal Conversions and more.

The Hack

We’re going to address the last case with this next hack. In order for this to work, you won’t be able to use the standard Tweet Button plugin. We’ll have to add the button by hand.

1. Go to the Google URL Builder Tool page.
2. Enter your site’s URL.
3. Enter the Campaign Source, Medium, and Campaign Name. I used “Twitter”, “TweetButton”, and “Blogpost” respectively.
4. Click on the “Generate URL” button. This will build a link just below the button.
5. Copy the link. We’re mostly concerned with the end of the link, starting with the “?” mark.
6. Paste this code into your theme’s Header or Footer template files. I placed the code just before the < /head > tag in the Header.
   [php]<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>[/php]
7. Configure your Tweet Button HTML code as in this example (for WordPress.org blogs): [php]<!–Twitter tweet button–>
   <a href="http://twitter.com/share"
   data-url="<?php the_permalink(); ?>?utm_source=twitter&utm_medium=tweetbutton&utm_campaign=blogpost"
   data-via="jesseluna"
   data-text="<?php the_title(); ?>"
   data-related="niceblog:My Blogging Lab"
   data-count="vertical">Tweet</a>

   <!–/Twitter tweet button–>[/php]

   The main “hack” comes from the data-url parameter value where we add the Google Analytics formatted tracking parameters, just after the Permalink. This way, when Twitter shortens the link into it’s t.co format, the link value will contain the tracking information.

   In the above example, “data-via” is the Twitter user name that will appear on the tweet as “via .” “Data-text” is the text I want to display with the link.  In this case I’m displaying the post’s title.  “Data-related” is an optional related account that can be displayed. In this case I’m showing my blogging Lab account, @niceblog. The “data-count” value indicates how you want the button to appear on the screen. I chose a vertical format. You can see all the options on the Twitter Tweet Button blog page.

8. For WordPress.org blogs, paste the edited code into the Page, Single Post, and Main Index template files. I added the button just before the blog post content, after the title and date/author section of the templates. This will vary based on your preference and on other tweaks you’ve made to your theme.

I tried hacking Posterous and Tumblr blogs but the built in URL template tags kept blowing away the parameters once the Tweet Button was called. If you figure out how to do this please drop a comment and I’ll update this post.

Review

We just learned how to tack on a Google Analytics parameter to Tweet Button clicks on a WordPress.org blog. This will help you connect the dots on your online marketing and analysis activities.


If you find this useful, I’d be interested in how and why you would use it. Are you a marketing manager, a small business owner, or a code hacker? I’d love to find out.

You don’t have to buy a book and take a seminar or ever buy a fancy blog theme to crank up your blog’s SEO Super Powers.

These top tips will help you zoom up the organic search rankings without breaking a sweat.

1. Use friendly post and page URLs for your new blog.

Quick Note: This tip works best for new blogs. See the BIG NOTE at the end of this item.

When you set up your blog, you will have the option to configure the way your page and blog post URLs are formatted. Search engines love URLs that contain meaningful and related keywords.

Good: http://< mydomain >/awesome-blog-post-title-with-keywords

Bad: http://< mydomain >/?p=45

The standard WordPress.org custom install defaults to the “Bad” URL structure. If you want to drive search traffic to your blog, switch the structure to one that includes the post’s title. In WordPress, you can change the settings from Dashboard > Settings > Permalinks.

In Tumblr, Go to Customize > Advanced, then scroll down and check on the “Use Descriptive URLs” checkbox.

Posterous has an SEO-friendly URL structure by default. This is an example of a Posterous URL: http://jesseluna.posterous.com/curating-tweets-on-flipboard-by-using-twitter. The URL is friendly to read and search engines like that.

Big Note: If you’ve had your blog for any length of time, changing your URL structure can have a huge negative traffic impact. Search engines will have already combed through your blog pages, indexed things and added them to search results. If you’ve had your blog for a while but don’t really care about past “traction” on search engines, go ahead and change the structure.

2. Use targeted keyword terms in your blog post titles.

Try to use one or two target keywords per blog post title. If you have a blog focused on non-profits then “How to talk to small nonprofits: A guide for vendors” is a great title. The title hits on two key terms, “nonprofits” and “vendors.” A Web search over those two terms would likely position that blog post on page one of search results.

An additional tip is adding a combination of not necessarily related keywords together. For example, I did a post on a Tweetdeck’s ability to post to Tumblr and now that post shows up in the number 3 spot for the search term “Tweetdeck Tumblr“, which ranks higher than tumblr.com, second only to Tweetdeck.com.

3. Use “Alt” tags on images.

Every time you use an image on your blog, add meaningful text to the “ALT” tag.

This is the structure of an image tag in HTML:

< img src="my-awesome-image.jpg" alt=”My-awesome-alt-tag-description” />

[Note: in this and other HTML samples in this post, I'm inserting extra spaces at the beginning and end of the text to keep WordPress from rendering the code. Just a warning in case you do any cutting and pasting.]

When search engines parse through your web site, they index image Alt tags. When more of your site is indexed, that means there’s more of a chance your site will show up for related searches.

Alt tags are also very important for accessibility reasons. Meaningful tags give blind and visually challenged readers a description of the picture which can help with context.


In WordPress, you can set the image Alt tag when you select an image:

In Tumblr, the “Caption” field in the Photo Upload tool will be the image’s Alt tag.

Posterous – As far as I can see, there is no way to set the Alt tag on a Posterous blog post image. Bummer.

4. Set “keywords” and “description” meta tags

Meta tags are bits of information that may be added to Web pages to help describe the contents of the page. The contents of the tags aren’t displayed on the page but search engines use the information in the tags to help rank pages and to help display them properly in search results.

I never meta tag I didn’t like. -Old webmaster’s joke

The two main meta tags are the “description” and the “keywords” tags.


Description meta tag
The HTML for the meta tag will look something like:

< meta name="description" content="This is my awesome two to three sentence, keyword-rich, description of this page. This is my second awesome sentence." />


If you want to get crazy with the description, you can use Google’s Webmaster Tools to get feedback on whether you tried to jam too much information into your description meta tag.


Keywords meta tag
Here’s the HTML for the keywords meta tag:

< meta name="keywords" content="Awesome-keyword-one, Awesome-targeted-keyword-two, Awesome-descriptive-keyword, Awesome4,Awesome5,Awesome6" / >


You will add highly relevant keywords instead of my “awesome” ones above. The keywords should be highly related to that specific web page and to the site. You don’t want to put too many keywords there. I usually keep the list to under 20 unless there are 25 products on the page or something like that in which case I list them all.

If you’re not sure which words best describe your page, you can use an offbeat tool like Wordle.net to visualize the page’s top keywords.

The image below is a Wordle.net keyword visualization of the YouTube Adds New iPad-Friendly HTML5 Video Player blog post. I copied the post’s text, went to the Create tab on Wordle.net then pasted the text into the “Paste in a bunch of text” field and ran it.

The diagram points out that the main page keywords were “player”, “html5″, “YouTube”, “Video”,”iPad”, and “Embed” because they were used the most in the post. Of course, if you have special target keywords that should be associated with the page, you’d want to list those as well in your keywords meta tag.

WordPress.org custom install blogs
In WordPress, to add meta tags you need to add a plugin that allows you to either set the meta tags or “builds” them dynamically based on some criteria. The most popular plugin is the All in One SEO Pack. This plugin is available from the WordPress Plugin Directory. Once you install and activate the plugin, you can set it to build meta tags for each post based on the post’s tags. There are also a ton of other knobs and do-hickeys that you can set but describing them all is beyond the scope of this post.

Tumblr
If you are using a Custom Theme setup, you can set the meta tags but only on a global scale. In other words, you can’t set them on a per post basis. You can set the meta tags by going to Customize > Theme then setting the meta tag somewhere between the opening “< head >” tag and the closing “” tag.

Posterous
Posterous allows for custom meta tags but, like Tumblr, the tags can only be set on a global scale, not per post. You can set the meta tags by going to Settings > Look and Feel > Edit Theme > Advanced. Expand the area and you’ll see a couple of other meta tags. You can add your keywords and description meta tags immediately below those.

Review

We just learned how to use four key SEO tips and tricks to boost your search engine rankings and attract more site visitors. These techniques work with the content, not the other way around. You should never compromise your writing to make things more SEO friendly.

I will be adding more SEO tips in the comments over time (I didn’t want to overload you with this initial post). Feel free to comment and to leave your own tips and questions.

This post was made to be shared with the world. If you like it, set it free and share it.


Additional Resources: Google’s Search Engine Optimization Starter Guide (PDF, 560KB)


Photo: Purchased via iStockPhoto

YouTube announced a new HTML5 video player that works on the Apple iPad device. The player is smart enough to know whether it can display Flash or if it has to switch to HTML5 mode for a non-Flash enabled device.

I tested the new player against the regular YouTube player on an iPad and the new player still needs some work. The new player takes a longer to load, has some funky behavior (a duplicate window appears below the player), and the screen is bouncy when the player isn’t set to fullscreen.

I can see why the new player isn’t available from the regular video page yet.

Furthermore, in order to get the HTML5 version to load, site visitors must have gone to the YouTube HTML5 page and opted in as an HTML5 Beta tester.

This player is basically in development mode. I wouldn’t rush out and start changing all your embed codes but it is worth testing out, especially if it can help you with an existing issue.

This is sample code to embed the new player:

<iframe type=”text/html” width=”640″ height=”385″ src=”http://www.youtube.com/embed/VIDEO_ID” frameborder=”0″>

“VIDEO_ID” is the ID of the video which looks like an encrypted string. For the videos below, the ID is “FmWNwJRVK_g.”

I embedded a video using the new HTML5 player and also using the standard YouTube player to test on the iPad. I did this for my test but feel free to do the same and test it via your desktop/laptop and via your mobile device or iPad. Remember to opt in to the YouTube HTML5 Beta if you want the player to show up…or you’ll only get a black box in its place.

The New HTML 5 player

The standard YouTube embed method

What do you think? Is the new player useful yet? Will this solve any browser or platform issues for your videos?

Facebook Pages allow businesses and individuals to create rich branded pages within Facebook. Every major brand in the world is running to build engaging and “sticky” pages on Facebook, because that’s where the people are.

Are your customers, non-profit supporters, constituents, and neighbors on Facebook? You betcha. So why not give them an opportunity to connect with you and your brand?

This tutorial will show you how to get started on building your own Facebook Page (I refer to them as “Fan Pages” in the video). This is Part One of the Facebook Fan Page project so make sure you bookmark this page, subscribe to the email blog posts, and/or subscribe to the RSS feed to keep track of further developments.

Your feedback is golden. I love Comments like a fat kid loves cake.

And don’t forget to view the full Transcript below.

Transcript