Syndicated Voting
Propeller's syndicated voting widget makes it possible for you to embed Propeller voting right into your blog or website. Your readers can then vote for your stories without leaving your site.
To add syndicated voting to your site, simply include this code somewhere on the page, replacing "URL" with the URL of the page:
<script type="text/javascript" src="http://www.netscape.com/widgets/med_vote_if/[PermalinkURL]"> </script>
Replace [PermalinkURL] in the above example with the permalink to your post URL. For example, the syndicated voting code for this page would be:
<script type="text/javascript" src="http://www.netscape.com/widgets/med_vote_if/http://www.netscape.com/api/about/syndicated-voting"> </script>
If you're using Wordpress, you can use the built-in the_permalink() function to generate the button:
<script type="text/javascript" src="http://www.netscape.com/widgets/med_vote_if/<?php the_permalink() ?>"> </script>
If the page has not yet been submitted to Propeller, a "Submit to Propeller" button will be shown, allowing your users to easily submit the story to Propeller:
If the page has already been submitted to Propeller, the button will show the number of votes and comments your story has, as well as a link to vote for the story:
Additional Button Styles
There are three different types of voting widgets: medium (as shown above), small, and textual.
The small widget shows the same submit button as the medium widget, but it displays a more compact view of the votes and comments for already-submitted stories:
To use the small version on your site, change the "med_vote_if" in the code to "small_vote_if":
<script type="text/javascript" src="http://www.netscape.com/widgets/small_vote_if/[PermalinkURL]"> </script>
Textual vote widget
The textual version is the most compact, showing just a text link for stories that have not been submitted:
For already submitted stories, the text link will show the current number of votes the story has received:
However, if you hover your mouse over the "Propeller votes" text, a bubble with more information on the story (including number of votes, comments, submitter, and channel) will appear above the text. This additional information actually makes the textual version the most informative of the voting widgets.
To use the text version, change the "med_vote_if" to "text_vote":
<script type="text/javascript" src="http://www.netscape.com/widgets/text_vote/[PermalinkURL]"> </script>
Note: the CSS class of the textual widget is ns-vwidget, so you can style the text however you'd like by defining a CSS rule for this class. For example, if you want the DIV that contains the text to flow normally with other text, you could add this rule:
div.ns-vwidget {
display: inline;
}
Bulk Voting Widgets
If you would like to display multiple voting widgets on one page (such as a widget for each post on a blog), use the following method to have your page's content load before the voting widgets load from Propeller.com.
First, include the following code in the <head> section of your page.
<script type="text/javascript" src="http://www.netscape.com/api/bulkvote/[Size]"></script>
Replace [Size] with either "med" or "small" to display the medium or small voting widgets (explained in detail above).
Then, wherever you want a voting widget, past the following code:
<div class="nsBulkVotingWidget" title="[Title of page]" url="[PermalinkURL]"></div>
where [Title of page] is the title you'd suggest for anyone submitting that link to Propeller, and [PermalinkURL] is the link directly to that post. The title is optional; the url is required. Do not use the same URL for each widget when using the bulk widget method.
After the content on your page loads, voting widgets will automatically be inserted into your page.
For example, shown below are five widgets for posts on the Propeller blog, loaded with the bulk widget method.
The code used to display the above widgets is
<div class="nsBulkVotingWidget" url="http://blog.netscape.com/2007/01/30/netscape-9-target-platforms/" title="Netscape 9 Target Platforms"></div> <div class="nsBulkVotingWidget" url="http://blog.netscape.com/2007/01/30/sundance-wrap-up-the-winners-and-the-overlooked/" title="Sundance Wrap-Up: The Winners and The Overlooked"></div> <div class="nsBulkVotingWidget" url="http://blog.netscape.com/2007/01/26/area-daily-com-launches/" title="Area-Daily.com Launches"></div> <div class="nsBulkVotingWidget" url="http://blog.netscape.com/2007/01/24/netscape-9-0-teaser/" title="Netscape 9.0 Teaser"></div> <div class="nsBulkVotingWidget" url="http://blog.netscape.com/2007/01/23/the-disappearance-of-heather-kullorn/" title="The Disappearance of Heather Kullorn"></div>