How to get Youtube channel picture via username? - javascript

Any idea?
I checked the Youtube API that doesn't support this feature.
Is it possible?
I need to get the thumbnail picture via username directly.
for example:
I got a username named: communitychannel
and I want to get the following thumbnail picture:
http://i2.ytimg.com/vi/YVrqydZz3e4/default.jpg
Thanks your reply!!
I know I can retrieve thumbnail data by doing this. But the case is, I will get a Youtube member's subscription item list first via the following URL:
http://gdata.youtube.com/feeds/api/users/[USER_NAME]/subscriptions
From the Youtube official document, it indicate that the response data include tag. But I never see it...
If list length is 100, then I need to send total 101 requests to get the thumbnail data for each item. But it will consume too much network bandwidth to do that.
So, is any other way to accomplish the requirement? Thanks!! ;-)

You can get the users image by using a url like this:
http://gdata.youtube.com/feeds/api/users/communitychannel
You can get just the username and image thumbnail by appending a query string as described in the
partial responses api:
?fields=yt:username,media:thumbnail
You can get the response in json format to use easily in javascript by appending:
&alt=json-in-script&format=5
You can also specify a callback to execute when the response has loaded by appending: &callback=showImage
Your url now looks like this:
http://gdata.youtube.com/feeds/api/users/communitychannel?fields=yt:username,media:thumbnail&alt=json-in-script&format=5&callback=showImage
To use this in a page put it in a script tag like so:
<script type='text/javascript' src="your_url"/>
and the callback should look like this:
function showImage(data)
{
var name= data.entry.yt$username.$t;
var url = data.entry.media$thumbnail.url;
$(document).append("<img src='"+ url +"'/>");
}
You must make sure that the showImage callback function is defined before you load the data.
I have created a sample of loading a feed and the user images here (Make sure you change communitychannel to your own username or it won't work)
I can't see a better way of reducing your bandwidth than using the partial responses api;

Related

How do I append a query parameter to my URL using Javascript?

I am building a web app and I am using Firebase to store my user's data in Cloud Firestore. There is a page on my web app that allows users to view their documents from Cloud Firestore. I would like to add a query parameter to the end of my URL on view.html so I can take that query parameter value and use it to search for a document.
I have been searching online to find possible solutions. So far I have come across a few videos on the topic, but they haven't been going into the depth I have been needing. For example, this video shows how to add and get query parameters from a URL, but it only shows how to log those changes in the console. How would I make that my URL?
I've also be browsing Stackoverflow for solutions. This Stackoverflow post asks a similar question, however, many of the solutions in the answers causes view.html to reload on a loop. Why would this be, and if this is a possible solution, how would I stop this from happening.
How would I go about appending and fetching URL query parameters in Javascript?
You say you want to do this in javascript, so I assume the page itself is building/modifying a link to either place on the page or go to directly via javascript.
In javascript in the browser there is the URL object, which can build and decompose URLs
let thisPage = new URL(window.location.href);
let thatPage = new URL("https://that.example.com/path/page");
In any case, once you have a URL object you can access the parts of it to read and set the values.
Adding a query parameter uses the searchParams attribute of the URL, where you can add parameters with the .append method — and you don't have to worry about managing the ? and & … the method takes care of that for you.
thisPage.searchParams.append('yourKey', 'someValue');
This demonstrates it live on this page, adding search parameters and displaying the URL at each step:
let here = new URL(window.location.href);
console.log(here);
here.searchParams.append('firstKey', 'theValue');
console.log(here);
here.searchParams.append('key2', 'another');
console.log(here);
I have solved this issue in the simplest way. It slipped my mind that I could link to view.html by adding the search parameter to the URL. Here's what I did:
On index.html where I link to view.html, I created the function openViewer();. I added the parameter to the end of URL href.
function openViewer() {
window.location.href = `view.html?id={docId}`;
}
Then on view.html, I got the parameter using URLSearchParameters like so:
const thisPage = new URL(window.location.href);
var id = thisPage.searchParams.get('id');
console.log(id)
The new URL of the page is now "www.mysite.com/view.html?id=mydocid".
You can try to push state as so in the actual view.html
<script>
const thisPage = new URL(window.location.href);
window.history.pushState("id","id",thisPage);
</script>

How to pull token from wordpress url and give it a variable/value?

Let me explain exactly what i'm trying to do.
Someone lands on https://crypto.enzlo.com and submits their email. They get taken to the thank you page.
The thank you page url contains a bunch of tokens that looks like this:
https://crypto.enzlo.com/apply/?contactId=103&inf_contact_key=d5e172efa53b9940a898afcfa25596e21f32e5a885a1411d8c094e77aedca3ba&inf_field_BrowserLanguage=en-US%2Cen%3Bq%3D0.9&inf_field_FirstName=&inf_field_Email=heiko%40viceoffers.com&inf_4dAXudNU8407Jeuy=
I need to pull the 'inf_field_Email' token from the url and put it into a image tracking url that needs to fire so I can track the signup and the email. The image iframe pixel i need to fire on this thank you page looks like this:
you'll notice "track_id=inf_field_Email" in the iframe url. I need track_id to post the email back to me. So the variable/token inf_field_Email should be showing the email address from the thank you page url. So in this case the inf_field_Email would be heiko#viceoffers.com
I am thinking I will need to concatenate it into the url using JS, by giving it a variable/value. But not sure how to do that or how to then put that variable into the iframe image pixel that needs to fire on the same page...
Please let me know what you guys think is the best approach for this. I have been able to post the inf_field_Email as text on a page and have it display the email using a wordpress plugin but that plugin couldn't transfer that token into the iframe url.
We have to convert the URL into an object so we can call the properties. We can do accomplish this by using JSON.parse, and then concatenating the property to the iframe src, below is an example of what I would do.
$(document).ready(function() {
var search = location.search.substring(1);
search = JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value) });
console.log(search.inf_field_Email);
document.getElementById("govice").src = "https://govice.online/track/goal-iframe?goal_id=466&track_id=inf_field_Email=" + search.inf_field_Email;
});

ExtractData from GET Paramter and load content from .json file

I have a html page (product page) which now I have to fill with content from a .json file (array with different products, accessible via id). In the url you should be able to set a GET parameter like this:
/product?product_id=14
I know that no more information will be passed in the url, so I don't need to use any regex.
Now I simply have no idea to get the content into my html file, all I know so far is (js file):
let h1 = document.querySelector('h1');
if (h1) {
h1.textContent = '#1';
} else {
console.log('#1: No content found!');
}
So now I need to know which id was passed via GET parameter and how to load the content from the .json database.
Thanks in advance
Here's an easy way to get the parameter from the URL: https://stackoverflow.com/a/20336097/7303349
And then getting the json database sounds like an entirely different step. Try to do less things at a time. Also, where does the .json database come from?

Can i pass information through the URL when i am using jQuery Mobile?

I have a mobile application that opens an in-app browser that uses the URL to pass information to my server , like the deviceID.
For example the browser will open the web-page (jquery Mobile) : www.myserver.com/doWork.html#deviceID
On the server part using JavaScript inside the doWork.html file, I get the deviceID like this:
var userId = window.location.hash.substring(1);
Is it ok that i pass information using the hash # ? In jquery mobile the hash # is used to change between pages when someone uses the Multi-Page template structure . So i am afraid that maybe i should use something else , like a question mark (?) ?
Or its perfectly fine ?
NO. Stop using # for your data transfers. Let jQM do its thing. Don't disturb it. Use Query strings( adding ? in url). My advice is to stop using query strings (? tags) and # tags to send data to the next page. Handle it using localStorage. Its more secure compared to Query strings because the user wont see the URL change, so your sensitive data is hidden, at least to a little extent. localStorage is HTML5's API which is like a temporary storage set aside per domain. This data will persist until data is cleared in cache. Assuming you have an anchor tag which goes to dowork.html,
Go to Do work
Add an attribute for device ID in the tag itself, like this :
Go to Do work
You'd be doing this dynamically you might also use it the same way. You get the gist right?
A click event for this would look like this :
$(document).on("click", "a", function(e) //use a class or ID for this instead of just "a"
//prevent default
e.preventDefault();
//get device id from tag attribute
var deviceId = $(this).data("deviceid");
//set it in localStorage
localStorage["dId"] = deviceId;
//redirect
$.mobile.changePage(this.href);
});
Then, in the other page's pageinit (or any event), get the device id from storage and send the ajax call to the server.
//assuming #dowork is the id of a div with data-role="page"
$(document).on("pageinit", "#dowork", function() {
//get from storage
var deviceId = localStorage["dId"];
//make ajax call or server call with deviceId here
});
But, if you still want to use URL for this, look at this question. I've given a decent enough answer over there.
To pass variables to the server you should avoid using the # symbol because regardless of the framework you are using this symbol is used for other purposes, to pass info to the server in a GET request you should use the ? symbol, something like this should do it: www.myserver.com/doWork.html?deviceID=1233455

Same URL - render different pages (EXPRESS)

Is it possible to render different pages for the same URL in express?
For example, if I click on #login1, I want to be sent to /login_page/. If I click on #login2, I should still be sent to /login_page/. Each time, I want to render different htmls depending on which #login I clicked.
So I want it to look like this.
Client:
$("#login1").click(function(){
window.open(/login_page/,'_parent');
});
$("#login2").click(function(){
window.open(/login_page/,'_parent');
});
Server:
app.get('/login_page/', users.login_page1); //if I clicked #login1
app.get('/login_page/', users.login_page2); //if I clicked #login2
Thanks a lot for any help.
Basically you need some field in the request to convey this information.
The simple thing: the URL, as the web was designed
If you're too cool to have the URLs be different, you can use the query string
window.open('/login_page?from=login2', '_parent');
If you're too cool for the query string, you could set a cookie
If you're too cool for a cookie, you could request the page via ajax with xhr.setRequestHeader
If you're tool cool for a custom ajax request header, you could add an image with a tracking pixel src attribute to the DOM just prior to loading the login_page and detect that in the server side session and render a different page accordingly
So in summary there are at least a half-dozen ways to technically achieve this. Only the URL and the query string are reasonable, IMHO.
if I got it correctly you just want to invoke different controllers upon the same request with no parameters?
you know you can just parametrise the url and get the result you need with small control logic on the server side.
I don't believe it's possible to do this without any parameters. One solution could look like this
client:
$("#login1").click(function(){
window.open(/login_page/1,'_parent');
});
$("#login2").click(function(){
window.open(/login_page/2,'_parent');
});
Server:
app.get('/login_page/:id', function(req, res){ //if I clicked #login1
if(req.params.id == 1){
res.render('index1.html');
} else {
res.render('index2.html');
}
}

Categories