How To put a StumbleUpon button on your page

Posted by Sheepdog on 20 Apr 2010 09:29, last edited by GoVegan on 09 May 2010 05:49

Tags: bitly code link social stumbleupon twitter

rating: +2+x

Wheel already invented

I wanted to put a "recommend to Stumbleupon" link on one of my wikidot pages. (I am a user of a free account). I spent more time than I want to admit looking for how to do this before I noticed that all of my pages ALREADY HAVE a button to cast a Stumbleupon vote! That is provided courtesy of the standard, wikidot provided, bar at the top of my page.

I'm writing this just in hopes that the next person who searches for "how to link to Stumbleupon" or "how to insert Stumbleupon html" will find this. I did TRY to rtfm, but when clever designers try to make things (wikidot) idiot proof, they sometimes don't quite provide for how clever the idiots (me) can be!

Another solution

Sometimes, the wheel has to be reinvented … when the [[social …]]…
BlinkListblogmarksdel.icio.usdiggFarkfeedmelinksFurlLinkaGoGoNewsVineNetvouzRedditYahooMyWebFacebook
… is not updated with new social services or when the top bar does not show what the webmaster wants.
For example, Bit.Ly, LinkedIn or Viadeo are missing. And the Twitter button does not squeeze the URL like Bit.ly can do.

Includes

Create the following includes and add your own icons …

include:post-stumbleupon

 [[div class="mysocialbuttons"]]
 [[image http://gerdamicsi.wikidot.com/local--files/include:post-stumbleupon/stumbleupon.png link="http://www.stumbleupon.com/submit?url=%%link%%"]]
 [[/div]]

include:post-twitter

 [[div class="mysocialbuttons"]]
 [[image http://gerdamicsi.wikidot.com/local--files/include:post-twitter/twitter.png link="http://twitter.com/home?status=%%title%%+%%link%%"]]
 [[/div]]

include:post-bitly

[[div class="mysocialbuttons"]]
[[image http://gerdamicsi.wikidot.com/local--files/include:post-bitly/bitly.png
  link="http://bit.ly/?v=3&u=%%link%%&s=%%title%%"]]
[[/div]]

On a live _template

 [[module CSS]]
 .mysocialbuttons {display:inline;}
 [[/module]]
 [[include :gerdamicsi:include:post-bitly]]
 [[include :gerdamicsi:include:post-blogger]]
 [[include :gerdamicsi:include:post-bx]]
 [[include :gerdamicsi:include:post-delicious]]
 [[include :gerdamicsi:include:post-digg]]
 [[include :gerdamicsi:include:post-facebook]]
 [[include :gerdamicsi:include:post-gmail]]
 [[include :gerdamicsi:include:post-google]]
 [[include :gerdamicsi:include:post-google-buzz]]
 [[include :gerdamicsi:include:post-linkedin]]
 [[include :gerdamicsi:include:post-live]]
 [[include :gerdamicsi:include:post-mixx]]
 [[include :gerdamicsi:include:post-myspace]]
 [[include :gerdamicsi:include:post-netvibes]]
 [[include :gerdamicsi:include:post-print]]
 [[include :gerdamicsi:include:post-reddit]]
 [[include :gerdamicsi:include:post-scoopeo]]
 [[include :gerdamicsi:include:post-slashdot]]
 [[include :gerdamicsi:include:post-stumbleupon]]
 [[include :gerdamicsi:include:post-technorati]]
 [[include :gerdamicsi:include:post-twitter]]
 [[include :gerdamicsi:include:post-typepad]]
 [[include :gerdamicsi:include:post-viadeo]]
 [[include :gerdamicsi:include:post-wikio]]
 [[include :gerdamicsi:include:post-yahoo-bookmarks]]

Note: the display:inline CSS instruction allows to align the icons horizontally.

Of course, change "gerdamcsi" by your sitename and remove the front spaces if you copy and paste the code above.

In action

Check this page from the test: category !

Related

Author

gerdamigerdami. Please visit his/her userPage.


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.