Question

It would be quite useful to start a list useful tips and tricks.

I believe the more we collaborate the more polished and successful our little babies will become.

Answer 1

TwitterFeed.com

This site was referred to me by a friend and I have to say its absolutely STONE SIMPLE to set up and AMAZING all at the same time.

If you have a twitter account then simply create an account on twitterfeed.com (which takes about 60 seconds) and set up your feed(s).

I didn't want to appear "spammy" so what I did was set up ONE feed to post ONE question every 30min. I then used the main feed right off the home page.

TwitterFeed is smart enough NOT to post the same question twice. So its perfectly okay to say "Once every 30min" because it won't post if there's nothing new.

I've been using their default suggestion of "bit.ly" for shrinking URLs because it allows tracking of clicks on your feeds.

So far my feed has posted about 10 questions or so and each of those questions have brought be back 7-12 clicks. I suspect if my site wasn't so specialized it would have brought back more.

I think a site such as moms4mom.com could benefit from this HUGE as there is already a massive following on twitter for moms/parents. (Scott did you get the email I sent you on that a day or so ago?)

In any case... hope this helps everyone. I know its helped me a HUGE deal as I appear to be picking up more and more twitter and linked-in followers.

---

STEP #2 -- Track down the email address for those new twitter and linked-in followers and send them an email inviting them to the site. This is time consuming but well worth it.

Answer 2

Using addthis.com in your site. Here is some info taken from their site :-

Smartest sharing tool ever.

AddThis automatically optimizes itself for each person who visits your site. Every person shares differently, so AddThis custom fits each menu with the services they'll normally use. For example, if a user shares to Facebook and Amazon Wishlist, they will be presented with those first. This logic ensures that your content is always one click away, because the right service is always tailored to the right person.

I dropped the following code in my side bar (apologies for the formatting) :-

    <div class="porthole" id="sidebar-top">
    <!-- AddThis Button BEGIN -->
    <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4aca93301564f061"><img src="http://s7.addthis.com/static/btn/v2/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/250/addthis_widget.js#pub=xa-4aca93301564f061"></script>
    <!-- AddThis Button END -->
    </div>

Answer 3

JavaScript Ninja Tactics

A collection of posts that show you how to use jQuery and other javascript tools to alter the stack exhcange system. CW - So please edit to add links if you see others floating around on meta SE.

• Add class to Questions based on tag-names
• Add icons to your tags
• Change the text used for Formatting Reference
• Remove Code Coloring
• Auto-Tag new questions based on URL I.E. /questions/ask?tags=feature-request+meta

Answer 4

Marketing Tip.

Came across this article on the answers.onstartup.com site. Must read for all you stackexchange owners.

http://www.balsamiq.com/blog/2008/08/05/startup-marketing-advice-from-balsamiq-studios/

Answer 5

Quickly Switch Between Administrator and Unregistered User Accounts

You're logged in as 'Administrator' so you can make changes to your site. But you need to be a "regular" or unregistered user to see the site as they see it.

Use your brower's "Private Browsing" feature to "toggle" back-and-forth between the administrator and anonymous account without ever having to log in-and-out.

While logged in as Administrator:

• Make changes to your site.
• Shift-Ctrl-P to enter "Private" mode
  View changes as Anonymous user.
• Shift-Ctrl-P to switch back to Administrator
  Repeat as necessary....

Answer 6

I'll start with my first one.

Creating a Tips/Quotes section - when your not using the ad section yet.

I have added a clunky bit of javascript that shows famous quotes/tips in the ads section of my site accountingEcho. This is so the site has a little bit more content, until the site is big enough to adverstise.

Here is the code, add it to the sidebar or sidebar-low section. This code shows the quote and the person (in attr) that made the quote (replace X for the number of quotes/tips items you want to use) :-

<script language="JavaScript">
var rand    = Math.floor(Math.random()*X) + 1;
var quote   = new Array();
var attr = new Array();
quote[1]   = "Quote 1.";
quote[2]   = "Quote 2.";
quote[3]   = "Tip 3.";
quote[X]...

attr[1] = "Quote By 1";
attr[2] = "Quote By 2";
attr[3] = "";
attr[X]...
</script>

<script language="JavaScript">
document.write("<h3>'");
document.write(quote[rand]);
document.write("'</h3>");
document.write(" - ");
document.write(attr[rand]);
</script>

Answer 7

If you are interested in getting GoogleAnalytics up and running for your SE site, this may help:

I added GoogleAnalytics to the Footer content area, and it seems to be tracking properly. The analytics report confirms that google is receiving traffic data from my site now.

While it works, I am not sure if the footer placement is a best practice - it just seemed to be one content area that was always present for every page. I'll post a question specifically addressing this topic.

Answer 8

Here's some code to add a custom button in the button bar.

<script type="text/javascript">
$(document).ready(function(){
    var box = $(".nav > ul:eq(0)");
    box.prepend("<li><a href='http://blogs.whenbusiness.com'>Blog</a></li>");
   });
</script>

Answer 9

Further to my part 1 and part 2 posts on pushing SE to the max and inspite of and because of the issues I have recently experienced with my main site, I have created a new domain called Sandbox Stack Exchange that I am intending to use as a test bed for testing new ideas and techniques.

I think there is enough interest and enough capable people within the early beta group users for us to not only share, discuss and ask questions but to try out ideas in a non live / commercial envioronment.

My idea is that we all (maybe by invitation only) become admins of the Sandbox site and can try out ideas and techniques.

I have just added an easy way of adding a Share This Question button (see the button below Share, Save or Shout this Question) on any question. (I spent 2 hours coding it then realised it could have been done in 3 minutes).

Anyhow - I am going to continue with new ideas and trying to get them to work effectively, if you want to come and play, pick up your spade and bucket and join me in the sandbox.

Cheers

Jonathan

Answer 10

Use jQuery to style your tags.

Ben Elder describes using jQuery to style your tags.

You may also use jQuery to style tags according to key words that appear within the tags themselves. This will allow you to have different colors for tags according to the tag name...

Here are the details.

Answer 11

Show number of users on your site.

This was solved by Johnathan Lyon. Here's the solution.

Answer 12

Advertise, and push the ads that get users to stay!

I've put up about thirty different ad versions, and used analytics to see the user interaction with the site. Some ads get users for 30 seconds, some for 4 minutes (this is an average over several users, of course). Keep optimizing your ads.

Answer 13

Add YouTube

This is a neat way of adding You Tube Video to your questions. By Mr Flibble.

If you want to allow [youtube] videoid [/youtube] tags then add this javascript to your .

Answer 14

Move "Add Question" to the leftmost position:

<script type="text/javascript">
    $(document).ready(function() {
        $(".nav").removeAttr("style");
        $("#hmenus div:eq(0)").attr("ID", "LeftNav");
        $("#hmenus div:eq(1)").attr("ID", "RightNav");
    });
</script>

<style>
    #LeftNav 
    {
       float: right;
       clear: right;
       margin: 0 33px 0 0;
    }
</style>

Answer 15

Here is how to change the text on the main navigation buttons (for localization).

Answer 16

Adding a retweet button from tweetmeme. There's also another service from retweet.com if you're interested in that one.

More info Here: http://help.tweetmeme.com/2009/04/06/tweetmeme-button/

<script type="text/javascript">
    tweetmeme_source = 'whenbusiness';
    tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Answer 17

Alternative Tagging UI

Mums4Mum uses a tag cloud, provided by WordPress. This is a nice feature.

Details here

Answer 18

Swap columns:

Add the following to your Custom CSS:

#mainbar
{ 
    float: right;
    clear: right;
}

#sidebar {
    float: left; 
    clear: left;
}

Don't forget to massage the margins/padding to make it more seamless.

Answer 19

Styling Individual Questions

This is not my idea but a cool way of changing specific question based on it's content.

moms4moms 'halloween' style

Answer 20

Globalise Your Site

Translate your web site using google translate.

Drop the following code ("like it's hot") into one of the html customization sections.

   <div id="google_translate_element"></div><script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en'
      }, 'google_translate_element');
    }
    </script>
    <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer 21

Add qTip Tool Tips!

This took a bit of time to get right and I needed help from other SE users.

In your head tag drop in the js from the qTip Download Page (I must have copied the debug version by mistakes, oops. This still works but probably better to get the optimized version) - Also is there a way of saving this source in a .js file that is stored in a folder, on the server ?

<script type="text/javascript">
/*!
 * jquery.qtip. The jQuery tooltip plugin
 *
 * Copyright (c) 2009 Craig Thompson
 * http://craigsworks.com
 *
 * Licensed under MIT
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Launch  : February 2009
 * Version : 1.0.0-rc3
 * Released: Tuesday 12th May, 2009 - 00:00
 * Debug: jquery.qtip.debug.js
 */
(function($)
{

Then add the following code underneath the qTip source code (apologies for the formatting, I'll sort out later) :-

// Create the tooltips only on document load
$(document).ready(function() 
{

   // Set the a title to the href value
   $('#hmenus .nav a').each(function() {        
      $(this).attr('title', $(this).attr('href').substring(1));
      });

   // hard wire top tip titles to specific A tags
   $('#hmenus .nav a:contains("Questions")').attr('title', 'See all questions in the knowledge base.');
   $('#hmenus .nav a:contains("Tags")').attr('title', 'These allow you to filter specific questions based on their tag (key word)');
   $('#hmenus .nav a:contains("Users")').attr('title', 'List all Users that are part of the accountingEcho community');
   $('#hmenus .nav a:contains("Badges")').attr('title', 'When you participate on this site you will gain reputation points, these points turn into Badges.  You can use this to impress your peers and become a reputable user');
   $('#hmenus .nav a:contains("Unanswered")').attr('title', 'See all questions that have not been answered yet - give it a go!');
   $('#hmenus .nav a:contains("Ask Question")').attr('title', 'Ask a new question related to Accounting.');

   // Match all link elements with href attributes within the content div
   //$('#content a[href]').qtip(
   //{
   //   content: 'Some basic content for the tooltip' // Give it some content, in this case a simple string
   //});

   // By suppling no content attribute, the library uses each elements title attribute by default
   $('a[href][title]').qtip({
      content: {
         text: false // Use each elements title attribute
      },
      position: { 
         adjust: { 
           screen: true 
      }},
      style: 'green' // Give it some style
   });


});

Rich Seller helped me out with this answer, to a problem I had when setting the 'title' attribute on my links, when non existed.

Mouse over my links to see the full effect.

Answer 22

Adding a simple "Share this" link below the question

(copied from: http://meta.stackexchange.com/questions/1118/share-the-question-link/2579#2579)

<script type="text/javascript">
(function() { 
    function replaceAll(text,strA,strB){while ( text.indexOf(strA) != -1){text = text.replace(strA,strB);} return text;}
    var share = {"html":"<div class=\"ea_share\" style=\"text-align: left;\">\n\t<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\">\n\t\t<tr>\n\t\t\t<td colspan=\"16\" style=\"padding: 0px;\">\n\t\t\t\t<h4 style=\"margin-bottom: 2px\">Epic Question? Share it with others!&nbsp;&nbsp;<\/h4>\n\t\t\t<\/td>\n\t\t<\/tr>\n\t\t<tr>\n\t\t\t<td align=\"center\" style=\"padding: 2px 3px 0px 0px;\"><a href=\"http:\/\/www.facebook.com\/sharer.php?u=UURRLL\" title=\"Click to share this page on Facebook\"><img src=\"http:\/\/profile.epicadvice.com\/images\/sm\/16\/Facebook.png\" border=\"0\"\/><\/a><\/td>\n\t\t\t<td align=\"center\" style=\"padding: 2px 3px 0px 0px;\"><a href=\"http:\/\/www.stumbleupon.com\/submit?url=UURRLL&title=TTIITTLLEE\" title=\"Click to share this page on StumbleUpon\"><img src=\"http:\/\/profile.epicadvice.com\/images\/sm\/16\/StumbleUpon.png\" border=\"0\"\/><\/a><\/td>\n\t\t\t<td align=\"center\" style=\"padding: 2px 3px 0px 0px;\"><a href=\"http:\/\/delicious.com\/save?url=UURRLL&title=TTIITTLLEE\" title=\"Click to share this page on Delicious\"><img src=\"http:\/\/profile.epicadvice.com\/images\/sm\/16\/Delicious.png\" border=\"0\"\/><\/a><\/td>\n\t\t\t<td align=\"center\" style=\"padding: 2px 3px 0px 0px;\"><a href=\"http:\/\/www.google.com\/bookmarks\/mark?op=edit&bkmk=UURRLL&title=TTIITTLLEE\"  title=\"Click to share this page on Google\"><img src=\"http:\/\/profile.epicadvice.com\/images\/sm\/16\/Google.png\" border=\"0\"\/><\/a><\/td>\n\t\t\t<td align=\"center\" style=\"padding: 2px 3px 0px 0px;\"><a href=\"http:\/\/digg.com\/submit?phase=2&url=UURRLL&title=TTIITTLLEE\" title=\"Click to share this page on Digg\"><img src=\"http:\/\/profile.epicadvice.com\/images\/sm\/16\/Digg%2002.png\" border=\"0\"\/><\/a><\/td>\n\t\t\t<td align=\"center\" style=\"padding: 2px 3px 0px 0px;\"><a href=\"http:\/\/reddit.com\/submit?url=UURRLL&title=TTIITTLLEE\" title=\"Click to share this page on Reddit\"><img src=\"http:\/\/profile.epicadvice.com\/images\/sm\/16\/Reddit.png\" border=\"0\"\/><\/a><\/td>\n\t\t\t<td align=\"center\" style=\"padding: 2px 3px 0px 0px;\"><a href=\"http:\/\/twitter.com\/home?status=TTIITTLLEE (UURRLL)\" title=\"Click to share this page on Twitter\"><img src=\"http:\/\/profile.epicadvice.com\/images\/sm\/16\/Twitter%2001.png\" border=\"0\"\/><\/a><\/td>\n\t\t\t<td width=\"1\">&nbsp;&nbsp;&nbsp;<\/td>\n\t\t<\/tr>\n\t<\/table>\n<\/div>"}; 
    share.html = replaceAll(share.html, "UURRLL", location.href);
    share.html = replaceAll(share.html, "TTIITTLLEE", document.title);
    $(function() {
    	$("#question .post-taglist").append("<div style='float:right'>"+share.html+"</div>");
    });
})();
</script>

The code is kinda junky because it was written so quickly, and we haven't had a chance to clean it up yet, but its very straight forward. All you should have to do is place it in your <head> of your site.

You can see an example here:

http://epicadvice.com/questions/596/emblems-heroism-conquest

The code reads the images for the icons off of one of our subdomains, you can see it in the "share" object on the 4th line (var share = ...). You can upload images of your choosing (whatever you want the links to look like) and then just edit the links in the object itself to point someplace different.

I'd HIGHLY recommend using your own icons, and editing the HTML in the "share" object. as if you leave it the way it is, it will read our icons from our profile.epicadvice.com site. They may move or be deleted at anytime, so make sure to change it ;) If you use ours and it breaks all of the sudden, it's because we moved/changed images or something.

Answer 23

Modifying system message colours

See this post