Tag Archives: Blogging

Social Media Share Bar 2.0

12 Replies

Last year I wrote about my search for the perfect social media share bar and I soon discovered I wasn’t the only publisher looking for a more functional and elegant solution. 11 months later and it’s still in my top 5 most popular posts. Since that time Facebook and Twitter have introduced new buttons and pretty much everything has changed so it’s time to share my new and improved share bar recommendations

Share bars is my term for the ubiquitous list of icons inviting a reader to tweet, like, or otherwise share a particular post. The options range from hundreds of WordPress plugins to more advanced hand coding and since I fall somewhere in between I think there is something for everyone here.

The Problem

Many of the most popular solutions don’t create a good user experience. If you are creating content worth sharing why not close the deal by making it easy to share.

Here’s a few examples of what’s wrong:

  • TweetMeme Retweet – This is likely the most popular RT button on the web but requires too many clicks to authorize their app just to RT. (For a much better RT button see Topsy’s solution but I’ll discuss why I’m using the Twitter tweet button below)
  • Wibiya & Meebo – Overlay bars jumped on the scene this past spring but the sharing process is often weird & distracting.
  • 99% of WordPress share plugins – They’ll get the job done but they don’t offer enough features or they create a cluttered appearance.

Yes I’m picky but I want simple, elegant, and feature rich.

The Solutions

The Easy Way

I only recommend 2 plugins for creating sharebars:

  1. AddtoAny – I love this plugin. AddtoAny offers a ton of customization options and it’s easy to create standalone services. See it in action below this post, click the share_save_171_16 button at the end of this post.
  2. Sexy Bookmarks – SB is very well designed and @Shareholic has continued to improve its functionality. They don’t offer a true Facebook “Like” button but otherwise everything you need is offered. sexybookmarks

More Advanced & Mo Betta

If you are comfortable with a bit of coding then you should take advantage of the more advanced options offered through Facebook and Twitter’s native services.

As I mentioned above I’ve been very pleased with Topsy’s RT button but I recently replaced it with Twitter’s native solutions for 1 major reason: I can suggest that you follow me after retweeting one of my links. That is a huge! (Feel free to retweet this post and see for yourself). If someone has read and tweeted your post  there is a very good chance that they will follow you as well.

My final solution for a share bar is to use a combination of Facebook Social plugins, the Twitter Tweet button, and AddtoAny.

Creating a Facebook Like Button

  1. Visit the Facebook developer Like button page.
  2. Choose your style, width, color, & face preferences. The example code below uses the box style, width of 60px, light color scheme. The options are up to you but the php url is critical.
  3. If you are using WordPress just paste the code into your single.php file, If you are using the Thesis theme [affiliate link] paste this code into your “thesis_hook_after_post” in OpenHook
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=box_count&amp;show_faces=true&amp;width=60&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:65px;" allowTransparency="true"></iframe>

Creating Twitter Button

  1. Visit the Twitter Goodies Tweet Button page
  2. Choose button style and add your twitter username without the @ to the Recommended people to follow section. Again the options in the code are clear.
  3. If you are using WordPress just paste the code into your single.php file, If you are using the Thesis theme [affiliate link] paste this code into your “thesis_hook_after_post” in OpenHook
<a href="http://twitter.com/share?url=<?php urlencode(the_permalink()); ?>&amp;counturl=<?php urlencode(the_permalink()); ?>" class="twitter-share-button" data-count="vertical" data-via="tsudo">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Adding AddtoAny

Finally to cover digg, stumbleupon or everything else just install the AddtoAny WordPress plugin, set your display options within the plugin settings and add the following code.

<?php if( function_exists('ADDTOANY_SHARE_SAVE_KIT') ) { ADDTOANY_SHARE_SAVE_KIT(); } ?>

I’ve added some div tags for formatting but the final code should look something like this:

<div style="clear: both; overflow: hidden;">
<div style="float: left; width: 75px; height: 75px; border: 0px red solid;"><a href="http://twitter.com/share?url=<?php urlencode(the_permalink()); ?>&amp;counturl=<?php urlencode(the_permalink()); ?>" class="twitter-share-button" data-count="vertical" data-via="tsudo">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div style="float: left; width: 75px; height: 60px; border: 0px blue solid;">
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=box_count&amp;show_faces=true&amp;width=60&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:65px;" allowTransparency="true"></iframe>
</div>
<div style="float: left; width: 200px;height: 60px; border: 0px red solid;">
<?php if( function_exists('ADDTOANY_SHARE_SAVE_KIT') ) { ADDTOANY_SHARE_SAVE_KIT(); } ?>
</div>
</div>

What is your favorite solution for inviting readers to share your content? Is there a plugin better than the ones I’ve mentioned?

If you have questions just leave a comment below. If you found this post useful feel free to share & subscribe and let’s hope it isn’t outdated by 2011.

Chris Brogan’s insights into Social Media Marketing

2 Replies

@ChrisBrogan (ChrisBrogan.com) joined @MackCollier (MackCollier.com) for #BlogChat this evening to share tips for marketing and promoting your blog through social media and while it was focused toward blogging I think the tips universally apply to most any social media strategy.

The tweetstream was a bit crazy but as always Chris shared some well reasoned and practical advice. Here’s the best of what he said.

Question 1: How can we decide which social sites will help our blog? What’s the strategy?

  • It depends on what you want from your blogging. Is it business or just attention? If it’s business then targeting helps.
  • One tool to use to find where your customers are active is Flowtown.com. Stick in your prospects/customers email addresses and figure out where most folks spend their time. If you need to develop a list try starting with something like Alltop.com, find relevant topics and start commenting.
  • One thing NOT to do is only use LinkedIn for business or Facebook only for fun.
  • Once you find WHERE your marketplace is spend some time understanding how that environment acts. For instance Digg doesn’t like self-promotion, other sites don’t mind.
  • If you are blogging for business its about knowing where you buyers hang out.
  • Lastly, NEVER shove your updates all over the social networks. Make each environment its own beast. Be selective

Takeaway- Find where your people are active, learn the community expectations, and mix it up. A personal topic may be a conversation hook that leads to a new client or reader and you might find discover shared interests with existing business relationships.

Question 2: As far as being active on other sites any tips for how many we need?

  • It’s not a number of networks we need it’s about finding how many is too many. 3-4 networks is usually a lot to manage.
  • Remember the goal of using networks to enhance your blog is to thread your ideas into other like minded streams.
  • The number 1 social network you’re neglecting: email marketing. 93% opt into a daily brand relationship via email.

Chris also reiterated a phrase I learned from him and preach often,

You live and die by your database. – @JeffPulver

Takeaway- Don’t overwhelm yourself with numerous networks. Cultivate don’t neglect. Prune if needed. Never forget about the reach of email and the importance of building a database of contacts & readers.

Question 3: You talk about outposts, What does that mean?

  • Outposts are off-main-site places like Twitter, Facebook, LinkedIn, & Forums
  • I recommend spending 50% of your social time on outposts, making relationships, prospecting, and building connections.
  • Promote others 12:1 over yourself
  • Outposts are about meeting people on neutral ground, where THEY are.
  • Do good things elsewhere. Promote great causes on Facebook. Do TONS of not-promoting-you with no hope of reciprocity.

Ask yourself this: what’s the Goal of your blog?” Don’t lie Sales? Thought leadership? A channel? Media property?

Takeaway- It’s just like learning to “work” a room, If you want someone to be interested in you then show genuine interest in them. Doing good things is invaluable. A personal example, I would have never followed @TysonFoods then I found out how they use social media to promote their work with food banks and feeding the hungry. Instantly I’m moved from apathy to being a fan.

It was a great discussion and I appreciate @MackCollier for hosting the chat and of course @ChrisBrogan for sharing his thoughts. If you want to read the full stream see the #Blogchat transcript. Blogchat is held every Sunday night from 8-9CST.

What the heck is Tumblr?

Leave a reply

Tumblr is a free, simple, and highly customizable blogging platform.

Why should you consider tumblr?

If you are looking to start your first blog or create a niche blog Tumblr might be the place to start.

The Pros:

  • Very easy content posting
  • Great design options
  • Active social community

The Cons:

  • Doesn’t provide a way to export your content if you ever decide to migrate your blog
  • Doesn’t have the plugin development of platforms like WordPress

For a more in depth comparison see How to Start a Blog.

How to get started

  1. Sign up for your free account at Tumblr.com
  2. Choose your tumblr blog name (optionally here’s how to use a custom domain name)
  3. Choose your theme from the tumblr theme garden
  4. Start posting

Posting content

The purpose of your tumblr blog will be a deciding factor in how you choose to share content. Tumblr offers a ton of options

  • To share content from the web try the bookmarklet
  • Creating a mobile blog? Use the iPhone App
  • To share original content use the web interface
  • Misc: tumblr supports email & IM posting as well as Call in Audio

Find links to all these methods on the tumblr goodies page

The Social Aspect

Tumblr goes beyond simple. It is also social.

  • Following: Most tumblr blogs have a follow button in the top right corner, just click it to add this blog to your tumblr feed. Then when you login to tumblr you can simple scroll through the posts from sites you’re following.
  • Like: Click the heart in the corner and let the author know you liked this post.
  • Reblogging: A simple way to repost content to your own blog. It gives credit to the blog you found it and it how you can help make a post viral.

More ideas…

Tumblr is great for individuals but lately some brands have discovered its power. It can be a great way to add a quirky side to your corporate image.

Check out the Newsweek tumblr blog and the Huffington post recently created a comedy blog on Tumblr.

You can find more great tumblr blogs in the directory and here are a few of my favorites to get you started.

  • the adfeed – Social Media and Advertising feed curated by @BryanJones, Even if we weren’t good friends I’d tell you this is THE feed you should be watching for the best social media info around.
  • Love All This – Awesome examples of design from products to print
  • ExtraAwesome – Self explanatory. Awesome stuff found by @BryanJones
  • I Hate My Parents – Great pics explaining why therapy is so popular
  • Unhappy Hipsters – wry, ironic, hilarious, brilliant
  • Robert A Blake – @RobertBlake might be the reincarnation of Steve McQueen if Steve was a web guru. He shares great stuff and he’s a tumblr expert.

And of course I’ve got to pimp my own

If you decide to start your own tumblr blog make sure and leave a comment or send me a tweet so I can check it out. All the cool kids are doing it.

And yes I’m aware that I broke some sort of rule regarding the number of bullet points in a blog post.

Addthis Integration for WordPress & Tumblr

4 Replies

Since I started creating my own social media bar I’ve found that I really like AddThis share button. If you are interested in adding “AddThis” to your WordPress or Tumblr Blog here’s the code.

Integrating Addthis with WordPress (without plugin)

<!-- #### Start Addthis WordPress Integration #### -->
<a class="addthis_button" href="http://addthis.com/bookmark.php?v=250&amp;username=YOUR ADDTHIS ID HERE"
addthis:url="<?php the_permalink(); ?>"
addthis:title="<?php the_title(); ?>">
<img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- #### End Addthis WordPress Integration #### -->

Integrate Addthis to Tumblr

<!-- #### Start Addthis Tumblr Integration #### -->
<script type="text/javascript">var addthis_pub="YOUR ADDTHIS ID HERE";</script>
<a href="http://www.addthis.com/bookmark.php?v=20" onmouseover="return addthis_open(this, '', '{Permalink}', '{Name}')" onmouseout="addthis_close()" onclick="return addthis_sendto()">
<img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<!-- #### End Addthis Tumblr Integration #### -->

For more options see the AddThis customization page.

Create your own social media share bar

16 Replies

Update: A lot has changed since last Nov check out my Social Media Share Bar 2.0 for the latest. – Wed 10/27/2010

There is no shortage of Social Media sharing plugins for WordPress but they all leave a bit to be desired. Perhaps I’m too picky but here is what I’m looking for:

  • Native Tweetmeme integration: Tweetmeme is a recognized leader in the market. They provide good info and OAUTH authentication. Everyone knows how tweetmeme RTs work.
  • Native Facebook sharing
  • Minimal design: I don’t want 20 icons or large buttons that interfere with my layout.
  • Widely adopted usage: I want to give people what they expect. If they are unfamiliar with the sharing process or find an unexpected step it may prevent them from sharing. Make it easy, meet their expectations.

The Problem

I’ll save you the rant about but here’s an example of what you can encounter:

  • Sharethis, asks for a user’s twitter ID & password to share a link. What? Any service that requires a twitter password should be immediately discarded. They say they are working on changing this, we’ll see.
  • The Meebo share bar is a newcomer that sports a very slick interface but the Twitter URLs are awful. If you shared Robert’s post via Meebo the twitter URL is http://go.meebo.com/scobleizer.com/1 which is a whopping 36 characters. Someone please tell Meebo that bit.ly has an API.

In short, before you decide on any plugin make sure you understand and test the user experience.

The Solution

My solution, forget the plugins, it’s time to code your own. (Skip to end for code w/ out explanation)

sharebar

I discovered this great post from Art of Blog: Add Slick Social Media Icons to Thesis.

This is exactly what I was looking for. A simple toolbar with just a few services and native integration. Art of Blog shares the code and css layout that they used to create their social bar but they missed a few key elements.

If you implement their code “AS IS” the URLs and titles refer to your homepage not your posts. So giving plenty of credit to them for their good work and sharing it with us let’s modify the code a bit.

*Note: I’m not concerned with adding Digg or Stumble buttons. I assume users of these sites are very adept and probably use bookmarklets or toolbars for sharing. Make it easy for twitter and facebook and the others will take care of themselves.

Tweetmeme Code

Tweetmeme has good documentation and code examples that will offer more detailed instructions. They also offer a WordPress plugin that does a pretty well but in creating a custom bar it’s probably easiest just to use the straight code. Here’s the corrected Tweetmeme RT code I’m using.

<!-- Tweetmeme RT Button BEGIN -->
<div class="social_button tm">
<script type="text/javascript">
tweetmeme_source = 'YOUR_TWITTER ID';
tweetmeme_style = 'compact';
tweetmeme_url = '<?php the_permalink(); ?>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<!-- Tweetmeme RT Button END -->

The three attributes that we need to define are

  • tweetmeme_source – This is your Twitter ID (Line 04)
  • tweetmeme_style – Specifies the compact style button (Line 05)
  • tweetmeme_URL – Specifies the permalink URL of the post (Line 06)

Facebook Share

Facebook offers a nice wizard to build your share button. Choose the custom URL option and paste in <?php the_permalink(); ?>, this may very slightly depending on your blog. The resulting code looks like:

<!-- Facebook Share Button BEGIN -->
<div class="social_button fb">
<a name="fb_share" type="button" share_url="<?php the_permalink(); ?>" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<!-- Facebook Share Button  END-->

AddThis

Lastly, I’ve decided to include AddThis which offers integration with most other services. You’ll need to modify the following attributes:

  • addthis:url  -  permalink URL to your blog post (line 04)
  • addthis:title – post title (line 05)
<!-- AddThis Button BEGIN -->
<div class="social_button st">
<a class="addthis_button" href="http://addthis.com/bookmark.php?v=250&amp;username=YOUR_PUBLISHER_ID"
addthis:url="<?php the_permalink(); ?>"
addthis:title="<?php the_title(); ?>">
<img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=YOUR_PUBLISHER_ID"></script>
</div>
<!-- AddThis Button END -->

CSS

Finally, we’ll need to use a bit of css code to get the buttons to line up well. The css code is:

/* #Social Share Buttons by KnowtheNetwork.com# */
.social { border: dashed #ddd; border-width:1px 0 1px 0; margin: -15px auto 10px; display:block; padding: 3px 0 2px 0px;  overflow: hidden; }
.social .social_button {float: left; display: inline; height: 20px; overflow: hidden;  }
.social .social_button.tm { margin: 4px 0 0 20px; }
.social .social_button.fb { margin: 0 0 0 20px;  padding-bottom:1px;}
.social .social_button.st { margin: 4px 0 0 50px; }
.social .social_button a img { border: 0; padding: 0; }
.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#888;}

I don’t claim to be an expert so if you have suggestions or additions to this code please leave them in the comments and I’ll update the post as needed. If you run WordPress with the Thesis theme just add the code to your “before_post_content” openhook, and the css to your custom styling. If you aren’t running the Thesis theme you really should be. It’s SEO is second to none and customization is a breeze.

I hope this helps you design a social media share bar that fits your specific needs. Enjoy.

Download Custom Share bar code:  PHP / CSS

How to Start a Blog

6 Replies

I want to start blogging. What do I do?

This question is coming up a lot lately. It’s easy for me to forget how many individuals and organizations have never maintained a blog but blogging is seeing a resurgence due in part to social media. Here is my quick guide on getting started and avoiding a few pitfalls.

1. Register a custom domain name

This is a necessity. Having your own domain name provides flexibility, branding, and scalability. I gladly endorse GoDaddy, I’ve been a customer of theirs for years and they are the only place I buy domains. Their pricing, customer support, and domain management features fit beginners and veterans alike. Domain registration will cost you around $9 a year.

Considerations:

  • Get a .com (or .org if appropriate) – It’s tempting to consider other options but realize people will instinctively assume .com
  • Don’t buy all the addon packages, just get the domain name

2. Choose a Platform

There are a ton of great blogging platforms. Blogger, Tumblr, Posterous, Typepad, and WordPress just to name a few. How do you decide?

Do you know how to use FTP?

  • No –> option 1
  • Yes-> option 2

Option 1 – Covergirl (as in Easy, Breezy, Beautiful)

Recommendation: WordPress.com OR Blogger.com

You can’t go wrong with either of these platforms. They are well developed, widely used, and free*. The main advantages of these sites are their rich features and easy editing. Every blogging feature and add-in in the world supports Blogger & WordPress. They also offer great export options when you are ready to upsize.

Create your free accounts and then setup your custom domain name.

Here is a good feature comparison of WordPress and Blogger “Blogger vs. WordPress.com Comparison Chart – 2009”

It’s worth noting that Tumblr and Posterous are good beginner options. They are extremely simple for strict publishing however they have 2 major drawbacks.

  1. Poor feature Integration – A lot of the features and add-ons of the larger platforms aren’t easy to integrate into Tumblr/Posterous. Things like blog rolls, link lists, and commenting add-ins require a lot more coding knowledge to make work.
  2. Export limitations – When you are ready to move your blog these services don’t export functions. Your content is locked into their system.

Option 2 – Some Assembly Required

Recommendation: WordPress.org self-hosted

Hosting your own blog is the only way to go. Self hosting means that you own both the domain name and the web space. Other than a reliable web host I don’t rely on any other service to serve my content.

First, you have to purchase website hosting plan. There are a ton of hosting providers but I’d recommend one of these 3:

Personally I am an ANHosting.com customer and I couldn’t be happier. Their customer service, performance, and management options are great. I’ve never personally used DreamHost or BlueHost but they come highly recommended and they are highly rated.

Second, once you have a hosting provider then its time enjoy the wonder that is WordPress. WordPress.org is the completely free self hosted version of WordPress.com. There is simply no better hosted blogging platform. The interface is wonderful and the options and plugins are limitless.

I won’t cover the installation in detail because many of hosting providers have a simple installation process built in. However, you can always manually install using the WordPress installation guide.

Once you have your domain, a web host, and WordPress install you are ready to go. Just login to your wordpress installation http://example.com/wp-login.php and start blogging.

Here are a few more tips to make your life better.

  • Use Feedburner for RSS – Create a free feedburner account and publish your content through feedburner. It offers good subscription options to your readers and if you ever need to move your blog you can simply update the source URL of your feedburner feed.
  • Download Windows Live Writer – If you can use Microsoft Word you can blog. Live Writer is a free blog writing software and it it makes composing posts so much easier. @DenHarsh has a great setup guide for WLW and WordPress
  • Download Filezilla FTP for uploading/downloading files to your site.
  • Blog regularly (unlike me) twice a week is a good goal.
  • Use Category and Tags – Categories should be broad be few in number <10, tags are specific, add as many as you like.

For further ideas about how to blog well I suggest

If you’d like help setting up your online presence I’d love to help. Just contact me and let me welcome you to the web.