Add js to Widget

Question

Hello looking for some help

I have created some Widget , and need to add in it JavaScript for fetch instagram photos I have a library and a script, but this script doesnt work.

I have added it in my simplewidget.phtml

but dont know how to write it correct in Magento2, maybe some one can help ? code below:

<script type="text/javascript">
    jQuery(function() {
        var userFeed = new Instafeed({
            get: 'user',
            userId: '5454117805',
            accessToken: '5454117805.1677ed0.a5cef727c5824160b3ee1238d053fadb',
            resolution: 'thumbnail',
            sortBy: 'most-recent',
            limit: 6,
            links: false
        });
        userFeed.run();
    });
</script>

<h1>Instagram Feed</h1>
<div id="instafeed"></div>

Answer 1

The best way to add JS is with requirejs.

Assuming that your js file is: instagram.js

app/design/{Vendor}/{theme}/requirejs-config.js

var config = {
    map: {
        '*': {
            myscript: 'js/instagram'
        }
    }
};

app/design/{Vendor}/{theme}/web/js/instagram.js

define(['jquery'], function($){
   "use strict";
       return function myscript()
       {
           alert('Instagram ok'); //just for test
           jQuery(function() {
              var userFeed = new Instafeed({
                 get: 'user',
                 userId: '5454117805',
                 accessToken: '5454117805.1677ed0.a5cef727c5824160b3ee1238d053fadb',
                 resolution: 'thumbnail',
                 sortBy: 'most-recent',
                 limit: 6,
                 links: false
              });
              userFeed.run();
           });
       }
});

app/design/{Vendor}/{theme}/Magento_Theme/templates/simplewidget.phtml

<script type="text/javascript">
    require(['jquery', 'myscript'], function($, myscript) {
        myscript();
    });
</script>

Info: don't forget to :

• clean the cache

• clean var/view_preprocessed content

• clean pub/static content

• deploy the static content = php bin/magento setup:static-content:deploy -f

Answer 2

Try the below code:

<script>
    (function  () {
        require(["jquery","custom"],function($) {
            $(document).ready(function() {
                var userFeed = new Instafeed({
                get: 'user',
                userId: '5454117805',
                accessToken: '5454117805.1677ed0.a5cef727c5824160b3ee1238d053fadb',
                resolution: 'thumbnail',
                sortBy: 'most-recent',
                limit: 6,
                links: false
             });
            userFeed.run();
            });
        });
    })();
</script>