Promote

Spread the word about Web Standards Sherpa with these badges and customizable widget.

Badges

Download these badges and show your support for Web Standards Sherpa. Each download comes with a png and jpg version of the badge.

Widget

Display our reviews and/or ask the Sherpas content on your site with a customizable widget. Just add a containing div for the widget content and include this JavaScript file: http://webstandardssherpa.com/widget.js.

<div id="sherpa-widget"></div>
<script src="http://webstandardssherpa.com/widget.js"></script>

Order matters. The containing div needs to come first in the source order otherwise when the JavaScript fires it will not find the containing div. By default, give your containing div an id of “sherpa-widget” or use your own custom id.

By default, the widget will display the last 5 reviews and ask the Sherpas content posted on Web Standards Sherpa.

Customizing the Widget

You can easily customize the widget to:

To customize the widget, simply add query strings to the end of the JavaScript URL like this:

<script src="http://webstandardssherpa.com/widget.js?limit=3&author=erin-kissane"></script>

This example would return the 3 latest reviews by Erin Kissane. Notice that the widget has a flexible width.

Content Parameter

By default, the API shows both Review and Ask the Sherpa content. But you can specify to only show Reviews or Ask the Sherpas. The two parameters are content=reviews and content=questions. Follow this pattern:

<div id="sherpa-widget"></div>
<script src="http://webstandardssherpa.com/widget.js?content=reviews"></script>

Limit Parameter

By default, the API defines the number of reviewsand/or ask the Sherpas that are displayed at 5. But you can use a limit query string to customize the widget. You can define it by the number of reviews you want to display or you can choose to display all of the reviews by using limit=all.

<div id="sherpa-widget"></div>
<script src="http://webstandardssherpa.com/widget.js?limit=1"></script>

Author Parameter

To use define a specific author in the query string, follow this pattern: author=firstname-lastname. Visit the authors page for a complete listing of our writers.

<div id="sherpa-widget"></div>
<script src="http://webstandardssherpa.com/widget.js?author=derek-featherstone"></script>

Topic Parameter

Visit our topics page for a complete listing of our review topics. If you hover over the links to the different topics, you will find the topic keyword that you will need for the URL string. For example, the design/UX topic parameter would be topic=design.

<div id="sherpa-widget"></div>
<script src="http://webstandardssherpa.com/widget.js?topic=design"></script>

Define Your Own Container - Target Parameter

By default, we have created a container for the widget with the id of “sherpa-widget.” But you can define your own container. Let’s say you want to name it “side-widget-1.” You would add a div with that id in your markup and add the “target” parameter to the URL query string for the JavaScript call like the following:

<div id="side-widget-1"></div>
<script src="http://webstandardssherpa.com/widget.js?target="side-widget-1"></script>

Combining Parameters

You can easily combine parameters by adding an ampersand between the different parmeters in the URL query string.

<script src="http://webstandardssherpa.com/widget.js?content=reviews&limit=2&author=derek-featherstone&target=sidebar-widget-1"></script>

Build You Own Widget with JSON and JSONP

For those of you that would like to build your own widget, the API supports the JSON data format. You can use the same parameters in the query string to customize the data that you get back from the API. We have built 3 different APIs so you can display just reviews, just ask the Sherpas, or both. The JSON files are found at:

Let’s say you want a listing of 3 reviews from the accessibility topic. Your JSON string would be:

http://webstandardssherpa.com/apis/reviews.json?limit=3&topic=accessibility

If you would like to use JSONP, you need to add a URL string of “?callback=?” like this example that gets the JSON using jQuery :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
  $(function(){
    $.getJSON( "http://webstandardssherpa.com/apis/reviews.json?limit=3&topic=accessibility&callback=?", function(data) {
     // do something
   });
  });
</script>