YouTube Rate (like/dislike) comments, Share, Add To, More - javascript

I'm trying to embed YouTube video on website along with complete section having rating(like, dislike), Share, Add to playlist, More actions and Comments(). Embed iframe is providing just video to play .I know we have YouTube data API V3 to build this but is their any existing library/plugin to integrate ?

this is what i have come up with, try to use the feeds api and get the video data out of it.
my way of doing it is to do a Ajax call to the feeds api.
video_id = "kxxnMYwL9XA";
$.ajax({url: "http://gdata.youtube.com/feeds/api/videos/" + video_id+ "? v=2&alt=json",
dataType: "jsonp",
success: function (data) { parseresults(data); }
});
function parseresults(data) {
var title = data.entry.title.$t;
var viewcount = data.entry.yt$statistics.viewCount;
var author = data.entry.author[0].name.$t;
var likes = data.entry.yt$rating.numLikes;
var dislikes = data.entry.yt$rating.numDislikes;
console.log("author: " + author + " | title: " + title + " | likes: " + likes + " | dislikes: " + dislikes);
}
the data is retrieved as JSON so you can get any value of your needs out of it.
hope this is what you were looking for.

Related

Lost on AJAX to .ASP file

I have a need to automate data collection for users who visit specific pages of my site. To do this, I'm querying the LDAP. The LDAP query works just fine when I double click on the file locally (.vbs). However, when I double click on it while it's on the server, it doesn't work (as would be expected). However, I'm as new as new can get to writing VBScript.
After reading a few articles I modified the code and changed the extension to .asp. I ended up with this:
<%
On Error Resume Next
'Create the Array that will be passed
Dim employee(7)
'Employee System Related Info
Set objSysInfo = CreateObject("ADSystemInfo")
employee(0) = objSysInfo.SiteName
'Employee specific information
strUser = objSysInfo.UserName
Set objUser = GetObject("LDAP://" & strUser)
employee(1) = objUser.sAMAccountName
employee(2) = objUser.givenName
employee(3) = objUser.sn
employee(4) = objUser.displayName
employee(5) = objUser.telephoneNumber
employee(6) = objUser.title
Return employee
%>
In the JavaScript function which would call this .asp file via ajax, I am able to get the employee number which I think could be received by the .asp file and do the rest of the query.... However, I'm not even sure if I'm returning everything correctly in the VBScript. Furthermore, I'm not even sure if I should be using a GET or POST AJAX call. Can someone point me in the right direction?
Updated 03/22/2017 at 10AM CDT
I've finally gotten back to the office and tried to play around. I'm still a little lost. I've made some updates to the code below you'll see the javascript and the VBScript
FIRST the JavaScript:
var employee = {};
function getEmp() {
var ldapUserName = ADSystem.UserName;
$.ajax({
type: "POST",
data: ldapUserName,
url: "https://here.is.my/url.asp",
success: $.ajax({
type: "GET",
dataType: "json",
success: function(responseText) {
employee = responseText;
},
error: function() {
alert("No Data Received");
}
}),
error: function() {
alert("Connection Failed");
}
});
}
Now here is the updated VBScript based on a few things I read and the suggestions from here:
<%
Public Function empDemo(username)
On Error Resume Next
'Create the Array that will be passed
Dim employee(7)
'Employee System Related Info
Set objSysInfo = CreateObject("ADSystemInfo")
employee(0) = objSysInfo.SiteName
'Employee specific information
strUser = objSysInfo.username
Set objUser = GetObject("LDAP://" & strUser)
employee(1) = objUser.sAMAccountName
employee(2) = objUser.givenName
employee(3) = objUser.sn
employee(4) = objUser.displayName
employee(5) = objUser.telephoneNumber
employee(6) = objUser.title
response.write "{ site: " & employee(0) & ","
& "empNum: " & employee(1) & ","
& "empFName: " & employee(2) & ","
& "empLName: " & employee(3) & ","
& "empFullName: " & employee(4) & ","
& "empExt: " & employee(5) & ","
& "empTitle: " & employee(6) & "}"
End Function
%>
Currently, I'm getting the alert stating "No Data Received". What am I doing wrong?
Instead of "return Employee", have you tried:
response.write employee
or maybe
response.write employee.sAMAccountName
Is this VB6? Not sure what libraries are available in classic asp, so you might have to manually write the data in JSON form... i.e...
response.write "{ name: " & employee.sAMAccountName & "}"

WinJS forward custom object to print function

I use WinJS in my application and try to print some content. Made my printer class according to this tutorial https://dzone.com/articles/windows-8-print-contract-%E2%80%93.
function registerForPrintContract(participiantData) {
var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
printManager.addEventListener("printtaskrequested", onPrintTaskRequested, false);
}
function onPrintTaskRequested(printEvent) {
var printTask = printEvent.request.createPrintTask("Print Example", function (args) {
printCurrentPage(args);
printTask.oncompleted = onPrintTaskCompleted;
});
}
function printCurrentPage(args) {
var docHtml = document.createDocumentFragment();
docHtml.appendChild(createDocumentContent());
args.setSource(MSApp.getHtmlPrintDocumentSource(docHtml));
}
function createDocumentContent() {
var container = document.createElement("div");
container.innerHTML = "<h2>" + firstname + " " + lastname + "</h2>" +
"<h4>" + emailaddress1 + "<h4>";
return container;
}
function showPrintUI() {
Windows.Graphics.Printing.PrintManager.showPrintUIAsync();
}
My problem is that I do not know how to forward some object data to createDocumentContent() function. In this example I put firstname, lastname and email. Those data I cannot get from html page I need to send them on print button click.
All examples I saw are about printing current page or making new content from data which we can get from HTML page by querying DOM, no example where I can send custom object.
What is the best way to do this ?
My problem is that I do not know how to forward some object data to createDocumentContent() function. In this example I put firstname, lastname and email. Those data I cannot get from html page I need to send them on print button click.
Do you mean you want to put the html output of "<h2>"+firstname + " " +lastname+"</h2>"+"<h4>" + emailaddress1 + "<h4>" to your print page?
The behavior of innerHTML has changed in Windows Store App Development.
see HTML and DOM API changes list innerHTML section:
Content is filtered as through it was processed by the toStaticHTML method
But WinJS offers a method that you can utilize to inject HTML.
Here is the link to documentation of this method: WinJS.Utilities.insertAdjacentHTML
Here is a code snippet that shows a simple use this method:
function createDocumentContent() {
var obj = {
firstname: "winffee",
lastname: "xia",
emailaddress1:"test#126.com"
}
var htmlString = "<h2>" + obj.firstname + " " + obj.lastname + "</h2>" +
"<h4>" + obj.emailaddress1 + "<h4>";
var container = document.createElement("div");
WinJS.Utilities.insertAdjacentHTML(container, "beforeend", htmlString);
return container;
}

Instagram API pagination - Previous Page

I am getting Instagram user's media with Jquery.
I need to get All user media, but Instagram API media limit is only 20 and API pagination returns only next link. There is no previous link.
I write code somethink like that, this is working with next but not working previous. And I stack here
function instaPhotos(page) {
var $limit = 1;
var $token = $('.instagram').data('instagramtoken');
var $nextId = $('.instagram').attr('data-instagramnext');
var $pageNumber = parseInt(localStorage.getItem('page'));
switch (page){
case 'next':
localStorage.setItem('page', ($pageNumber+1));
var $url = 'https://api.instagram.com/v1/users/self/media/recent/?access_token=' + $token + '&count=' + $limit + '&max_id=' + $nextId
break;
case 'prev':
localStorage.setItem('page', ($pageNumber-1));
var $url = 'https://api.instagram.com/v1/users/self/media/recent/?access_token=' + $token + '&count=' + $limit + '&min_id=' + $nextId
break;
default:
localStorage.setItem('page', 1);
var $url = 'https://api.instagram.com/v1/users/self/media/recent/?access_token=' + $token + '&count=' + $limit
}
console.log($pageNumber);
console.log($url);
$.ajax({
method: "GET",
url: $url,
dataType: "jsonp",
context: this,
success: function (r) {
if (r.pagination.next_max_id){
$('.instagram').attr('data-instagramnext', r.pagination.next_max_id);
}
// photo actions here.
}
});
}
First of all: you can increase media limit up to 33 photos. You should use count parameter on your querystring:
https://api.instagram.com/v1/tags/nofilter/media/recent?count=33&access_token=YOUR_ACCESS_TOKEN
About to navigate to previous page it seems to me that Instagram response will always be with the most recent published photos.
From Instagram API:
MIN_TAG_ID Return media before this min_tag_id.
MAX_TAG_ID Return media after this max_tag_id.
So let's think of 3 pages (from id #1 to id #100):
First page:
next_min_id #0
photo #1
photo #2
photo #3
...
photo #33
next_max_tag_id #34
Second page:
next_min_id #34 (equals to next_max_tag_id of first page)
photo #35
photo #36
photo #37
...
photo #66
next_max_tag_id #67
Third page:
next_min_id #67 (equals to next_max_tag_id of second page)
photo #68
photo #69
photo #70
...
photo #99
next_max_tag_id #100
While the querystring parameter max_tag_id limits the top of your result, min_tag_id limits the bottom of it. So if you use only min_tag_id as parameter the response will be equal the first page despite of the page min_tag_id value came from. After all the photos of first page (#1, #2, #3...) come before the min_tag_id of any other page (#34 and #67) and are the newest ones.
I think to accomplish this task the only way is using max_tag_id querystring parameter or next_url result (entire url ready to use - easier).
You should save or max_tag_id's or (even better and faster) the entire result and control the logic on your code. Working example:
var token = "<your_access_token>";
var nextURL = "https://api.instagram.com/v1/tags/riodejaneiro/media/recent?count=33&access_token=" + token;
var currentPage = 0;
var pages = new Array();
$(function() { requestInstagram(); });
function previousPage() {
currentPage = (currentPage>0) ? currentPage-1 : 0;
// show photos of currentPage
console.log("Page " + currentPage);
console.log("First photo:" + pages[currentPage][0].id);
}
function nextPage() {
if (++currentPage < pages.length ) {
// show photos of currentPage
console.log("Page " + currentPage);
console.log("First photo:" + pages[currentPage][0].id);
} else {
requestInstagram();
}
}
function requestInstagram() {
$.ajax({
method: "GET",
url: nextURL ,
dataType: "jsonp",
context: this,
success: function (r) {
if (r.meta.code == "200") {
pages[pages.length] = r.data;
// show photos here
console.log("Page " + currentPage);
console.log("First photo:" + pages[currentPage][0].id);
nextURL = r.pagination.next_url; // you should implement a way to identify the last page
console.log(nextURL);
}
}
});
}
Good luck!
I tested min_id, looks like it is broken on sandbox mode, it does however work correctly on old APIs that are live like on http://gramfeed.com
You can test sandbox mode here: http://www.gramfeed.com/accounts/sandbox

What is wrong with my foursquare api call?

The live example is here
http://kenziejoy.github.io/frontend-nanodegree-map/
I'm trying to pull data about locations that I have hard coded in an array - either by their foursquare id (didn't seem to be working) or their lat and lng. (client ID and secret are variables I just haven't shown them here)
I don't need any other functionality than just pulling data from their database to display on a map so I thought it would fall under the userless access but it is giving me an error that the request are bad because I don't have the proper authentication.
Thanks in advance
From the foursquare site
"Userless access
Some of our endpoints that don’t pertain to specific user information, such as venues search are enabled for userless access (meaning you don’t need to have a user auth your app for access). To make a userless request, specify your consumer key's Client ID and Secret instead of an auth token in the request URL.
https://api.foursquare.com/v2/venues/search?ll=40.7,-74&client_id=CLIENT_ID&client_secret=CLIENT_SECRET&v=YYYYMMDD
To see what level of permissions each endpoint needs, check out the filters at the top of our endpoints page."
/**********FourSquare***************/
$.ajax({
url:'https://api.foursquare.com/v2/venues/search',
dataType: 'json',
data: 'limit=1' +
'&ll='+ placeItem.lat() +','+ placeItem.lng() +
'&?client_id='+ CLIENT_ID +
'&client_secret='+ CLIENT_SECRET +
'&v=20140806' +
'&m=foursquare',
async: true,
success: function (data) {
var result = data.response.venue;
var contact = result.hasOwnProperty('contact') ? result.contact : '';
if (contact.hasOwnProperty('formattedPhone')) {
placeItem.phone(contact.formattedPhone || '');
}
var location = result.hasOwnProperty('location') ? result.location : '';
if (location.hasOwnProperty('address')) {
placeItem.address(location.address || '');
}
var bestPhoto = result.hasOwnProperty('bestPhoto') ? result.bestPhoto : '';
if (bestPhoto.hasOwnProperty('prefix')) {
placeItem.photoPrefix(bestPhoto.prefix || '');
}
if (bestPhoto.hasOwnProperty('suffix')) {
placeItem.photoSuffix(bestPhoto.suffix || '');
}
var description = result.hasOwnProperty('description') ? result.description : '';
placeItem.description(description || '');
var rating = result.hasOwnProperty('rating') ? result.rating : '';
placeItem.rating(rating || 'none');
var url = result.hasOwnProperty('url') ? result.url : '';
placeItem.url(url || '');
placeItem.canonicalUrl(result.canonicalUrl);
// Infowindow code is in the success function so that the error message
// Content of the infowindow
var contentString = '<div id="iWindow"><h4>' + placeItem.name() + '</h4><div id="pic"><img src="' +
placeItem.photoPrefix() + '110x110' + placeItem.photoSuffix() +
'" alt="Image Location"></div><p>Information from Foursquare:</p><p>' +
placeItem.phone() + '</p><p>' + placeItem.address() + '</p><p>' +
placeItem.description() + '</p><p>Rating: ' + placeItem.rating() +
'</p><p><a href=' + placeItem.url() + '>' + placeItem.url() +
'</a></p><p><a target="_blank" href=' + placeItem.canonicalUrl() +
'>Foursquare Page</a></p><p><a target="_blank" href=https://www.google.com/maps/dir/Current+Location/' +
placeItem.lat() + ',' + placeItem.lng() + '>Directions</a></p></div>';
// Add infowindows
google.maps.event.addListener(placeItem.marker, 'click', function () {
infowindow.open(map, this);
// Bounce animation
placeItem.marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function () {
placeItem.marker.setAnimation(null);
}, 800);
infowindow.setContent(contentString);
});
},
// Alert the user on error.
error: function (e) {
infowindow.setContent('<h5>Foursquare data is unavailable.</h5>');
document.getElementById("error").innerHTML = "<h4>Foursquare data is unavailable. Please try refreshing.</h4>";
}
});
I took a look at the live example URL and you were getting a lot of bad request errors in the JavaScript console in Chrome.
Looking at these, you had a bad URL, you were using:
https://api.foursquare.com/v2/venues/search?limit=1&ll=45.5589522,-122.6517163&?client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&v=20140806&m=foursquare
The problem seems to be that you have:
&?client_id
which makes the URL invalid.
Changing this to
&client_id
fixes this and I then see data coming back from Foursquare.

Add Facebook Profile Picture after Login?

Here is my code::
//if user is logged in - do this
function login() {
FB.api('/me', function(response) {
document.getElementById('fb-info-block').innerHTML =
"Welcome, " + response.name + ".<br /><br />" +
"<fb:like href = 'www.whitbreaddesign.com' show_faces = 'false' width = '100' action = 'like' colorscheme = 'light'></fb:like>";
});
}
Can someone tell me how to add the users facebook profile within this code...I already figured out how to retrieve their name with "Welcome, "+ response.name+"
Any ideas..thanks a bunch...
document.getElementById('something').innerHTML = '<img src="http://graph.facebook.com/' + response.id + '/picture" />';
You need to list fields you are interested in as a second parameter to FP.api:
FB.api("/me", {fields: "id,name,picture"}, function(response) {
console.log(response.id, response.name, response.picture);
});
Here is a list of all available fields
You could use the FBML tag for profile pics:
var profile_pic_html = '<fb:profile-pic></fb:profile-pic>';
Just add that anywhere on the page, and as long as you have FB Connect's xd_receiver setup, that will show the currently logged in user's profile pic. To show profile pics by UID use:
var profile_pic_html = '<fb:profile-pic uid="'+some_uid+'" ></fb:profile-pic>';
You need to call
FB.XFBML.Parse() so that your updated FBML can be parsed into HTML by facebook's javascript.
You may be missing that.
Maybe just use XFBML?:
<fb:name uid="loggedinuser" use-you="no"></fb:name>
<fb:profile-pic uid="loggedinuser" size="square" facebook-logo="true"></fb:profile-pic>
Here's an example: http://fbrell.com/xfbml/account-info
you should use "me.id" instead of "response.id":
document.getElementById('something').innerHTML = '<img src="http://graph.facebook.com/' + me.id + '/picture" />';

Categories

Resources