Basic Giphy Integration

[achalaggarwal]

✂️ Copy of your #42SmartBlock from Roam

- giphy #42SmartBlock

    - <%NOBLOCKOUTPUT%><%SET:search,<%INPUT:What GIF would you like?%>%>

    - <%NOBLOCKOUTPUT%><%JAVASCRIPT:```javascript
//get your API key from 
//https://developers.giphy.com/dashboard/?create=true
var key = '<---- PASTE API KEY HERE ---->';
var url = "https://api.giphy.com/v1/gifs/search?api_key="+ key + "&q=" + encodeURIComponent(roam42.smartBlocks.activeWorkflow.vars["search"]) + "&limit=1&offset=0&rating=r&lang=en";
var responseJSON = $.ajax({url:url, type:"GET", async:false, 
}).responseJSON;
roam42.smartBlocks.activeWorkflow.vars["gif"] =  responseJSON.data[0].images.original.url;
return '';```%>

    - ![](<%GET:gif%>)

📋 Describe the SmartBlock

Simple Giphy SB to pull the first gif based on the search term into your graph in the ![]() format

✅ Describe any prerequisites or dependencies that are required for this SmartBlock

📷 Screenshot of your #42SmartBlock workflow/template from Roam

💡 Additional Info

[TfTHacker]

Awesome SB! Will add this to my DNP for some daily inspiration :-)

I tweaked it a little for my needs. Here is a revision:

• giphy #42SmartBlock
  

  • <%NOBLOCKOUTPUT%><%SET:search,<%INPUT:What GIF would you like?%>%>
    

  • <%NOBLOCKOUTPUT%><%JAVASCRIPTASYNC:```javascript
    //get your API key from //https://developers.giphy.com/dashboard/?create=true 
    var key = '--> your API key here <---'; 
    var url = "https://api.giphy.com/v1/gifs/search?api_key="+ key + "&q=" +
                encodeURIComponent(roam42.smartBlocks.activeWorkflow.vars["search"]) + 
                "&limit=1&offset=0&rating=r&lang=en"; 
    
    var responseJSON = await $.ajax({url:url, type:"GET", async:false, }).responseJSON; 
    roam42.smartBlocks.activeWorkflow.vars["gif"] = responseJSON.data[0].images.original.url; 
    
    return '';```%>
    

  • ![](<%GET:gif%>)
    

[achalaggarwal]

Updated it to pick a random in the first 10 results

- giphy #42SmartBlock
    - <%NOBLOCKOUTPUT%><%SET:search,<%INPUT:What GIF would you like?%>%>
    - <%NOBLOCKOUTPUT%><%JAVASCRIPT:```javascript
//get your API key from 
//https://developers.giphy.com/dashboard/?create=true
var key = '--> your API key here <---';
var url = "https://api.giphy.com/v1/gifs/search?api_key="+ key + "&q=" + encodeURIComponent(roam42.smartBlocks.activeWorkflow.vars["search"]) + "&limit=10&offset=0&rating=r&lang=en";
var responseJSON = $.ajax({url:url, type:"GET", async:false, 
}).responseJSON;
var length = responseJSON.data.length;
var idx = Math.floor(Math.random()*length);
roam42.smartBlocks.activeWorkflow.vars["gif"] =  responseJSON.data[idx].images.original.url;
return '';```%>
    - ![](<%GET:gif%>)