Is it possible to get the instagram username when you have the instagram ID? If yes please show an example.
I have seen in the internet people talking about an API and they use a link which looks like the following:
https://api.instagram.com/v1/users/self/?access_token=ACCESS-TOKEN
Yes, try this
async function insta(uid) {
let api = `https://i.instagram.com/api/v1/users/${uid}/info/`
let info = await (await fetch(api)).json();
return "https://www.instagram.com/" + info.user.username;
}
async function go() {
let url = await insta(txt.value)
link.innerText = link.href = url;
}
Type instagram user id:
<input id="txt" value=1791879548 />
<button onclick="go()">GO!</button><br>
<pre id="link"></pre>
UPDATE
According this starting form 03.12.2019 above solution stops works and returns only
{“message”: “useragent mismatch”, “status”: “fail”}
however - you can try to send request GET
https://i.instagram.com/api/v1/users/1791879548/info/
with following user-agent header:
Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Instagram 105.0.0.11.118 (iPhone11,8; iOS 12_3_1; en_US; en-US; scale=2.00; 828x1792; 165586599)
Consider making call to https://api.instagram.com/v1/users/[USER-ID]?access_token=[YOUR-ACCESS-TOKEN] with a public_content scope applied to it in order to search for username from user id as explained in the Instagram documentation.
As of the latest API version right now, you'll need to make submission for extended permission to access the scope.
Yes it is possible.
http://instagram.com/web/friendships/{user-id-here}/follow/
You can try live in here
http://socialint.net/en/instagram/
1) Copy the below code snippet
2) Save it as Instagram.htm
3) Open the page in the web browser
<html>
<script>async function getinstagramName(uid) {
let api = `https://i.instagram.com/api/v1/users/${uid}/info/`
let info = await (await fetch(api)).json();
return info.user.username;
}
async function Search() {
let url = await getinstagramName(instagramUserID.value)
mkm.hidden=false
mkm.text=url
mkm.href="https://www.instagram.com/" + url
link.innerText ="https://www.instagram.com/" +url;
}</script>
<body>
instagram user id:
<input id="instagramUserID" value="" />
<button onclick="Search()">GO!</button><br>
<pre id="link"></pre>
<a hidden=true id="mkm" href=''>InstagramLink</a>
</body>
</html>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
How do I extract an Instagram Profile picture using Instagram API?
The basic graph API doesn't contain profile picture and the legacy API has been discontinued.
Update: Instagram has disabled these APIs and it is not working anymore :(
Use one of these URL
https://www.instagram.com/USERNAME/?__a=1
https://i.instagram.com/api/v1/users/USER_ID/info/
NOTE: To get Instagram USER_ID, use first URL with Instagram USERNAME
Edit: If you use second URL, you need to put some user-agent with your request. This is How I do with cURL.
curl -s -H 'User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Instagram 105.0.0.11.118 (iPhone11,8; iOS 12_3_1; en_US; en-US; scale=2.00; 828x1792; 165586599)' https://i.instagram.com/api/v1/users/USER_ID/info/
To get profile photo, use the function bellow:
function getPhoto(a) {
// validation for instagram usernames
var regex = new RegExp(/^(?!.*\.\.)(?!.*\.$)[^\W][\w.]{0,29}$/);
var validation = regex.test(a);
if(validation) {
$.get("https://www.instagram.com/"+a+"/?__a=1")
.done(function(data) {
// getting the url
var photoURL = data["graphql"]["user"]["profile_pic_url_hd"];
// update img element
$("#photoReturn").attr("src",photoURL)
})
.fail(function() {
// code for 404 error
alert('Username was not found!')
})
} else {
alert('The username is invalid!')
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="" id="photoReturn">
<br><br>
<input type="text" id="usernameInput">
<button onclick="getPhoto($('#usernameInput').val().trim())">Get profile photo</button>
Using the Instagram API users endpoint (https://api.instagram.com/v1/users/{user-id}/?access_token=ACCESS-TOKEN ) you will receive a response like this one:
{
"data": {
"id": "1574083",
"username": "snoopdogg",
"full_name": "Snoop Dogg",
"profile_picture": "http://distillery.s3.amazonaws.com/profiles/profile_1574083_75sq_1295469061.jpg",
"bio": "This is my bio",
"website": "http://snoopdogg.com",
"counts": {
"media": 1320,
"follows": 420,
"followed_by": 3410
}
}
Using this you can get the profile picture.
I can't figure out, just want to pass to checkout page a value as GET parameter
so that https://xxxxxx/?setAmount=200000 did go to a page with this script
<form action="custom action" method="POST">
<script
let params = new URLSearchParams(document.location.search.substring(1));
let amount=params.get(setAmount);
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_UUbDY16wDCECOujIs0vQ2vTi"
data-amount=amount;
data-name="Company"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true"
data-currency="eur">
</script>
</form>
The checkout button show out but didn't get the amount parameter, so that no amount is defined.
I didn't have access to server side on the server hosting the website with the button so I need to go forth and back to another site using Podio Globiflow.
Stripe Checkout supports two modes -- Simple and Custom. Custom lets you control what pops up using javascript instead of data properties set on the server. To get the behavior you seek, you could do something like this:
$('#customButton').on('click', function(e) {
const params = new URLSearchParams(document.location.search)
const amountInCents = params.get("amount")
const displayAmount = parseFloat(amountInCents / 100).toFixed(2);
// Open Checkout with further options
handler.open({
name: 'Demo Site',
description: 'Custom amount ($' + displayAmount + ')',
amount: amountInCents,
});
e.preventDefault();
});
// Close Checkout on page navigation
$(window).on('popstate', function() {
handler.close();
});
It is worth noting, that this amount has no impact on how much you actually Charge your Customer and is only for display purposes. Checkout tokenizes the Card details; the amount Charged is entirely controlled by server side logic as outlined in the official Stripe docs.
Say, I have a media ID (eg. 1075297042445691366_195350057). How to get the Embed HTML using the oEmbed API?
This API accepts only shortcode (which is different from media ID).
Or How to get the shortcode of an media ID?
Any media object returned by the API has a field called 'link' that is the URL representation of the media. You can use this link as 'url' parameter of the oembed endpoint.
If anyone finds this question in the future I spent quite a while trying to solve it.
This implementation deserves 99.9% credit to this answer by Nick Hanshaw. All I did was include a CDN link to the BigInteger.js library which is required, but not part of Nick's code. This is currently working for me right now by passing the Media ID as a string into the function, then returning the full string of the Instagram photo URL:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.40/BigInteger.min.js"></script>
<script type="text/javascript">
function getInstagramUrlFromMediaId(media_id) {
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
var shortenedId = '';
media_id = media_id.substring(0, media_id.indexOf('_'));
while (media_id > 0) {
var remainder = bigInt(media_id).mod(64);
media_id = bigInt(media_id).minus(remainder).divide(64).toString();
shortenedId = alphabet.charAt(remainder) + shortenedId;
}
return 'https://www.instagram.com/p/' + shortenedId + '/';
}
</script>
On first sign I have the following code:
Accounts.onCreateUser(function(options,user){
if (typeof(user.services.facebook) != "undefined") {
user.services.facebook.picture = "http://graph.facebook.com/" + user.services.facebook.id + "/picture/?type=large";
}
return user;
});
Which results in the following URL string
http://graph.facebook.com/[myfacebookid]/picture/?type=large
Yet when it renders that url and returns
<img scr="http://graph.facebook.com/[myfacebookid]/picture/?type=large" alt="My Name">
All I see is a broken image. How can I pull this in so that it renders the facebook profile picture?
I use a helper function based off of the Facebook ID of the user to grab the image on the server. I notice my url has /picture? and your has /picture/? Hope this helps.
userPicHelper: function() {
if (this.profile) {
var id = this.profile.facebookId;
var img = 'http://graph.facebook.com/' + id + '/picture?type=square&height=160&width=160';
return img;
}
},
I don't know how I missed this before, but is this the src attribute on the image tag is actually written as scr:
<img scr=
Should be...
<img src=
You have http instead of https.
So:
"https://graph.facebook.com/" + id + "/picture/?type=large";
This was my problem.
When I add an item to my database it just shows the id was added but the name attribute I chose for the item was not added: Meaning - The 'name' attribute I add to the 'player' is not persisted when I save it. Can someone please tell me why? I think it's an issue with string conversion but I am not sure.
*I am able to update the item's name using POSTMAN's PUT option.
Using the x-www-form-urlencoded option, I can update my item's name with a plain string.
So do I need to simply do some sort of string conversion or is something else wrong with my code? And please let me know if you need me to provide more code. Thanks!
Here's my code:
browser control - network:
Yes - (and I only add a name attribute)
When I add the name attribute it is not saved - yet an item is still created. That is the problem.
browser console - network tab:
Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/api/players
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,he;q=0.6
Connection:keep-alive
Content-Length:18
Content-Type:application/json;charset=UTF-8
Cookie:connect.sid=s%3AX2FaOplCDPU3qDaM7vVQPb5vFo_ievn1.zFM%2FKNj2QN5eDspCFOJEE2fYwXiTyUnN90sR8oTfnpI
Host:localhost:3000
Origin:http://localhost:3000
Referer:http://localhost:3000/add
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Request Payloadview source
{showName:Jay}
showName: "Jay"
Response Headersview source
Connection:keep-alive
Content-Length:29
Content-Type:application/json
Date:Sun, 06 Jul 2014 06:13:25 GMT
X-Powered-By:Express
Here's code of the route: server side. maybe there's an error here:
.post(function(req, res) {
var player = new Player(); // create a new instance of the Player model
player.name = req.body.name; // set the player name (comes from the request)
player.sport = req.body.sport;
player.league = req.body.league;
player.team = req.body.team;
player.age = req.body.age;
player.description = req.body.description;
// save the player and check for errors
player.save(function(err) {
if (err)
res.send(err);
res.json({ message: 'Player created!' });
});
})
.get(function(req, res) {
Player.find(function(err, players) {
if (err)
res.send(err);
res.json(players);
});
});
controller: add.js
angular.module('MyApp')
.controller('AddCtrl', ['$scope', '$alert', 'Player', function($scope, $alert, Player) {
$scope.addShow = function() {
Player.save({ showName: $scope.showName },
function() {
$scope.showName = '';
$scope.addForm.$setPristine();
$alert({
content: 'Player has been added.',
placement: 'top-right',
type: 'success',
duration: 3
});
},
function(response) {
$scope.showName = '';
$scope.addForm.$setPristine();
$alert({
content: response.data.message,
placement: 'top-right',
type: 'danger',
duration: 3
});
});
};
}]);
template: add.html
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Add Sports Player</div>
<div class="panel-body">
<form class="form" method="post" ng-submit="addShow()" name="addForm">
<div class="form-group" ng-class="{ 'has-success' : addForm.showName.$valid && addForm.showName.$dirty, 'has-error' : addForm.showName.$invalid && addForm.showName.$dirty }">
<input class="form-control" type="text" name="showName" ng-model="showName" placeholder="Enter TV show name" required autofocus>
<div class="help-block text-danger" ng-if="addForm.showName.$dirty" ng-messages="addForm.showName.$error">
<div ng-message="required">Sports Player's name is required.</div>
</div>
</div>
<button class="btn btn-primary" type="submit" ng-disabled="addForm.$invalid">Add</button>
</form>
</div>
</div>
service: player.js
angular.module('MyApp')
.factory('Player', ['$resource', function($resource) {
return $resource('/api/players/:_id');
}]);
From what I can tell, you are making a POST HTTP request to /api/players:
Request URL:http://localhost:3000/api/players
Request Method:POST
However, you're only sending showName:
Request Payloadview source
{showName:Jay}
showName: "Jay"
But on the server side, you are not looking for showName, and instead looking name, sport, league, etc:
var player = new Player(); // create a new instance of the Player model
player.name = req.body.name; // set the player name (comes from the request)
player.sport = req.body.sport;
player.league = req.body.league;
player.team = req.body.team;
player.age = req.body.age;
player.description = req.body.description;
If you want to store name, then you'll need to send over name instead of showName. If you want to store showName, then you'll need to pull it from the request body (req.body.showName). So either send over all those attributes from the client side to the server side, or change the server side to accept only showName for a Player.
Hopefully that makes sense? There's just a disconnect from what you're sending on the client side to what you're looking for on the server side. It's also a bit confusing that it looks like on the client side you're dealing with a TV show, and on the server side its some player for a sport team?