widgets

There are 5 ways to add Pikk to your website:

1) Use the large widget

The large widget lets users (or you) submit your story to pikk, and once submitted, keeps track of the Pikk count. It also displays the headline. You can use this widget to take a micro poll or get your audience's take on your story. It appears as follows:

Before Submission
After Submission

To add the large widget to your web site, please copy and paste the following code:
<script src="http://www.pikk.com/javascripts/widget.js" type="text/javascript"></script>

By default, all versions of the widget use the URL of the page to which you're adding the widget, a white background, and take the browser to the Pikk.com page of your story when clicked (as opposed to popping up a new window). You can override any of these variables by simply adding the following script code right before the widget code:

 
<script>
pikk_skin = 'large';/*can be large, badge, tiny or poll*/
pikk_pop='true'; /*if you want a new window to be created when you click the widget*/
pikk_url='YOUR-URL';/*if you have multiple posts on a page, for example*/
pikk_background='#ffffff';/*remember to include the hash mark (#)*/
  </script>

So, for example, to use the large widget, with a black background, a popup window, and a custom url, you would add something like the following code to your web page:

 
<script>
pikk_skin = 'large';
pikk_pop='true';
pikk_url='http://www.example.com';/*replace with your custom URL*/
pikk_background='#FFFFFF';*/
  </script>
<script src="http://www.pikk.com/javascripts/widget.js" type="text/javascript"></script>

2) Use the badge widget

The badge widget displays a smaller widget in your web page. Only the Pikk count is displayed. The badge widget appears as follows:

   
Before Submission
After Submission

To use the badge widget, you simply add the pikk_size variable into a script immediately before the widget code. You can override the same variables as before (pikk_url, pikk_pop and pikk_background). For example, the following code adds the badge widget to the URL of the page currently being browsed:

 
<script>
pikk_skin = 'badge';
  </script>
<script src="http://www.pikk.com/javascripts/widget.js" type="text/javascript"></script>

3) Use the tiny widget

  

The tiny widget displays a 16x16 Pikk icon in your web page, and nothing else. This might be used if you're adding a number of widgets in a "sharing" section of an article or web site. Note that the tiny widget appears the same before and after the page or article has been submitted to Pikk:

Use the tiny widget by setting the pikk_size variable to tiny in a script immediately before the widget code. For example, the following code adds the tiny widget to a web page:

 
<script>
pikk_skin = 'tiny';
  </script>
<script src="http://www.pikk.com/javascripts/widget.js" type="text/javascript"></script>

4) Use Poll widget

  

The poll widget displays a 265 x 168 Pikk Poll in your web page. Users can vote on your poll without having to leave your web site, and your story is linked back from Pikk.

Use the poll widget by setting the pikk_size variable to poll in a script immediately before the widget code. For example, the following code adds the poll widget to a web page:

 
<script>
pikk_skin = 'poll';
  </script>
<script src="http://www.pikk.com/javascripts/widget.js" type="text/javascript"></script>

5) Custom links

You can add a custom graphic or just a text link that references a URL with a simple <a> tag using the submit command on Pikk. For example, you may wish to add something like this to your web page:
<a href = "http://www.pikk.com/submit?url=http://www.pikk.com/info/widgets_how_to">Pikk it!<a>

This is accomplished by passing a url get variable, url. You can also pass an optional get variable, headline. For example, the following link submits your custom URL to Pikk, with your headline, or takes you to the story if it has already been submitted. Just replace the url and optional headline in the example below with your own.
<a href = "http://www.pikk.com/submit?url=http://www.pikk.com/info/widgets_how_to&headline=how+to+add+widgets+to+your+web+page">Pikk it!<a>

If you have any suggestions for other widgets, or would like to donate a custom design for a widget, please use the feedback link at the bottom of the page.

Please note, if you are a WordPress blogger, a plugin is available that makes this process simple.
© 2010 for pikk by Oasis Web Development