Integrating Showpopr in Your Site

There are two ways to integrate Showpopr into your site:

  1. Pop Widget with Submit Capability is the best way to allow your site's visitors to pop news and videos right on your site.
  2. Custom Submission allows you to create your own Showpopr button or text link that allows your users to submit content to Showpopr, or access it if it has already been submitted.

Pop Widget with Submit Capability

This is the best way to integrate Showpopr into your site. It checks to see if a URL has been submitted. If so, it shows the number of pops. If not, it allows your site's visitors to submit your pages directly to Showpopr.

Example: Simple usage when you want a Web page to be popped

Simply insert the following code snippet where you want the "pop widget" to appear:

<script type="text/javascript" src="http://showpopr.com/buttons/popit.js"></script>

Example: When the URL you want to submit differs from the current page's URL

If your site's URLs are used to transport session data or analytics tokens that you don't want submitted to Showpopr, you can set the URL.

<script type="text/javascript">
  var popr_url = "WEBSITE_URL";
</script>
<script type="text/javascript" src="http://showpopr.com/buttons/popit.js"></script>

Replace WEBSITE_URL with your URL, as it would type it into the browser address bar. You don't need to worry about formatting or URL encoding it, as we will take care of that for you.

Example: Change the design of the button

There are two types of button: normal and compact. The "normal" version is the same graphic that appears on the Showpopr site. It uses a white background. The compact version is useful for putting inline with similar widgets from other social bookmarking sites, such as Digg, Reddit, and StumbleUpon. Its default color is white, but can be changed to match your page.

This code will generate a compact widget with a transparent background:

<script type="text/javascript">
  var popr_skin = "compact"
  var popr_bgcolor = "transparent"
</script>
<script type="text/javascript" src="http://showpopr.com/buttons/popit.js"></script>

Note that the "popr_bgcolor" option takes the same arguments as the CSS "background-color" property. You can use "#FFF", "#fff", "#ffffff", or simply "white" (although white is the default color).

Example: Prefilling the Showpopr submission form

The pop widget takes the same arguments as the custom submit button, with the difference being that they are javascript variables preceded by "popr_":

  • "title" becomes "popr_title"
  • "description" becomes "popr_description"
  • "media" becomes "popr_media"

The Showpopr javascript will do the URL encoding. For example:

<script type="text/javascript">
  var popr_title = "My suggested submission title";
  var popr_description = "This is my suggested descriptive text.";
  var popr_media = "video";
</script>
<script type="text/javascript" src="http://showpopr.com/buttons/popit.js"></script>

Custom Submit Button

In order to submit a bookmark to Showpopr, you simply need to submit it to the following URL:

showpopr.com/submit/?url=http://example.com&title=TITLE&description=DESCRIPTION&media=MEDIA

Submit URL Details:

url=example.com
  • The URL is required. Otherwise it will open a blank submission page.
  • Maximum length is 200 characters.
  • URL should be unique and stripped of any session or user-specific data
  • URL should be URL-encoded, for example:
    http%3A%2F%2Fdomainname.com%2Ffolder%2Fmypagetosubmit.html
title=TITLE
  • The title is optional.
  • Maximum length is 60 characters.
  • Title should be URL encoded and free of HTML markup.
description=DESCRIPTION
  • The description is optional.
  • Maximum length is 500 characters.
  • The description should be URL encoded and free of HTML markup.
media=MEDIA
  • The default is "news".
  • Other choices are "audio", "video", and "image".

Example

<a href="http://showpopr.com/submit/?url=http://www.google.com&title=Useful+Search+Engine 
 &description=Hard+to+live+without+it+in+the+21st+century&media=news">
<img src="http://showpopr.com/images/badges/badge_small.png" width="16" height="16" alt="Showpopr" />
</a>

Custom Submit Button that Opens a Popup Window

Instead of opening a new tab in the user's browser window, you may want to open a popup window. This example does the same thing as the regular custom submit button, but with a javascript window.open instead of a hyperlink with target=blank.

<script type="text/javascript">
  submit_to_showpopr = function() {
    var w = window.open("http://showpopr.com/submit/?url=" + encodeURIComponent(location.href), "showpopr", 
 "resizable=yes&scrollbars=yes");
    return false;
  }
</script>
<a href="#" onclick="javascript:return submit_to_showpopr()"><img src="/images/badges/badge_small.png" alt="Showpopr" 
 title="Submit this story to Showpopr" style="vertical-align:middle;margin-right:8px" />Showpopr</a>