Share the Knowledge - Top Tips List - StackExchange

Share the Knowledge - Top Tips List

2009-10-12T08:19:29Z

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 by Ferdeen for Share the Knowledge - Top Tips List

2009-10-12T08:26:08Z

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 by Ferdeen for Share the Knowledge - Top Tips List

2009-10-12T09:33:07Z

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 by Corey Frang for Share the Knowledge - Top Tips List

2009-10-12T09:39:33Z

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 by Jonathan Lyon for Share the Knowledge - Top Tips List

2009-10-12T09:57:26Z

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 by Ferdeen for Share the Knowledge - Top Tips List

2009-10-12T10:10:40Z

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 by David Smith for Share the Knowledge - Top Tips List

2009-10-12T13:39:19Z

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

Answer by Robert Hinojosa for Share the Knowledge - Top Tips List

2009-10-13T14:20:48Z

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 by Ben Elder for Share the Knowledge - Top Tips List

2009-10-13T15:08:02Z

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 by Robert Hinojosa for Share the Knowledge - Top Tips List

2009-10-13T16:24:14Z

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 by Ferdeen for Share the Knowledge - Top Tips List

2009-10-15T15:59:58Z

Alternative Tagging UI

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

Details here

Answer by TaxQueries.com for Share the Knowledge - Top Tips List

2009-10-18T23:55:02Z

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 by Ferdeen for Share the Knowledge - Top Tips List

2009-10-19T10:19:46Z

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 by Ferdeen for Share the Knowledge - Top Tips List

2009-10-20T07:03:48Z

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 by Ferdeen for Share the Knowledge - Top Tips List

2009-10-21T08:54:40Z

Show number of users on your site.

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

Answer by mathaix for Share the Knowledge - Top Tips List

2009-10-21T14:06:29Z

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 by Ferdeen for Share the Knowledge - Top Tips List

2009-10-26T05:24:55Z

Modifying system message colours

See this post

Answer by ripper234 for Share the Knowledge - Top Tips List

2009-10-26T21:21:54Z

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 by Ferdeen for Share the Knowledge - Top Tips List

2009-10-29T16:10:29Z

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 by Rob Allen for Share the Knowledge - Top Tips List

2009-10-29T16:41:16Z

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 by Rob Allen for Share the Knowledge - Top Tips List

2009-10-29T18:05:22Z

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 by Ferdeen for Share the Knowledge - Top Tips List

2009-11-02T20:13:40Z

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 by Robert C. Cartaino for Share the Knowledge - Top Tips List

2009-11-04T22:15:11Z

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 by Aaron Cox for Share the Knowledge - Top Tips List

2009-11-06T16:50:24Z

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.