Dribbble Widget

Dribbble Widget

Canvas bundles the Jribbble library (plugins.dribbble.js, Jribbble v2.0.4) so you can query the Dribbble API v2 for a user's latest shots. Note: unlike Flickr and Instagram, the Dribbble feed is not wired into the theme's automatic module init (it is marked "Dribbble Pending" in the core functions). You call Jribbble directly from your own script.

Setup

Jribbble talks to https://api.dribbble.com/v1 and requires a personal access token. Register an application at https://dribbble.com/account/applications/new to get one, then set it before making any request:

$.jribbble.setToken('YOUR_DRIBBBLE_ACCESS_TOKEN');

Without a token the library logs a missing token error and returns false instead of making the request.

Structure

Provide an empty container to render shots into, then populate it from the API response:

<div class="widget">
	<h4>Dribbble Shots</h4>
	<div id="dribbble-shots" class="grid-container row row-cols-3"></div>
</div>

$.jribbble.setToken('YOUR_DRIBBBLE_ACCESS_TOKEN');

$.jribbble.users('your-username').shots().then(function(shots) {
	var html = '';
	shots.forEach(function(shot) {
		html += '<a class="grid-item" href="' + shot.html_url + '" target="_blank" rel="noopener">'
			+ '<img src="' + shot.images.teaser + '" alt="' + shot.title + '" />'
			+ '</a>';
	});
	document.getElementById('dribbble-shots').innerHTML = html;
});

API Methods

Jribbble exposes chainable resource methods that map onto the Dribbble API. The ones relevant to a shots widget:

// Latest shots for a user
$.jribbble.users('username').shots();

// A single shot by ID
$.jribbble.shots('1234567');

// Shots owned by a team
$.jribbble.teams('teamname').shots();

Each call returns a promise-like object you resolve with .then(callback).

Tips

• The Dribbble feed is intentionally left as a manual integration ("Pending" in core), so there is no data-* driven auto init like Flickr or Instagram. Drive it from your own inline script.
• Keep your access token server side where possible. Anything placed in client side JavaScript is publicly visible.
• Reuse the same .grid-item + img markup that Flickr and Instagram widgets use so the Canvas masonry and lightbox styles apply consistently.
• Dribbble API v2 requires the Authorization: Bearer header, which Jribbble sets for you once setToken is called.