Streaming live at 10am (PST)

Dribbble API to feed webflow


#1

Hi guys,

I'm new in this webflow world, I'm trying to understand if exists any way to feed a webflow portfolio from a dribbble account.

I'm using this template and were you see the Recent Works I would like to have my last dribbble uploads

Dribbble API Docs:
http://developer.dribbble.com/

From what I've seen I didn't find any what to do it, anyone here knows how to do it?

Thank in advance


Jribbble.min.js integration help
#2

I don't about the API but have a look at Zapier. You can fill a cms collection on Webflow via Zapier and different services.

https://zapier.com/zapbook/dribbble/


#3

Thanks Jorn,

I tried, but I had and error in the last step, I need to look at it with more time.

Although, how can I do that in the Webflow Collections? When I create a collection I didn't any options that allows me to use any external service.


#4

I was thinking the same thing, but I don't think you can have images over API as of yet :frowning:


#5

I'm using https://lab.tylergaw.com/jribbble/ for http://fixx.webflow.io/#projects

  /* ===== Load projects from dribbble ===== */
  $.jribbble.setToken('tokenKeyGoesHere');
  $.jribbble.teams('fixxdigital').shots().then(function(shots) {
    var html = [];

    for(i=0; i<shots.length; i++) {
      var shot = shots[i];
      
      // Select a tag
      var selTag = '';
      for(j=0; j<shot.tags.length; j++) {
        var tag = shot.tags[j];
        if( tag == 'web' ||
            tag == 'website' ||
            tag == 'ios' ||
            tag == 'mobile' ||
            tag == 'ui' ||
            tag == 'ux') {
          selTag = tag;
          break;
        }
      }
      
      // Skip project if not tagged properly
      if(selTag == '') continue;

      // Format the tag
      selTag = selTag.replace('-', ' ');
      selTag = capitalizeEachWord(selTag);
      selTag = selTag.replace(/web$/i, 'Website');
      selTag = selTag.replace(/mobile$/i, 'Mobile App');
      selTag = selTag.replace(/ios/i, 'iOS');
      selTag = selTag.replace(/ui/i, 'UI');
      selTag = selTag.replace(/ux/i, 'UX');
      selTag = '<div class="btn-tag" href="#">' + selTag + ' Design</div>';
      
      html.push('<div class="project-slide"><a class="cage" href="'+shot.html_url+'" target="_blank"><div class="photo" style="background-image:url('+shot.images.normal+');"></div><div class="project-title" title="'+shot.title+'">'+shot.title+'</div><div class="name"><div class="face"><div class="face-img"></div><div class="personname">Fixx Digital</div></div></div>'+selTag+'</a></div>');
    }
    
    // blanks required for slideshow
    html.push('<div class="project-slide"></div>');
    html.push('<div class="project-slide"></div>');
    html.push('<div class="project-slide"></div>');
    
    $('.projects-slideshow').html(html.join(''));
    initProjectsSlider();
  });

#6

Looks like Samuel nailed it and I guess you gonna try that :slight_smile:

Regarding Zapier and Webflow. You don't see any options on the Webflow side because you granted Zapier access to your Webflow account. Zapier fills your collection for you with what you told the zap to do.

Hope you get this to work.


#7

Every time I tried I have this error


#8

I'm not sure about that. Don't have a Dribble account so I can't try it. I did try Shopify with Zapier and I didn't manage to pull an image either. I could fetch a img url, maybe with a embedded img code and a add field to that would work?

If you could fetch the img url try this. Make url field in you collection and get the img url from Dribbble via Zapier. Then embed custom code to your collection template and add a img tag. Then for the img url you add that field from your collection.

Makes sense?


#9

This topic was automatically closed after 60 days. New replies are no longer allowed.