Mình đã thêm Dribbble vào website Wordpress dùng API như thế nào?

Mình đã thêm Dribbble vào website WordPress dùng API như thế nào?

Mình đã thêm Dribbble vào website WordPress dùng Dribbble API như thế nào? Hiện nay để có thể fetching các shots trên Dribbble cá nhân và thêm nó vào website có rất nhiều cách và phần lớn mọi người lựa chọn plugin nếu sử dụng WordPress. Tuy nhiên, cách này không khiến cho quá trình nhanh hơn bao nhiêu mà bù lại bạn phải trả thêm tiền nếu muốn dùng các tính năng mở rộng (đa phần là cho custom và xóa brand logo của họ) 🙃Trong bài viết này, mình sẽ hướng dẫn sử dụng API của chính Dribbble để đồng bộ tất cả các shots cá nhân trên Dribbble với một website WordPress hay tự build.

Nói sơ qua một xíu, Dribbble 🏀là gì? Đây là một trong những nền tảng Showcase lớn nhất trên thế giới cho các Designer hay Product Manager hoặc bất kỳ ai (thậm chí có rất nhiều người lên đây bán sản phẩm 😃hay kể cả đi backlink để phục vụ SEO). Dribbble nổi tiếng và được yêu thích bởi nó giống như Instagram và tập trung mọi người vào các hình ảnh, GIF, hay mới nhất là video (gọi là shots) để các designer showcase ra thiết kế của mình. Dribbble thì đơn giản và nhanh chóng hơn Behance (1 nền tảng chia sẻ khác của Adobe), nền tảng này không giúp bạn show hoàn toàn một project giống như Behance mà show từng góc độ của project đó, đó là lý do họ gọi là shots.

Mình đã thêm Dribbble vào website WordPress dùng API như thế nào?
Giao diện Dribbble – Nguồn: Dribbble

Rất nhiều Designer đặc biệt là Illustrator và UX/UI Designer chọ nền tảng này. Họ build một portfolio trên chính trang Dribbble của mình và dùng nó để xin việc hay cho mọi người thấy những gì họ đã làm. Chính vì điều này, nhiều Designer muốn nhúng profile Dribbble của họ vào website để những người truy cập website có thể tiện xem hơn mà không phải qua Dribbble. Thay vì phải up hình ảnh 2 lần trên website và dribbble, nhúng Dribbble thông qua API là một cách có phần kỹ thuật và khó cho những designer không hiểu rõ nhiều mấy cái loằn ngoằn này.

Chém gió luyên thuyên đủ rồi, hãy cùng tìm hiểu làm sao để lấy toàn bộ shots trên Dribbble và add nó vào website WordPress nào. Tất nhiên, sau này khi upload lên Dribbble thì website sẽ tự động cập nhật. 🎉

Đầu tiên, bạn vào Dribbble và kéo xuống đến chân trang, tại đây bấm vào API.

Mình đã thêm Dribbble vào website WordPress dùng API như thế nào?

Có hai lựa chọn cho bạn lúc này là xem API Documentation của Dribbble để hiểu rõ hơn về các quy tắc và cách dùng bộ API của họ để lấy dữ liệu về. Tuy nhiên, Documentation của Dribbble được viết không thực tốt, nó khá sơ xài và khó hiểu (người viết Documenation này có thể trình độ họ khá cao nên họ nghĩ viết ít thì những developers khác cũng sẽ hiểu thôi 🙂). Chính vì vậy mà nó khá khó cho người mới bắt đầu. Bạn chọn Register your Application để tạo ứng dụng nha.

Mình đã thêm Dribbble vào website WordPress dùng API như thế nào?

Tại đây, bạn sẽ đặt tên cho ứng dụng, mô tả và copy – paste tên miền website mà bạn muốn nhúng Dribbble vào. Website URLCallback URL có thể điền giống nhau nha.

Mình đã thêm Dribbble vào website WordPress dùng API như thế nào?

Sau khi tạo, bạn sẽ được cung cấp Client IDClient Secret, đây là 2 dãy mã dùng để gọi hàm và lấy dữ liệu từ Dribbble về. Trước tiên, bạn cần phải xác nhận website của mình bằng cách sử dụng ClientID, để làm điều này thì bạn copy ClientID sau đó thay nó vào cụm “CLIENT_ID”. Sau đó, truy cập đường dẫn vừa chỉnh sửa.

https://dribbble.com/oauth/authorize?client_id=CLIENT_ID

Lúc này, bạn sẽ được hỏi về các quyền truy cập và bấm Authenticate, bạn sẽ được redirect về trang web của bạn (nó phụ thuộc vào việc bạn đã để Callback URL bên trên là gì. Mở coi tên miên của trang website bạn, bạn sẽ thấy nó có dạng như sau:

http://callback_url?code=gO24324sdf34345dfh78i956x22e269df3a4315924b87246a67

Ví dụ của mình là:

https://huuphongnguyen.com?code=gO24324sdf34345dfh78i956x22e269df3a4315924b87246a67

Bạn copy phần mã ở sau dấu = lại. Đây là mã giúp bạn xác nhận cùng với Client IDClient Secret. Lúc này trong tay bạn đã có 3 đoạn mã dài: Code vừa copy, Client ID và Client Secret.

Sau khi có 3 mã này, bạn cần phải sử dụng một phần mềm ứng dụng giúp phân tích link và lấy ra được access token (chìa khóa quan trọng nhất). Mình sử dụng Postman trên MacOS, một thằng rất mạnh và giao diện đẹp, bạn có thể xem các ứng dụng tương tự tại: https://www.producthunt.com/alternatives/postman nếu không thích Postman.

Để tải về Postman bạn cứ truy cập vào trang chủ của họ: https://www.getpostman.com/ và tải về phiên bản mới nhất, ứng dụng này miễn phí và bạn chỉ trả phí đối với việc làm collaboration thôi. 😂

Mình đã thêm Dribbble vào website WordPress dùng API như thế nào?

Sau khi tải về, bạn mở ứng dụng lên và chọn vào dấu + để tạo mới.

Mình đã thêm Dribbble vào website WordPress dùng API như thế nào?

Nhớ chuyển lựa chọn sang POST, mặc định thì nó là GET và sẽ bị lỗi nếu quên chuyển cái này. Vậy url mà mình nhập vào để Send là gì?

https://dribbble.com/oauth/token?client_id=CLIENT_ID&client_secret=CLIENT_SECRET&code=COPIED_CODE

Bạn còn nhớ 3 đoạn mã lúc này không? 😆 Thay từng cái mã vào các cụm “CLIENT_ID” – “CLIENT_SECRET” – “COPIED_CODE” bên trên, sau đó copy link và paste vào ô url trong Postman – Bấm Send. Vậy mà Postman đã lấy ra cho bạn thông tin token của Dribbble rồi đó.

Mình đã thêm Dribbble vào website WordPress dùng API như thế nào?

Access Token này sẽ giúp bạn fetch dữ liệu từ Dribbble về dùng nó trên website của mình. Đầu tiên, bạn tạo một đoạn HTML

<ul id="dribbbleShots"></ul>

Sau đó thêm một ít CSS cho nó có hình dạng đẹp đẹp xinh xinh ❤️Bạn có thể copy hết hoặc tùy chỉnh cho theo ý mình tùy ý. CSS và HTML khá dễ hiểu và nó không phải là ngôn ngữ lập trình nên Designer hoàn toàn có thể học.

/* Dribble shots on website */

 #dribbbleShots {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -moz-webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -moz-webkit-box-orient: horizontal;
    -moz-webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -.5rem;
    margin-left: -.5rem;
    z-index: 99;
    opacity: 1;
    transform: scale(1);
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
}

#dribbbleShots li {
    -moz-webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    box-sizing: border-box;
    -mo-webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    padding-right: .5rem;
    padding-left: .5rem;
    flex-basis: 30%;
    max-width: 30%;
    position: relative;
    height: 300px;
    margin-bottom: 20px;
    margin-left: 20px;
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
    overflow: hidden;
}

#dribbbleShots li:before {
    position: absolute;
    content: "";
    width: 1000px;
    height: 1000px;
    background: linear-gradient(-240deg, rgba(238,238,238,0.00) 3%, #04007C 98%);
    top: 0;
    left: 0;
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.5s;
    opacity: 0;
    transform: translate(-46%, -111%) rotate(60deg);
}

#dribbbleShots li img{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    height: auto;
}

#dribbbleShots .title{
    position: absolute;
    bottom: 25px;
    left: 30px;
    font-size: 25px;
    font-family: 'Montserrat';
    font-weight: 700;
    color: #fff;
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
    transform: translateY(30px);
    opacity: 0;
    width: 70%;
    line-height: normal;
}

#dribbbleShots li:hover{
    box-shadow: 0px 9px 30px rgba(0, 0, 0, 0.21);
    transform: scale(1.02);
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
}

#dribbbleShots li:hover .title{
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.3s;
    transform: translateY(0px);
    opacity: 1;
}

#dribbbleShots li:hover:before{
    opacity: 1;
    transform: translate(-35%, -43%) rotate(60deg);
    transition: all cubic-bezier(0.31, 0.48, 0.53, 0.83) 0.5s;
}

Sau khi đã có HTML và CSS, đã đến lúc mình cần dùng đoạn Access Token vừa nãy để lấy dữ liệu từ Dribbble và đỗ vào bên trong HTML và CSS này. Bỏ Access Token của bạn vào và copy đoạn jQuery này vào phần <script> của HTML là được.

// Set the Access Token
var accessToken = "Bỏ Access Token của bạn vào đây"

// Call Dribble v2 API
$.ajax({
    url: 'https://api.dribbble.com/v2/user/shots?access_token='+accessToken,
    dataType: 'json',
    type: 'GET',
    success: function(data) {  
      if (data.length > 0) { 
        $.each(data.reverse(), function(i, val) {                
          $('#dribbbleShots').prepend(
            '<li class="shot" target="_blank" href="'+ val.html_url +'" title="' + val.title + '"><div class="title">' + val.title + '</div><img src="'+ val.images.hidpi +'"/></li>'
            )
        })
      }
      else {
        $('#dribbbleShots').append('<p>Sorry, No shots yet</p>');
      }
    }
});

Đấy vậy là xong rồi đấy. Bạn chỉ cần copy hết và dùng lại thôi, WordPress có nhiều plugin cho custom HTML – CSS – JavaScript để bạn copy từng cá bỏ vào. Vậy là xong 🎉

Mình đã thêm Dribbble vào website WordPress dùng API như thế nào?

Nếu một ngày nào đó, tự nhiên trang web của bạn không thể load các shots từ Dribbble được nữa thì có thể do Dribbble đã thay đổi cấu trúc link của họ, mình sẽ cập nhận lại bài viết này nếu có thay đổi. 😂Mà yên tâm là Dribbble sẽ không thay đổi đâu cho đến khi ra V3 của bộ API này.

Nguồn tham khảo:

  • Nithin P John (2018) DRIBBBLE SHOTS IN YOUR WEBSITE: V2 API, Available at: https://medium.com/@nithin_94885/dribbble-shots-in-your-website-v2-api-5945a355d106 (Accessed: 5 January 2019)
  • Dribbble (2019) Overview for the v2 API, Available at: http://developer.dribbble.com/v2/ (Accessed: 5 January 2019)

Bài viết bạn nên đọc thêm:

Mình đã tạo một website WordPress dùng AWS như thế nào?
Mình đã thêm Dribbble vào website WordPress dùng API như thế nào?
Mình đã xây dựng website WordPress chạy Nginx trên AWS thế nào?

Đánh giá bài viết:

Twitter
Facebook
LinkedIn
Email
Print