From 3d6038103f3837a783c4a9cbd073318d8f52b5ca Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 09:34:26 +0200 Subject: [PATCH 01/14] Started implementing user feeds --- .vscode/iisexpress.json | 6 ++++++ demo/demo.js | 2 +- hashtaghistory.js | 33 ++++++++++++++++++++++++++++----- 3 files changed, 35 insertions(+), 6 deletions(-) create mode 100644 .vscode/iisexpress.json diff --git a/.vscode/iisexpress.json b/.vscode/iisexpress.json new file mode 100644 index 0000000..9df36bb --- /dev/null +++ b/.vscode/iisexpress.json @@ -0,0 +1,6 @@ +{ + "port": 30707, + "path": "c:\\Users\\kaspe\\Google Drev\\Egne Projekter\\hashtaghistory.js", + "clr": "v4.0", + "protocol": "http" +} diff --git a/demo/demo.js b/demo/demo.js index 8ffb713..4471d19 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -24,7 +24,7 @@ $(document).ready(function() { $(this).html(highlight($(this).html())); }); - $('#demo1').hashtaghistory('coding'); + $('#demo1').hashtaghistory(''); let playgroundOptions = { hashtag: 'summer', diff --git a/hashtaghistory.js b/hashtaghistory.js index f2f4162..859617c 100644 --- a/hashtaghistory.js +++ b/hashtaghistory.js @@ -2,20 +2,41 @@ $.fn.hashtaghistory = function(userSettings) { let $container = this; let settings = $.extend({ - hashtag : "", + get : "", + type : "", imageSize : 150, limit : 6, link : true }, userSettings); - if($.type(userSettings) == "string") { - settings.hashtag = userSettings; + if(typeof userSettings == "string") { + settings.get = userSettings; } - if(settings.hashtag == "") { + if(settings.get == "") { + console.group("Instastory.js log"); + console.warn("You failed to specify what you want"); + console.log("For more info on how to use the plugin, please see: https://github.com/kasperlegarth/hashtaghistory.js"); + console.groupEnd(); + return false; } + determineType(settings.get); + + const determineType = function(searchString) { + if(searchString.indexOf("@") > -1) { + settings.type = "user"; + settings.get = searchString.substring(searchString.indexOf('@') + 1); + } else if(searchString.indexOf("#") > -1) { + settings.type = "hashtag"; + settings.get = searchString.substring(searchString.indexOf('#') + 1); + } else { + settings.type = "hashtag"; + settings.get = searchString; + } + } + const getImageSize = function(wantedImageSize) { switch(wantedImageSize) { case 150: @@ -54,8 +75,10 @@ return html; }; + + $.ajax({ - url: "https://www.instagram.com/explore/tags/" + settings.hashtag + "/?__a=1", + url: "https://www.instagram.com/combine_dk/?__a=1", success: function(data) { let posts = data.graphql.hashtag.edge_hashtag_to_media.edges; From 3a7980682ee1b1567278bee78af133e95f66ae6d Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 09:43:51 +0200 Subject: [PATCH 02/14] Some structure changes --- .gitignore | 1 + .vscode/iisexpress.json | 2 +- demo/demo.js | 2 +- hashtaghistory.js | 21 +++++++++++++++++++-- index.html | 4 ++-- 5 files changed, 24 insertions(+), 6 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..75ec3f0 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode/* \ No newline at end of file diff --git a/.vscode/iisexpress.json b/.vscode/iisexpress.json index 9df36bb..0d5fdd4 100644 --- a/.vscode/iisexpress.json +++ b/.vscode/iisexpress.json @@ -1,5 +1,5 @@ { - "port": 30707, + "port": 36822, "path": "c:\\Users\\kaspe\\Google Drev\\Egne Projekter\\hashtaghistory.js", "clr": "v4.0", "protocol": "http" diff --git a/demo/demo.js b/demo/demo.js index 4471d19..8ffb713 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -24,7 +24,7 @@ $(document).ready(function() { $(this).html(highlight($(this).html())); }); - $('#demo1').hashtaghistory(''); + $('#demo1').hashtaghistory('coding'); let playgroundOptions = { hashtag: 'summer', diff --git a/hashtaghistory.js b/hashtaghistory.js index 859617c..98f51e8 100644 --- a/hashtaghistory.js +++ b/hashtaghistory.js @@ -1,6 +1,7 @@ (function($) { $.fn.hashtaghistory = function(userSettings) { let $container = this; + let searchUrl = ""; let settings = $.extend({ get : "", type : "", @@ -8,6 +9,7 @@ limit : 6, link : true }, userSettings); + if(typeof userSettings == "string") { settings.get = userSettings; @@ -57,6 +59,17 @@ const generateHtml = function(postsObject) { let html = ""; + console.log(postsObject); + + switch (settings.type) { + case user: + + break; + + default: + break; + } + for(var i = 0; i < settings.limit; i++) { if(postsObject[i] !== undefined) { @@ -75,10 +88,14 @@ return html; }; - + if(settings.type == "user") { + searchUrl = "https://www.instagram.com/" + settings.get + "/?__a=1" + } else { + searchUrl = "https://www.instagram.com/explore/tags/" + settings.get + "/?__a=1"; + } $.ajax({ - url: "https://www.instagram.com/combine_dk/?__a=1", + url: searchUrl, success: function(data) { let posts = data.graphql.hashtag.edge_hashtag_to_media.edges; diff --git a/index.html b/index.html index b789dc4..af9079b 100644 --- a/index.html +++ b/index.html @@ -29,8 +29,8 @@

Introdoctuon

Getting startet
It is really simple to use the plugin all you need to to is include jQuery and the hashtaghistory.js file where you include your other scrips in the project.

- - + <script src="jquery.min.js"></script> +<script src="path/to/script/hashtaghistory.js"></script>

Then you just need to call the plugin on a DOM element that you want to be a container for the images. $("#demo1").hashtaghistory("coding"); There are only one required parmeter, and that is the hashtag you want to show the feed from.

This will give you the following output:

From d2a9f6986cae866694ff25bb37c34c65f44a321f Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 10:50:26 +0200 Subject: [PATCH 03/14] Renamed plugin and implemented user feeds --- demo/demo.js | 14 ++--- index.html | 8 +-- hashtaghistory.js => instastory.js | 84 +++++++++++++++++------------- 3 files changed, 58 insertions(+), 48 deletions(-) rename hashtaghistory.js => instastory.js (50%) diff --git a/demo/demo.js b/demo/demo.js index 8ffb713..43c6c2c 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -24,29 +24,29 @@ $(document).ready(function() { $(this).html(highlight($(this).html())); }); - $('#demo1').hashtaghistory('coding'); + $('#demo1').instastory('#coding'); let playgroundOptions = { - hashtag: 'summer', + get: '@instagram', imageSize: 240, limit: 9, link: true }; - $('#playground-result').hashtaghistory(playgroundOptions); + $('#playground-result').instastory(playgroundOptions); $('#new-feed').click(function() { - let newHashtag = $('#hashtag-input').val(); + let newSource = $('#hashtag-input').val(); let newLimit = $('#limit-input').val(); - if(newHashtag !== '') { - playgroundOptions.hashtag = newHashtag; + if(newSource !== '') { + playgroundOptions.get = newSource; } if(newLimit !== '') { playgroundOptions.limit = newLimit; } - $('#playground-result').hashtaghistory(playgroundOptions); + $('#playground-result').instastory(playgroundOptions); }); }); diff --git a/index.html b/index.html index af9079b..4cdb4a8 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,8 @@

hashtaghistory.js

The simple instagram feed
- View on Github - Download zip (Demo included) + View on Github + Download zip (Demo included)
@@ -30,7 +30,7 @@

Introdoctuon

It is really simple to use the plugin all you need to to is include jQuery and the hashtaghistory.js file where you include your other scrips in the project.

<script src="jquery.min.js"></script> -<script src="path/to/script/hashtaghistory.js"></script> +<script src="path/to/script/instastory.js"></script>

Then you just need to call the plugin on a DOM element that you want to be a container for the images. $("#demo1").hashtaghistory("coding"); There are only one required parmeter, and that is the hashtag you want to show the feed from.

This will give you the following output:

@@ -53,7 +53,7 @@
How many items do you want?
- + \ No newline at end of file diff --git a/hashtaghistory.js b/instastory.js similarity index 50% rename from hashtaghistory.js rename to instastory.js index 98f51e8..b9a550e 100644 --- a/hashtaghistory.js +++ b/instastory.js @@ -1,5 +1,5 @@ (function($) { - $.fn.hashtaghistory = function(userSettings) { + $.fn.instastory = function(userSettings) { let $container = this; let searchUrl = ""; let settings = $.extend({ @@ -10,7 +10,6 @@ link : true }, userSettings); - if(typeof userSettings == "string") { settings.get = userSettings; } @@ -18,14 +17,12 @@ if(settings.get == "") { console.group("Instastory.js log"); console.warn("You failed to specify what you want"); - console.log("For more info on how to use the plugin, please see: https://github.com/kasperlegarth/hashtaghistory.js"); + console.log("For more info on how to use the plugin, please see: https://github.com/kasperlegarth/instastory.js"); console.groupEnd(); return false; } - determineType(settings.get); - const determineType = function(searchString) { if(searchString.indexOf("@") > -1) { settings.type = "user"; @@ -39,43 +36,61 @@ } } - const getImageSize = function(wantedImageSize) { - switch(wantedImageSize) { - case 150: - return 0; - case 240: - return 1; - case 320: - return 2; - case 480: - return 3; - case 640: - return 4; - default: - return 0; + const determineUrl = function(searchType) { + if(searchType == "user") { + searchUrl = "https://www.instagram.com/" + settings.get + "/?__a=1" + } else { + searchUrl = "https://www.instagram.com/explore/tags/" + settings.get + "/?__a=1"; } + } + + const getImageSize = function(post) { + const wantedImageSize = settings.imageSize; + + if(typeof wantedImageSize == "number") { + switch(wantedImageSize) { + case 150: + return post.thumbnail_resources[0].src; + case 240: + return post.thumbnail_resources[1].src; + case 320: + return post.thumbnail_resources[2].src; + case 480: + return post.thumbnail_resources[3].src; + case 640: + return post.thumbnail_resources[4].src; + default: + return post.thumbnail_resources[0].src; + } + } else { + return post.display_url; + } + }; - const generateHtml = function(postsObject) { + const generateHtml = function(ajaxResult) { let html = ""; - - console.log(postsObject); - + let postsObject = {}; + switch (settings.type) { - case user: - + case "user": + postsObject = ajaxResult.edge_owner_to_timeline_media; break; default: + postsObject = ajaxResult.edge_hashtag_to_media; break; } + let posts = postsObject.edges; + + for(var i = 0; i < settings.limit; i++) { - if(postsObject[i] !== undefined) { - let post = postsObject[i].node; - - let tempHtml = "" + post.accessibility_caption + "" + if(posts[i] !== undefined) { + let post = posts[i].node; + + let tempHtml = "" + post.accessibility_caption + "" if(settings.link) { tempHtml = "" + tempHtml + ""; @@ -88,18 +103,13 @@ return html; }; - if(settings.type == "user") { - searchUrl = "https://www.instagram.com/" + settings.get + "/?__a=1" - } else { - searchUrl = "https://www.instagram.com/explore/tags/" + settings.get + "/?__a=1"; - } + determineType(settings.get); + determineUrl(settings.type); $.ajax({ url: searchUrl, success: function(data) { - let posts = data.graphql.hashtag.edge_hashtag_to_media.edges; - - $container.html(generateHtml(posts)); + $container.html(generateHtml(data.graphql[settings.type])); } }); } From 8d075570df61d6bec915237dc08cbd310e9322f8 Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 12:10:43 +0200 Subject: [PATCH 04/14] Implemented templateing --- demo/demo.js | 3 ++- index.html | 2 +- instastory.js | 46 ++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 45 insertions(+), 6 deletions(-) diff --git a/demo/demo.js b/demo/demo.js index 43c6c2c..b275d8a 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -30,7 +30,8 @@ $(document).ready(function() { get: '@instagram', imageSize: 240, limit: 9, - link: true + link: true, + template: '
{{accessibility_caption}}Likes: {{likes}} - Comments: {{comments}}
' }; $('#playground-result').instastory(playgroundOptions); diff --git a/index.html b/index.html index 4cdb4a8..c0a978e 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@

hashtaghistory.js

The simple instagram feed
View on Github - Download zip (Demo included) + Download zip (Demo included)
diff --git a/instastory.js b/instastory.js index b9a550e..de48ac5 100644 --- a/instastory.js +++ b/instastory.js @@ -7,7 +7,8 @@ type : "", imageSize : 150, limit : 6, - link : true + link : true, + template : "" }, userSettings); if(typeof userSettings == "string") { @@ -68,6 +69,29 @@ }; + const buildTemplate = function(post) { + String.prototype.allReplace = function(obj) { + let retStr = this; + for (let x in obj) { + retStr = retStr.replace(new RegExp(x, "g"), obj[x]); + } + return retStr; + }; + + let templateCodes = { + "{{accessibility_caption}}" : post.accessibility_caption, + "{{caption}}": post.edge_media_to_caption.edges[0].node.text, + "{{comments}}": post.edge_media_to_comment.count, + "{{image}}": getImageSize(post), + "{{likes}}": post.edge_liked_by.count, + "{{link}}": "https://www.instagram.com/p/"+ post.shortcode, + } + + let template = settings.template.allReplace(templateCodes); + + return template; + } + const generateHtml = function(ajaxResult) { let html = ""; let postsObject = {}; @@ -89,11 +113,16 @@ if(posts[i] !== undefined) { let post = posts[i].node; + let tempHtml = ""; - let tempHtml = "" + post.accessibility_caption + "" + if(settings.template != "") { + tempHtml = buildTemplate(post); + } else { + tempHtml = "" + post.accessibility_caption + "" - if(settings.link) { - tempHtml = "" + tempHtml + ""; + if(settings.link) { + tempHtml = "" + tempHtml + ""; + } } html += tempHtml; @@ -111,6 +140,15 @@ success: function(data) { $container.html(generateHtml(data.graphql[settings.type])); } + }).fail(function(data) { + switch(data.status) { + case 404: + console.warn("The " + settings.type + " do not exsists, please try another one"); + break; + default: + console.warn('An unknow error happend'); + break; + } }); } })(jQuery); From 6d7360443ff543bae0fa525ebccb9f41d9bdb282 Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 13:26:22 +0200 Subject: [PATCH 05/14] Updated demo --- demo/demo-style.min.css | 2 +- demo/demo-style.min.css.map | 2 +- demo/demo-style.scss | 79 +++++++++++++++++++++++++++++++------ demo/demo.js | 29 +++++++++++++- index.html | 14 +++---- 5 files changed, 105 insertions(+), 21 deletions(-) diff --git a/demo/demo-style.min.css b/demo/demo-style.min.css index 4b9e190..41823f9 100644 --- a/demo/demo-style.min.css +++ b/demo/demo-style.min.css @@ -1,2 +1,2 @@ -*{-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:'Poppins', sans-serif;font-size:18px;line-height:1.65;background-color:#f1f2f3}h1,h2,h3,h4,h5,h6{font-family:'Titillium Web', sans-serif}h2{font-size:1.75rem}small{font-size:0.8rem}small.note{display:block;padding:8px 12px;background-color:#e4e6e8;border-radius:4px}.container{margin:0 auto;padding:30px;max-width:900px}header h1{margin:0;font-size:3.5rem}header h1+.sub{font-size:2rem}header a{color:slategray;text-decoration:none}header a:not(:last-child){margin:0 30px 0 0}main{background-color:#ffffff;border-radius:8px}section{display:-webkit-box;display:-ms-flexbox;display:flex}section:not(:last-child){margin-bottom:50px;padding-bottom:50px;border-bottom:solid 1px #e4e6e8}.text h1,.text h2,.text h3,.text h4,.text h5,.text h6{margin:0 0 15px}.text p{margin:0 0 10px}.text p:last-child{margin:0}input{margin:0 0 30px;padding:12px;width:100%;font-size:18px;font-family:'Poppins', sans-serif;border:solid 2px slategray;border-radius:4px}button{padding:12px 0;width:100%;color:darkslategray;font-size:18px;font-family:'Poppins', sans-serif;text-align:center;background-color:#C3E88D;border:none}.playground{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:60px;padding:30px 0}.playground .controls{-ms-flex-negative:0;flex-shrink:0;margin:0 30px 0 0;padding:30px;background-color:#fff;width:35%;border-radius:8px}.playground .result{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:-10px;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:start;align-content:flex-start}.playground .result a{display:block;margin:10px 0;width:calc(33.3333% - 10px)}.playground .result a img{display:block;width:100%;height:auto;border-radius:4px}#demo1{display:-webkit-box;display:-ms-flexbox;display:flex;margin:20px -5px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}#demo1 a{display:block;padding:5px;width:16.66666%}#demo1 a img{width:100%;height:auto;border-radius:4px}#demo1+.note{margin-top:-20px}.highlight-me{display:inline-block;padding:5px 10px;color:#89DDFF;font-size:0.95rem;background-color:#474747;border-radius:8px}.highlight-me.multiline,.highlight-me.block{display:block;margin:10px 0;padding:25px;white-space:pre-line}.highlight-me.block{width:50%}.highlight-me [data-type="tag"]{color:#E9716C}.highlight-me [data-type="attr"]{color:#FFCB6B}.highlight-me [data-type="val"]{color:#C3E88D}.highlight-me [data-type="plain"]{color:#fff} +*{-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:'Poppins', sans-serif;font-size:18px;line-height:1.65;background-color:#f1f2f3}h1,h2,h3,h4,h5,h6{font-family:'Titillium Web', sans-serif}h2{font-size:1.75rem}small{font-size:0.8rem}small.note{display:block;padding:8px 12px;background-color:#e4e6e8;border-radius:4px}.container{margin:0 auto;padding:30px;max-width:900px}header h1{margin:0;font-size:3.5rem}header h1+.sub{font-size:2rem}header a{color:slategray;text-decoration:none}header a:not(:last-child){margin:0 30px 0 0}main{background-color:#ffffff;border-radius:8px}section{display:-webkit-box;display:-ms-flexbox;display:flex}section:not(:last-child){margin-bottom:50px;padding-bottom:50px;border-bottom:solid 1px #e4e6e8}.text h1,.text h2,.text h3,.text h4,.text h5,.text h6{margin:0 0 15px}.text p{margin:0 0 10px}.text p:last-child{margin:0}input{margin:0 0 30px;padding:12px;width:100%;font-size:18px;font-family:'Poppins', sans-serif;border:solid 2px slategray;border-radius:4px}button{padding:12px 0;width:100%;color:darkslategray;font-size:18px;font-family:'Poppins', sans-serif;text-align:center;background-color:#C3E88D;border:none}.playground{margin-bottom:60px;padding:30px 0}.playground .controls{margin:0 0 30px;padding:30px;background-color:#fff;border-radius:8px}.playground .result{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:start;align-content:flex-start}.playground .result .post{position:relative;display:block;margin:0 0 2%;width:32%;border-radius:4px;overflow:hidden}.playground .result .post img{position:absolute;top:50%;left:0;width:100%;border-radius:4px;-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}.playground .result .post .meta{position:absolute;left:0;bottom:0;display:block;padding:15px;width:100%;height:60px;color:#fff;font-size:13px;text-decoration:none;background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(60%, rgba(0,0,0,0.65)), to(rgba(0,0,0,0.65)));background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.65) 100%);-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden}.playground .result .post .meta p{margin:0 0 20px;opacity:0;visibility:hidden}.playground .result .post .meta .stats{position:absolute;left:15px;right:15px;bottom:10px;text-align:center}.playground .result .post .meta .stats i{margin:0 10px 0 0}.playground .result .post .meta .stats .likes{margin:0 30px 0 0}.playground .result .post::after{display:block;padding-top:100%;content:''}.playground .result .post:hover .meta{height:100%;background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.65)), color-stop(60%, rgba(0,0,0,0.65)), to(rgba(0,0,0,0.65)));background:linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.65) 100%)}.playground .result .post:hover .meta p{opacity:1;visibility:visible}#demo1{display:-webkit-box;display:-ms-flexbox;display:flex;margin:20px -5px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}#demo1 a{display:block;padding:5px;width:16.66666%}#demo1 a img{width:100%;height:auto;border-radius:4px}#demo1+.note{margin-top:-20px}.highlight-me{display:inline-block;padding:5px 10px;color:#89DDFF;font-size:0.95rem;background-color:#474747;border-radius:8px}.highlight-me.multiline,.highlight-me.block{display:block;margin:10px 0;padding:25px;white-space:pre-line}.highlight-me.block{width:50%}.highlight-me [data-type="tag"]{color:#E9716C}.highlight-me [data-type="attr"]{color:#FFCB6B}.highlight-me [data-type="val"]{color:#C3E88D}.highlight-me [data-type="plain"]{color:#fff} /*# sourceMappingURL=demo-style.min.css.map */ \ No newline at end of file diff --git a/demo/demo-style.min.css.map b/demo/demo-style.min.css.map index ff1c546..04f98e7 100644 --- a/demo/demo-style.min.css.map +++ b/demo/demo-style.min.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "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", + "mappings": "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", "sources": [ "demo-style.scss" ], diff --git a/demo/demo-style.scss b/demo/demo-style.scss index 53616f1..6b5017b 100644 --- a/demo/demo-style.scss +++ b/demo/demo-style.scss @@ -115,36 +115,93 @@ button { } .playground { - display: flex; margin-bottom: 60px; padding: 30px 0; .controls { - flex-shrink: 0; - margin: 0 30px 0 0; + margin: 0 0 30px; padding: 30px; background-color: #fff; - width: 35%; border-radius: 8px; } .result { display: flex; - margin-top: -10px; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; - a { + .post { + position: relative; display: block; - margin: 10px 0; - width: calc(33.3333% - 10px); - + margin: 0 0 2%; + width: 32%; + border-radius: 4px; + overflow: hidden; + img { - display: block; + position: absolute; + top: 50%; + left: 0; width: 100%; - height: auto; border-radius: 4px; + transform: translate(0, -50%); + } + + .meta { + position: absolute; + left: 0; + bottom: 0; + display: block; + padding: 15px; + width: 100%; + height: 60px; + color: #fff; + font-size: 13px; + text-decoration: none; + background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); + transition: all .5s ease-in-out; + overflow: hidden; + + p { + margin: 0 0 20px; + opacity: 0; + visibility: hidden; + } + + .stats { + position: absolute; + left: 15px; + right: 15px; + bottom: 10px; + text-align: center; + + i { + margin: 0 10px 0 0; + } + + .likes { + margin: 0 30px 0 0; + } + } + } + + &::after { + display: block; + padding-top: 100%; + content: ''; + } + + &:hover { + .meta { + height: 100%; + background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); + + p { + opacity: 1; + visibility: visible; + } + } } } } diff --git a/demo/demo.js b/demo/demo.js index b275d8a..3309a55 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -31,11 +31,25 @@ $(document).ready(function() { imageSize: 240, limit: 9, link: true, - template: '
{{accessibility_caption}}Likes: {{likes}} - Comments: {{comments}}
' + template: '
{{accessibility_caption}}

{{caption}}

{{comments}}
' }; $('#playground-result').instastory(playgroundOptions); + setTimeout(function() { + $('#playground-result .post').each(function() { + let currentCaption = $(this).find('.meta p').text(); + let newCaption = currentCaption; + + if(currentCaption.length > 390) { + newCaption = currentCaption.substring(0, 387) + '...'; + } + + $(this).find('.meta p').text(newCaption); + }); + }, 2000); + + $('#new-feed').click(function() { let newSource = $('#hashtag-input').val(); let newLimit = $('#limit-input').val(); @@ -49,5 +63,18 @@ $(document).ready(function() { } $('#playground-result').instastory(playgroundOptions); + + setTimeout(function() { + $('#playground-result .post').each(function() { + let currentCaption = $(this).find('.meta p').text(); + let newCaption = currentCaption; + + if(currentCaption.length > 390) { + newCaption = currentCaption.substring(0, 387) + '...'; + } + + $(this).find('.meta p').text(newCaption); + }); + }, 2000); }); }); diff --git a/index.html b/index.html index c0a978e..a44f143 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - hashtaghistory.js - The simple instagram feed + instastory.js - The simple instagram feed @@ -12,18 +12,18 @@
-

hashtaghistory.js

+

instastory.js

The simple instagram feed
View on Github - Download zip (Demo included) + Download zip

Introdoctuon

-

hashtaghistory.js is a jQuery plugin to make it easy for you to make an instagram feed from a hashtag. It uses a standard Ajax call to a standard instagram url witch provide the data in JSON format. That means no need for app token client ids.

+

instastory.js is a jQuery plugin to make it easy for you to make an instagram feed from a hashtag or a user (that is not private). It uses a standard Ajax call to a standard instagram url witch provide the data in JSON format. That means no need for app token client ids.

The only dependency to make it work is jQuery.

Getting startet
@@ -32,7 +32,7 @@

Introdoctuon

<script src="jquery.min.js"></script> <script src="path/to/script/instastory.js"></script> -

Then you just need to call the plugin on a DOM element that you want to be a container for the images. $("#demo1").hashtaghistory("coding"); There are only one required parmeter, and that is the hashtag you want to show the feed from.

+

Then you just need to call the plugin on a DOM element that you want to be a container for the images. $("#demo1").instastory("coding"); There are only one required parmeter, and that is the hashtag you want to show the feed from.

This will give you the following output:

Note! The styling is made for this demo only, it is not included in the plugin. @@ -44,8 +44,8 @@

Introdoctuon

Try it yourself

See the plugin in action

-
What hastag do you want to get the freed from?
- +
What do you want to generate a feed from? - Use # or @ like you would on instagram.
+
How many items do you want?
From de3df0466c32881fe837446718d67fff6e17da12 Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 13:29:37 +0200 Subject: [PATCH 06/14] updated demo page --- demo/demo-style.min.css | 2 +- demo/demo-style.min.css.map | 2 +- demo/demo-style.scss | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/demo/demo-style.min.css b/demo/demo-style.min.css index 41823f9..51946cf 100644 --- a/demo/demo-style.min.css +++ b/demo/demo-style.min.css @@ -1,2 +1,2 @@ -*{-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:'Poppins', sans-serif;font-size:18px;line-height:1.65;background-color:#f1f2f3}h1,h2,h3,h4,h5,h6{font-family:'Titillium Web', sans-serif}h2{font-size:1.75rem}small{font-size:0.8rem}small.note{display:block;padding:8px 12px;background-color:#e4e6e8;border-radius:4px}.container{margin:0 auto;padding:30px;max-width:900px}header h1{margin:0;font-size:3.5rem}header h1+.sub{font-size:2rem}header a{color:slategray;text-decoration:none}header a:not(:last-child){margin:0 30px 0 0}main{background-color:#ffffff;border-radius:8px}section{display:-webkit-box;display:-ms-flexbox;display:flex}section:not(:last-child){margin-bottom:50px;padding-bottom:50px;border-bottom:solid 1px #e4e6e8}.text h1,.text h2,.text h3,.text h4,.text h5,.text h6{margin:0 0 15px}.text p{margin:0 0 10px}.text p:last-child{margin:0}input{margin:0 0 30px;padding:12px;width:100%;font-size:18px;font-family:'Poppins', sans-serif;border:solid 2px slategray;border-radius:4px}button{padding:12px 0;width:100%;color:darkslategray;font-size:18px;font-family:'Poppins', sans-serif;text-align:center;background-color:#C3E88D;border:none}.playground{margin-bottom:60px;padding:30px 0}.playground .controls{margin:0 0 30px;padding:30px;background-color:#fff;border-radius:8px}.playground .result{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:start;align-content:flex-start}.playground .result .post{position:relative;display:block;margin:0 0 2%;width:32%;border-radius:4px;overflow:hidden}.playground .result .post img{position:absolute;top:50%;left:0;width:100%;border-radius:4px;-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}.playground .result .post .meta{position:absolute;left:0;bottom:0;display:block;padding:15px;width:100%;height:60px;color:#fff;font-size:13px;text-decoration:none;background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(60%, rgba(0,0,0,0.65)), to(rgba(0,0,0,0.65)));background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.65) 100%);-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden}.playground .result .post .meta p{margin:0 0 20px;opacity:0;visibility:hidden}.playground .result .post .meta .stats{position:absolute;left:15px;right:15px;bottom:10px;text-align:center}.playground .result .post .meta .stats i{margin:0 10px 0 0}.playground .result .post .meta .stats .likes{margin:0 30px 0 0}.playground .result .post::after{display:block;padding-top:100%;content:''}.playground .result .post:hover .meta{height:100%;background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.65)), color-stop(60%, rgba(0,0,0,0.65)), to(rgba(0,0,0,0.65)));background:linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.65) 100%)}.playground .result .post:hover .meta p{opacity:1;visibility:visible}#demo1{display:-webkit-box;display:-ms-flexbox;display:flex;margin:20px -5px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}#demo1 a{display:block;padding:5px;width:16.66666%}#demo1 a img{width:100%;height:auto;border-radius:4px}#demo1+.note{margin-top:-20px}.highlight-me{display:inline-block;padding:5px 10px;color:#89DDFF;font-size:0.95rem;background-color:#474747;border-radius:8px}.highlight-me.multiline,.highlight-me.block{display:block;margin:10px 0;padding:25px;white-space:pre-line}.highlight-me.block{width:50%}.highlight-me [data-type="tag"]{color:#E9716C}.highlight-me [data-type="attr"]{color:#FFCB6B}.highlight-me [data-type="val"]{color:#C3E88D}.highlight-me [data-type="plain"]{color:#fff} +*{-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:'Poppins', sans-serif;font-size:18px;line-height:1.65;background-color:#f1f2f3}h1,h2,h3,h4,h5,h6{font-family:'Titillium Web', sans-serif}h2{font-size:1.75rem}small{font-size:0.8rem}small.note{display:block;padding:8px 12px;background-color:#e4e6e8;border-radius:4px}.container{margin:0 auto;padding:30px;max-width:900px}header h1{margin:0;font-size:3.5rem}header h1+.sub{font-size:2rem}header a{color:slategray;text-decoration:none}header a:not(:last-child){margin:0 30px 0 0}main{background-color:#ffffff;border-radius:8px}section{display:-webkit-box;display:-ms-flexbox;display:flex}section:not(:last-child){margin-bottom:50px;padding-bottom:50px;border-bottom:solid 1px #e4e6e8}.text h1,.text h2,.text h3,.text h4,.text h5,.text h6{margin:0 0 15px}.text p{margin:0 0 10px}.text p:last-child{margin:0}input{margin:0 0 30px;padding:12px;width:100%;font-size:18px;font-family:'Poppins', sans-serif;border:solid 2px slategray;border-radius:4px}button{padding:12px 0;width:100%;color:darkslategray;font-size:18px;font-family:'Poppins', sans-serif;text-align:center;background-color:#C3E88D;border:none}.playground{margin-bottom:60px;padding:30px 0}.playground .controls{margin:0 0 30px;padding:30px;background-color:#fff;border-radius:8px}.playground .result{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:start;align-content:flex-start}.playground .result .post{position:relative;display:block;margin:0 0 2%;width:32%;border-radius:4px;overflow:hidden}.playground .result .post img{position:absolute;top:50%;left:0;width:100%;border-radius:4px;-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}.playground .result .post .meta{position:absolute;left:0;bottom:0;display:block;padding:15px;width:100%;height:60px;color:#fff;font-size:13px;text-decoration:none;background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(60%, rgba(0,0,0,0.65)), to(rgba(0,0,0,0.65)));background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.65) 100%);-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden}.playground .result .post .meta p{margin:0 0 20px;opacity:0;visibility:hidden;-webkit-transition:all .5s ease;transition:all .5s ease}.playground .result .post .meta .stats{position:absolute;left:15px;right:15px;bottom:10px;text-align:center}.playground .result .post .meta .stats i{margin:0 10px 0 0}.playground .result .post .meta .stats .likes{margin:0 30px 0 0}.playground .result .post::after{display:block;padding-top:100%;content:''}.playground .result .post:hover .meta{height:100%;background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.65)), color-stop(60%, rgba(0,0,0,0.65)), to(rgba(0,0,0,0.65)));background:linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.65) 100%)}.playground .result .post:hover .meta p{opacity:1;visibility:visible}#demo1{display:-webkit-box;display:-ms-flexbox;display:flex;margin:20px -5px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}#demo1 a{display:block;padding:5px;width:16.66666%}#demo1 a img{width:100%;height:auto;border-radius:4px}#demo1+.note{margin-top:-20px}.highlight-me{display:inline-block;padding:5px 10px;color:#89DDFF;font-size:0.95rem;background-color:#474747;border-radius:8px}.highlight-me.multiline,.highlight-me.block{display:block;margin:10px 0;padding:25px;white-space:pre-line}.highlight-me.block{width:50%}.highlight-me [data-type="tag"]{color:#E9716C}.highlight-me [data-type="attr"]{color:#FFCB6B}.highlight-me [data-type="val"]{color:#C3E88D}.highlight-me [data-type="plain"]{color:#fff} /*# sourceMappingURL=demo-style.min.css.map */ \ No newline at end of file diff --git a/demo/demo-style.min.css.map b/demo/demo-style.min.css.map index 04f98e7..0419d10 100644 --- a/demo/demo-style.min.css.map +++ b/demo/demo-style.min.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "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", + "mappings": "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", "sources": [ "demo-style.scss" ], diff --git a/demo/demo-style.scss b/demo/demo-style.scss index 6b5017b..5802469 100644 --- a/demo/demo-style.scss +++ b/demo/demo-style.scss @@ -167,6 +167,7 @@ button { margin: 0 0 20px; opacity: 0; visibility: hidden; + transition: all .5s ease; } .stats { From d87fb6806e9d7e9b73606efbfb37364cbf41224c Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 13:55:58 +0200 Subject: [PATCH 07/14] Updated the readme --- README.md | 26 +++++++++++++++++++++----- demo/demo.js | 4 ++-- instastory.js | 4 +++- 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index d3030a1..7dd6539 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,11 @@ # hashtagstory.js -This is a jQuery plugin to make it easy to get hashtags from instagram. No need of access tokens and other stuff, only thing needed is jQuery. +This is a jQuery plugin to make it easier for developers to implement instagram feeds on websites. There is no need for access tokens and stuff like that. Use good old Jquery. **Table of contents** * [Getting startet](#getting-startet) * [Options](#options) + * [Default options](#default-options) + * [Templating](#templating) * [License](#license) ## Getting startet @@ -17,7 +19,7 @@ It is really simple to use the plugin all you need to to is include jQuery and t Then the only thing left is to call the plugin on the DOM element that should be the container, call it with a hashtag that you want the history from. ```javascript -$("#container").hashtaghistory("coding"); +$("#container").hashtaghistory("#coding"); ``` As default the above line will give you the 6 most recent posts with the hashtag _"coding"_ and will output the following html into the container element: @@ -58,9 +60,23 @@ Here is the full list of options and their default value. | Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | get | string | "" | Define wath hashtag to get the images from. This is the only option that is required to make it work. If nothing is defined as the hashtag, the plugin will return false. | -| imageSize | int | 150 | Define what size you want the plugin to return the images in. Instagram provide images in the following sizes: `150`, `240`, `320`, `480`, `640`. If the you specify a size that isn't reconized it will return 150. | -| limit | int | 6 | Define how many images you want the plugin to return. The max limit is: `64` if limit is higher than 64 the plugin will only return 64. | -| link | boolean | true | Define if you want the images to be wrapped in links to the post. +| imageSize | int\|string | 150 | Define what size you want the plugin to return the images in. Instagram provide images (thumbnails) in the following sizes: `150`, `240`, `320`, `480`, `640`. You can also get the raw image by defining `"raw"`as you image size. The raw image size have the original dimensions (not a sqaure) If the you specify a size that isn't reconized it will return 150. | +| limit | int | 6 | Define how many images you want the plugin to return. The max limit for an user feed is: `12` and the max limit for a hashtag feed is: `70` if limit is higher than descriped it will return the max limit | +| link | boolean | true | Define if you want the images to be wrapped in links to the post. | +| template | string | "" | Define a custom template for the plugin to use when rendering the html for the feed. This is also create for custom styling. For more info see the [templating section](#templating) | + +### Templating +When using the plugin you have the option to define a string of html to be used by the plugin when it is rendering your feed to the page. Simple example looks like this: +```javascript +options: { + get: '#dog', + template: '{{caption}}' +} +``` + +Here is a full list of tags to be used in the template: +| Tag | Description | +| --- | ----------- | ## License This project is licensed under the MIT Liense - see the [LICENCE.md](LICENSE.md) \ No newline at end of file diff --git a/demo/demo.js b/demo/demo.js index 3309a55..712af64 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -41,8 +41,8 @@ $(document).ready(function() { let currentCaption = $(this).find('.meta p').text(); let newCaption = currentCaption; - if(currentCaption.length > 390) { - newCaption = currentCaption.substring(0, 387) + '...'; + if(currentCaption.length > 350) { + newCaption = currentCaption.substring(0, 347) + '...'; } $(this).find('.meta p').text(newCaption); diff --git a/instastory.js b/instastory.js index de48ac5..e324fa7 100644 --- a/instastory.js +++ b/instastory.js @@ -63,8 +63,10 @@ default: return post.thumbnail_resources[0].src; } - } else { + } else if(wantedImageSize == "raw") { return post.display_url; + } else { + return post.thumbnail_resources[0].src; } }; From 569eb3e883da89ddf989cf6837521641f1522535 Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 14:01:38 +0200 Subject: [PATCH 08/14] updated readme --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 7dd6539..a8c2ccb 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,12 @@ options: { Here is a full list of tags to be used in the template: | Tag | Description | | --- | ----------- | +| {{accessibility_caption}} | Returns the accessibility caption of the image. Great for alt tags, but be aware this it is not always possible for instagram to figure this out and then it returns: `"No photo description available."` | +| {{caption}} | Returns the caption that the user uploaded with the image. | +| {{comments}} | Returns the comment count of the image. | +| {{image}} | Returns the image url in the desired image size. | +| {{likes}} | Returns the number of people that have liked the image. | +| {{link}} | Returns the url for the post (not the same as the image url) | ## License This project is licensed under the MIT Liense - see the [LICENCE.md](LICENSE.md) \ No newline at end of file From 96f92dd7d6a6ef46fc89853f6e26b56d68f750f9 Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 14:02:00 +0200 Subject: [PATCH 09/14] updated ignore --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 75ec3f0..dbe9c82 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ -.vscode/* \ No newline at end of file +.vscode/ \ No newline at end of file From 2bd6771772148ce03495233a4a5ef7167a3f8d7e Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 14:02:46 +0200 Subject: [PATCH 10/14] removed file --- .vscode/iisexpress.json | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 .vscode/iisexpress.json diff --git a/.vscode/iisexpress.json b/.vscode/iisexpress.json deleted file mode 100644 index 0d5fdd4..0000000 --- a/.vscode/iisexpress.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "port": 36822, - "path": "c:\\Users\\kaspe\\Google Drev\\Egne Projekter\\hashtaghistory.js", - "clr": "v4.0", - "protocol": "http" -} From d232d3ff606aeb0726a375ff5e8a55feed74eac0 Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 14:03:13 +0200 Subject: [PATCH 11/14] updated ignore file --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index dbe9c82..75ec3f0 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ -.vscode/ \ No newline at end of file +.vscode/* \ No newline at end of file From 5f4bb3e03823d8d34f9ef9eada780cdbe822444e Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 14:04:19 +0200 Subject: [PATCH 12/14] Updated readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index a8c2ccb..d9d331a 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,7 @@ options: { ``` Here is a full list of tags to be used in the template: + | Tag | Description | | --- | ----------- | | {{accessibility_caption}} | Returns the accessibility caption of the image. Great for alt tags, but be aware this it is not always possible for instagram to figure this out and then it returns: `"No photo description available."` | From bab81d327bd0e5af9f20e9fb2b6ef8641610a5ba Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 14:04:55 +0200 Subject: [PATCH 13/14] updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d9d331a..3e39731 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# hashtagstory.js +# instastory.js This is a jQuery plugin to make it easier for developers to implement instagram feeds on websites. There is no need for access tokens and stuff like that. Use good old Jquery. **Table of contents** From dd62bc5b9c2a61c001cfedd223d8001ab05bd87f Mon Sep 17 00:00:00 2001 From: kasperlegarth Date: Fri, 19 Jul 2019 14:05:51 +0200 Subject: [PATCH 14/14] updated readme --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 3e39731..dcd4b9a 100644 --- a/README.md +++ b/README.md @@ -9,17 +9,17 @@ This is a jQuery plugin to make it easier for developers to implement instagram * [License](#license) ## Getting startet -It is really simple to use the plugin all you need to to is include jQuery and the hashtaghistory.js file where you include your other scrips in the project. +It is really simple to use the plugin all you need to to is include jQuery and the instastory.js file where you include your other scrips in the project. ```html - + ``` Then the only thing left is to call the plugin on the DOM element that should be the container, call it with a hashtag that you want the history from. ```javascript -$("#container").hashtaghistory("#coding"); +$("#container").instastory("#coding"); ``` As default the above line will give you the 6 most recent posts with the hashtag _"coding"_ and will output the following html into the container element: @@ -38,7 +38,7 @@ If you are not the happy with the default options you can overwite some of the o **Directyly on plugin call.** ```javascript -$("#container").hashtaghistory({ +$("#container").instastory({ hashtag: "coding", limit: 9 }); @@ -51,7 +51,7 @@ let options = { limit: 9 }; -$("#container").hashtaghistory(options); +$("#container").instastory(options); ``` ### Default options