From 7470dba97ceef5598e8b5497372129e3c05cf999 Mon Sep 17 00:00:00 2001 From: pixelindustry Date: Mon, 8 Jun 2015 23:11:27 +0200 Subject: [PATCH] Fixed YouTube stream. --- Demo/index.html | 153 +++++++++--------- Demo/socialstream.jquery.js | 302 ------------------------------------ README.md | 9 +- socialstream.jquery.js | 298 ++++++++++++++++++++--------------- 4 files changed, 255 insertions(+), 507 deletions(-) delete mode 100644 Demo/socialstream.jquery.js diff --git a/Demo/index.html b/Demo/index.html index 267f222..d3fd299 100644 --- a/Demo/index.html +++ b/Demo/index.html @@ -2,66 +2,66 @@ - - - - - - - -
-
-

deviant art

-
-
- -
-
-

Instagram

-
-
- -
-
-

Picasa

-
-
- -
-
-

pinterest

-
-
- -
-
-

flickr

-
-
- -
-
-

dribbble

-
-
- -
-
-

youtube

-
-
- -
-
-

newsfeed

-
-
- - - - - - + + + + - - \ No newline at end of file + + \ No newline at end of file diff --git a/Demo/socialstream.jquery.js b/Demo/socialstream.jquery.js deleted file mode 100644 index f7a38ed..0000000 --- a/Demo/socialstream.jquery.js +++ /dev/null @@ -1,302 +0,0 @@ -/* - * Widgets for Social Network photo stream. - * - * Author: Pixel Industry - * Website: http://pixel-industry.com - * Version: 1.2 - * - */ - - -(function($){ - $.fn.socialstream = function(options) { - var defaults = { - socialnetwork: 'flickr', - username: 'pixel-industry', - limit: 6, - overlay: true - }; - var options = $.extend(defaults, options); - - return this.each(function() { - var object = $(this); - switch(options.socialnetwork){ - - case 'flickr': - object.append("") - $.getJSON("https://api.flickr.com/services/rest/?method=flickr.people.findByUsername&username=" + options.username + "&format=json&api_key=32ff8e5ef78ef2f44e6a1be3dbcf0617&jsoncallback=?", function(data){ - var user_id = data.user.nsid; - $.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&user_id=" + user_id + "&format=json&api_key=85145f20ba1864d8ff559a3971a0a033&per_page=" + options.limit + "&page=1&extras=url_sq&jsoncallback=?", function(data){ - $.each(data.photos.photo, function(num, photo){ - var photo_author = photo.owner; - var photo_title = photo.title; - var photo_src = photo.url_sq; - var photo_id = photo.id; - var photo_url = "https://www.flickr.com/photos/" + photo_author + "/" + photo_id; - var photo_container = $('').attr({ - src: photo_src, - alt: photo_title - }); - var url_container = $('').attr({ - href: photo_url, - target: '_blank', - title: photo_title - }); - - var tmp = $(url_container).append(photo_container); - if(options.overlay){ - var overlay_div = $('
').addClass('img-overlay'); - $(url_container).append(overlay_div); - } - var li = $('
  • ').append(tmp); - $("ul", object).append(li); - }) - }); - }); - break; - case 'pinterest': - var url = 'http://pinterest.com/' + options.username + '/feed.rss' - var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + encodeURIComponent(url) + "&num=" + options.limit + "&output=json_xml"; - - // Send request - $.getJSON(api, function(data){ - if (data.responseStatus == 200) { - var photofeed = data.responseData.feed; - var overlay_div = ""; - if (!photofeed) { - return false; - } - var html_code = ''; - - $(object).append(html_code); - - } - }); - break; - case 'instagram': - object.append("
      ") - var access_token = "200718541.a4734ab.cc050fa16d6141bf8b709c97ab158f57"; - url = "https://api.instagram.com/v1/users/search?q=" + options.username + "&access_token=" + access_token + "&count=1&callback=?"; - $.getJSON(url, function(data){ - - $.each(data.data, function(i,shot){ - var instagram_username = shot.username; - if (instagram_username == options.username){ - var user_id = shot.id; - - if (user_id != ""){ - url = "https://api.instagram.com/v1/users/" + user_id + "/media/recent/?access_token=" + access_token + "&count=" + options.limit + "&callback=?"; - $.getJSON(url, function(data){ - $.each(data.data, function(i,shot){ - var photo_src = shot.images.thumbnail.url; - var photo_url = shot.link; - - var photo_title = ""; - if (shot.caption != null){ - photo_title = shot.caption.text; - } - - var photo_container = $('').attr({ - src: photo_src, - alt: photo_title - }); - var url_container = $('').attr({ - href: photo_url, - target: '_blank', - title: photo_title - }); - var tmp = $(url_container).append(photo_container); - if(options.overlay){ - var overlay_div = $('
      ').addClass('img-overlay'); - $(url_container).append(overlay_div); - } - var li = $('
    • ').append(tmp); - $("ul", object).append(li); - - }); - }); - } - } - }); - }); - break; - case 'dribbble': - object.append("
        ") - $.getJSON("http://dribbble.com/" + options.username + "/shots.json?callback=?", function(data){ - $.each(data.shots, function(num,shot){ - if (num < options.limit) { - var photo_title = shot.title; - var photo_container = $('').attr({ - src: shot.image_teaser_url, - alt: photo_title - }); - var url_container = $('        ').attr({ - href: shot.url, - target: '_blank', - title: photo_title - }); - var tmp = $(url_container).append(photo_container); - if(options.overlay){ - var overlay_div = $('
        ').addClass('img-overlay'); - $(url_container).append(overlay_div); - } - var li = $('
      • ').append(tmp); - $("ul", object).append(li); - } - }); - - }); - break; - case 'deviantart': - var url = 'http://backend.deviantart.com/rss.xml?type=deviation&q=by%3A' + options.username + '+sort%3Atime+meta%3Aall'; - var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + encodeURIComponent(url) + "&num=" + options.limit + "&output=json_xml"; - - $.getJSON(api, function(data){ - if (data.responseStatus == 200) { - var photofeed = data.responseData.feed; - var overlay_div = ""; - if (!photofeed) { - return false; - - } - var html_code = ''; - - $(object).append(html_code); - - } - }); - - break; - case 'picasa': - var url = 'https://picasaweb.google.com/data/feed/base/user/' + options.username + '?alt=rss&kind=photo&hl=en_US&imgmax=' + options.limit + '&thumbsize=48c'; - var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + encodeURIComponent(url) + "&num=" + options.limit + "&output=json_xml"; - - $.getJSON(api, function(data){ - if (data.responseStatus == 200) { - var photofeed = data.responseData.feed; - var overlay_div = ""; - if (!photofeed) { - return false; - } - var html_code = '
          '; - - for (var i = 0; i < photofeed.entries.length; i++) { - var entry = photofeed.entries[i]; - var $container = $("
          "); - $container.append(entry.content); - var url = entry.link; - var photo_url = $container.find('img').attr('src'); - var photo_title = entry.title; - if(options.overlay){ - var overlay_div = '
          '; - } - - html_code += '
        • ' + overlay_div + '
          • ' - } - html_code += '
        '; - - $(object).append(html_code); - } - }); - break; - case 'youtube': - var url = 'https://gdata.youtube.com/feeds/api/users/' + options.username + '/uploads'; - var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + encodeURIComponent(url) + "&num=" + options.limit + "&output=json_xml"; - - $.getJSON(api, function(data){ - if (data.responseStatus == 200) { - var photofeed = data.responseData.feed; - var overlay_div = ""; - if (!photofeed) { - return false; - } - var html_code = '
          '; - - for (var i = 0; i < photofeed.entries.length; i++) { - var entry = photofeed.entries[i]; - var $container = $("
          "); - $container.append(entry.content); - var url = entry.link; - - var results = url.match("[\\?&]v=([^&#]*)"); - var vid = results[1]; - var photo_url = "http://img.youtube.com/vi/" + vid + "/2.jpg"; - var photo_title = entry.title; - if(options.overlay){ - var overlay_div = '
          '; - } - - html_code += '
        • ' + overlay_div + '
          • ' - } - html_code += '
        '; - - $(object).append(html_code); - } - }); - break; - - case 'newsfeed': - var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + encodeURIComponent(options.username) + "&num=" + options.limit + "&output=json_xml"; - - $.getJSON(api, function(data){ - if (data.responseStatus == 200) { - var photofeed = data.responseData.feed; - var overlay_div = ""; - if (!photofeed) { - return false; - } - var html_code = '
          '; - - for (var i = 0; i < photofeed.entries.length; i++) { - var entry = photofeed.entries[i]; - var $container = $("
          "); - $container.append(entry.content); - var url = entry.link; - var photo_url = $container.find('img').attr('src'); - var photo_title = entry.title; - if(options.overlay){ - var overlay_div = '
          '; - } - - html_code += '
        • ' + overlay_div + '
          • ' - } - html_code += '
        '; - - $(object).append(html_code); - } - }); - break; - } - }); - }; -})(jQuery); \ No newline at end of file diff --git a/README.md b/README.md index 70c86a9..c6c0df0 100644 --- a/README.md +++ b/README.md @@ -179,7 +179,8 @@ $('.dibbble-feed').socialstream({ $('.youtube-feed').socialstream({ socialnetwork: 'youtube', limit: 15, - username: 'your_username_here' + username: 'your_username_here', + apikey: 'you_v3_api_key' }) @@ -211,5 +212,11 @@ $('.newsfeed').socialstream({ every image is one list item. To style it, simply refer to for example ".social-feed.flickr-feed li" in your css file and edit it the way you like. We also included demo with simple html and css styling for easier plugin understanding.

        +

        Change Log

        +

        v1.3

        +
        +- Fixed youtube stream - switched to API v3.
+
        + diff --git a/socialstream.jquery.js b/socialstream.jquery.js index f7a38ed..c19ec58 100644 --- a/socialstream.jquery.js +++ b/socialstream.jquery.js @@ -3,48 +3,49 @@ * * Author: Pixel Industry * Website: http://pixel-industry.com - * Version: 1.2 + * Version: 1.3 * */ -(function($){ - $.fn.socialstream = function(options) { - var defaults = { +(function ($) { + $.fn.socialstream = function (options) { + var defaults = { socialnetwork: 'flickr', username: 'pixel-industry', limit: 6, - overlay: true - }; - var options = $.extend(defaults, options); - - return this.each(function() { - var object = $(this); - switch(options.socialnetwork){ - + overlay: true, + apikey: false + }; + var options = $.extend(defaults, options); + + return this.each(function () { + var object = $(this); + switch (options.socialnetwork) { + case 'flickr': object.append("
          ") - $.getJSON("https://api.flickr.com/services/rest/?method=flickr.people.findByUsername&username=" + options.username + "&format=json&api_key=32ff8e5ef78ef2f44e6a1be3dbcf0617&jsoncallback=?", function(data){ + $.getJSON("https://api.flickr.com/services/rest/?method=flickr.people.findByUsername&username=" + options.username + "&format=json&api_key=32ff8e5ef78ef2f44e6a1be3dbcf0617&jsoncallback=?", function (data) { var user_id = data.user.nsid; - $.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&user_id=" + user_id + "&format=json&api_key=85145f20ba1864d8ff559a3971a0a033&per_page=" + options.limit + "&page=1&extras=url_sq&jsoncallback=?", function(data){ - $.each(data.photos.photo, function(num, photo){ + $.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&user_id=" + user_id + "&format=json&api_key=85145f20ba1864d8ff559a3971a0a033&per_page=" + options.limit + "&page=1&extras=url_sq&jsoncallback=?", function (data) { + $.each(data.photos.photo, function (num, photo) { var photo_author = photo.owner; var photo_title = photo.title; var photo_src = photo.url_sq; var photo_id = photo.id; var photo_url = "https://www.flickr.com/photos/" + photo_author + "/" + photo_id; var photo_container = $('').attr({ - src: photo_src, + src: photo_src, alt: photo_title }); var url_container = $('').attr({ - href: photo_url, - target: '_blank', + href: photo_url, + target: '_blank', title: photo_title }); - + var tmp = $(url_container).append(photo_container); - if(options.overlay){ + if (options.overlay) { var overlay_div = $('
          ').addClass('img-overlay'); $(url_container).append(overlay_div); } @@ -52,106 +53,106 @@ $("ul", object).append(li); }) }); - }); + }); break; case 'pinterest': var url = 'http://pinterest.com/' + options.username + '/feed.rss' var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + encodeURIComponent(url) + "&num=" + options.limit + "&output=json_xml"; - + // Send request - $.getJSON(api, function(data){ - if (data.responseStatus == 200) { + $.getJSON(api, function (data) { + if (data.responseStatus == 200) { var photofeed = data.responseData.feed; var overlay_div = ""; if (!photofeed) { - return false; + return false; } var html_code = ''; - + $(object).append(html_code); - + } - }); + }); break; case 'instagram': object.append("
            ") - var access_token = "200718541.a4734ab.cc050fa16d6141bf8b709c97ab158f57"; - url = "https://api.instagram.com/v1/users/search?q=" + options.username + "&access_token=" + access_token + "&count=1&callback=?"; - $.getJSON(url, function(data){ - - $.each(data.data, function(i,shot){ + var access_token = "200718541.a4734ab.cc050fa16d6141bf8b709c97ab158f57"; + url = "https://api.instagram.com/v1/users/search?q=" + options.username + "&access_token=" + access_token + "&count=1&callback=?"; + $.getJSON(url, function (data) { + + $.each(data.data, function (i, shot) { var instagram_username = shot.username; - if (instagram_username == options.username){ + if (instagram_username == options.username) { var user_id = shot.id; - - if (user_id != ""){ - url = "https://api.instagram.com/v1/users/" + user_id + "/media/recent/?access_token=" + access_token + "&count=" + options.limit + "&callback=?"; - $.getJSON(url, function(data){ - $.each(data.data, function(i,shot){ + + if (user_id != "") { + url = "https://api.instagram.com/v1/users/" + user_id + "/media/recent/?access_token=" + access_token + "&count=" + options.limit + "&callback=?"; + $.getJSON(url, function (data) { + $.each(data.data, function (i, shot) { var photo_src = shot.images.thumbnail.url; - var photo_url = shot.link; + var photo_url = shot.link; var photo_title = ""; - if (shot.caption != null){ + if (shot.caption != null) { photo_title = shot.caption.text; } - + var photo_container = $('').attr({ - src: photo_src, + src: photo_src, alt: photo_title }); var url_container = $('').attr({ - href: photo_url, - target: '_blank', + href: photo_url, + target: '_blank', title: photo_title }); var tmp = $(url_container).append(photo_container); - if(options.overlay){ + if (options.overlay) { var overlay_div = $('
            ').addClass('img-overlay'); $(url_container).append(overlay_div); } var li = $('
          • ').append(tmp); $("ul", object).append(li); - + }); }); - } + } } }); - }); + }); break; case 'dribbble': object.append("
              ") - $.getJSON("http://dribbble.com/" + options.username + "/shots.json?callback=?", function(data){ - $.each(data.shots, function(num,shot){ + $.getJSON("http://dribbble.com/" + options.username + "/shots.json?callback=?", function (data) { + $.each(data.shots, function (num, shot) { if (num < options.limit) { var photo_title = shot.title; var photo_container = $('').attr({ - src: shot.image_teaser_url, + src: shot.image_teaser_url, alt: photo_title }); var url_container = $('              ').attr({ - href: shot.url, - target: '_blank', + href: shot.url, + target: '_blank', title: photo_title }); var tmp = $(url_container).append(photo_container); - if(options.overlay){ + if (options.overlay) { var overlay_div = $('
              ').addClass('img-overlay'); $(url_container).append(overlay_div); } @@ -159,144 +160,185 @@ $("ul", object).append(li); } }); - - }); + + }); break; case 'deviantart': var url = 'http://backend.deviantart.com/rss.xml?type=deviation&q=by%3A' + options.username + '+sort%3Atime+meta%3Aall'; var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + encodeURIComponent(url) + "&num=" + options.limit + "&output=json_xml"; - - $.getJSON(api, function(data){ - if (data.responseStatus == 200) { + + $.getJSON(api, function (data) { + if (data.responseStatus == 200) { var photofeed = data.responseData.feed; var overlay_div = ""; if (!photofeed) { return false; - + } var html_code = ''; - + $(object).append(html_code); - + } - }); - + }); + break; case 'picasa': var url = 'https://picasaweb.google.com/data/feed/base/user/' + options.username + '?alt=rss&kind=photo&hl=en_US&imgmax=' + options.limit + '&thumbsize=48c'; var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + encodeURIComponent(url) + "&num=" + options.limit + "&output=json_xml"; - $.getJSON(api, function(data){ - if (data.responseStatus == 200) { + $.getJSON(api, function (data) { + if (data.responseStatus == 200) { var photofeed = data.responseData.feed; var overlay_div = ""; if (!photofeed) { return false; } var html_code = '
                '; - + for (var i = 0; i < photofeed.entries.length; i++) { var entry = photofeed.entries[i]; var $container = $("
                "); $container.append(entry.content); - var url = entry.link; + var url = entry.link; var photo_url = $container.find('img').attr('src'); var photo_title = entry.title; - if(options.overlay){ + if (options.overlay) { var overlay_div = '
                '; } - - html_code += '
              • ' + overlay_div + '
                • ' - } + + html_code += '
              • ' + overlay_div + '
                • ' + } html_code += '
              '; - - $(object).append(html_code); + + $(object).append(html_code); } - }); - break; + }); + break; case 'youtube': - var url = 'https://gdata.youtube.com/feeds/api/users/' + options.username + '/uploads'; - var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + encodeURIComponent(url) + "&num=" + options.limit + "&output=json_xml"; + var pid; + if (options.apikey) { + + // Get Uploads Playlist + $.get( + "https://www.googleapis.com/youtube/v3/channels", { + part: 'contentDetails', + forUsername: options.username, + key: options.apikey + }, + function (data) { + + $.each(data.items, function (i, item) { + //playlist id + pid = item.contentDetails.relatedPlaylists.uploads; + youtubeGetVids(pid); + }); + + } + ); + + } + + //Get Videos + function youtubeGetVids(pid) { + $.get( + "https://www.googleapis.com/youtube/v3/playlistItems", { + part: 'snippet', + maxResults: options.limit, + playlistId: pid, + key: options.apikey + }, + function (data) { + var results; - $.getJSON(api, function(data){ - if (data.responseStatus == 200) { - var photofeed = data.responseData.feed; - var overlay_div = ""; - if (!photofeed) { - return false; - } var html_code = '
                '; - - for (var i = 0; i < photofeed.entries.length; i++) { - var entry = photofeed.entries[i]; + + // loop through videos + $.each(data.items, function (i, item) { + + var photofeed = item.snippet.thumbnails.default.url; + var overlay_div = ""; + if (!photofeed) { + return false; + } + + // create container var $container = $("
                "); - $container.append(entry.content); - var url = entry.link; - - var results = url.match("[\\?&]v=([^&#]*)"); - var vid = results[1]; - var photo_url = "http://img.youtube.com/vi/" + vid + "/2.jpg"; - var photo_title = entry.title; - if(options.overlay){ + + // get image url + var url = 'https://www.youtube.com/watch?v=' + item.snippet.resourceId.videoId; + + // video title + var photo_title = item.snippet.title; + if (options.overlay) { var overlay_div = '
                '; } - - html_code += '
              • ' + overlay_div + '
                • ' - } + + // create html + html_code += '
              • ' + overlay_div + '
                • ' + + }); + html_code += '
              '; - - $(object).append(html_code); + + // append html + $(object).append(html_code); } - }); + ); + } + + + + break; - + case 'newsfeed': var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + encodeURIComponent(options.username) + "&num=" + options.limit + "&output=json_xml"; - $.getJSON(api, function(data){ - if (data.responseStatus == 200) { + $.getJSON(api, function (data) { + if (data.responseStatus == 200) { var photofeed = data.responseData.feed; var overlay_div = ""; if (!photofeed) { return false; } var html_code = '
                '; - + for (var i = 0; i < photofeed.entries.length; i++) { var entry = photofeed.entries[i]; var $container = $("
                "); $container.append(entry.content); - var url = entry.link; + var url = entry.link; var photo_url = $container.find('img').attr('src'); var photo_title = entry.title; - if(options.overlay){ + if (options.overlay) { var overlay_div = '
                '; } - - html_code += '
              • ' + overlay_div + '
                • ' - } + + html_code += '
              • ' + overlay_div + '
                • ' + } html_code += '
              '; - - $(object).append(html_code); + + $(object).append(html_code); } }); break; } - }); - }; + }); + }; })(jQuery); \ No newline at end of file