I'd like to add a section to my website that shows the social media profiles I manage.
Instead of updating some HTML each time the profile picture or username changes, I'd like it to stay in sync, so to speak.
Is there a simple way to link to the profiles information, without download individual widgets and somehow modifying them?
Thanks
You'd have to write the code, but have you checked the various network's Javascript APIs? They all seem quite simple.
Twitter: https://dev.twitter.com/docs/anywhere/welcome
Facebook: https://developers.facebook.com/docs/reference/javascript/
LinkedIn: http://developer.linkedin.com/javascript
Tumblr: http://www.tumblr.com/docs/en/api/v2
Google+: http://code.google.com/apis/libraries/
This particular example from the twitter api seems to be what you would need:
<span id="twitter-connect-placeholder"></span>
<script type="text/javascript">
twttr.anywhere(function (T) {
var currentUser,
screenName,
profileImage,
profileImageTag;
if (T.isConnected()) {
currentUser = T.currentUser;
screenName = currentUser.data('screen_name');
profileImage = currentUser.data('profile_image_url');
profileImageTag = "<img src='" + profileImage + "'/>";
$('#twitter-connect-placeholder').append("Logged in as " + profileImageTag + " " + screenName);
} else {
T("#twitter-connect-placeholder").connectButton();
};
});
</script>
Based on your comments you may just want to direct link this way:
https://api.twitter.com/1/users/profile_image?screen_name=twitterapi&size=bigger
Related
I have this little code here:
<script>
$(function() {
$('.insert_usrdata_name').text($('.client-profile td:contains("Name:")').next().text());
$('.insert_usrdata_email').text($('.client-profile td:contains("E-mail:")').next().text());
$('.insert_usrdata_regdate').text($('.client-profile td:contains("Registration:")').next().text());
$('.insert_usrdata_logindate').text($('.client-profile td:contains("Last Login Time:")').next().text());
$('.insert_usrdata_loginIP').text($('.client-profile td:contains("Last Login From:")').next().text());
$('.insert_webdata_domain').text($('.account-information td:contains("Domain:")').next().text());
$('.insert_webdata_status').text($('.account-information td:contains("Status:")').next().text());
$('.insert_diskusg_percentage').text($('.account-information td:contains("Disk Usage:")').next().text());
$('.insert_diskusg_numbers').text($('.account-information td:contains("Disk Usage:")').next().text());
$('.insert_bandwidthusg_numbers').text($('.account-information td:contains("Bandwidth:")').next().text());
$('.insert_srvdata_url').text($('.account-information td:contains("Server Name:")').next().text());
$('.insert_srvdata_srvload').text($('.account-information td:contains("Web Server Load:")').next().text());
$('.insert_srvdata_dbload').text($('.account-information td:contains("MySQL Server Load:")').next().text());
$('.progress.xs .diskusgbar').css('width', $('#diskUsageProgressBar .green-bar').css('width'));
$('.progress.xs .bandusgbar').css('width', $('#BandwidthProgressBar .green-bar').css('width'));
});
</script>
When I use <span class='insert_webdata_domain'>N/A</span> it load website URL if URL is available... But I want to make it work with a link for example Load site . How to achieve this?
Replace your line :
$('.insert_webdata_domain').text($('.account-information td:contains("Domain:")').next().text());
to :
$('.insert_webdata_domain').text('' + $('.account-information td:contains("Domain:")').next().text() + ' ');
Update
as per your comment if you want to keep span and also want to add link then:
$('.insert_webdata_domain')
.text($('.account-information td:contains("Domain:")').next().text())
.append('' + $('.account-information td:contains("Domain:")').next().text() + ' ');
I've been trying to get the bengott:avatar package from atmosphere.js to work with Facebook but have not been able to do so. When I use {{> avatar user=this shape="circle"}}it only seems to display a gray circle with no picture inside.
Other calls such as {{currentUser.profile.name}}work perfectly fine.
How can I successfully display an avatar with or without the bengott:avatar package?
Use this instead, you don't need an access token or anything special to get their profile picture, just their facebook user id.
Accounts.onCreateUser(function(options, user) {
if (options.profile) {
options.profile.picture = "http://graph.facebook.com/" + user.services.facebook.id + "/picture/?type=large";
user.profile = options.profile;
}
return user;
});
I use a helper function based off of the Facebook ID of the user to grab the image on the server. 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;
}
},
In the template you would use the helper like this:
<img src="{{userPicHelper}}" alt="" />
I am not sure how to approach this for my AngularJS site...
I need to load a login form to any page on the site (without leaving the page) then asynchronously pass user login info and get success or fail back and then load a div html template to the same page if login is successful...
Seeing a full example would be amazing but I do not expect that of course. However I can't find a single simple example of this on the web (Nothing that would help a newbie).
Can someone point at good solutions or at least understandable examples? .. or something similar that is not cluttered with unrelated code..
I use a directive for my login, kind of like this. You can get a general idea of how it works.
.directive('login', function($http, $rootScope) {
return {
restrict: 'E',
template: " <form> " +
"<label>Username</label>" +
"<input type='text' ng-model='username'>" +
"<label>Password</label>" +
"<input type='password' ng-model='password'>" +
"<br>" +
"<input type='submit'>" +
"</form>",
link: function(scope, elem, attrs) {
elem.bind('submit', function() {
var user_data = {
"username": scope.username,
"password": scope.password,
};
$http.post("http://localhost:8001/api-token-auth/", user_data)
.success(function(response) {
$http.defaults.headers.common['Authorization'] = 'Token ' + response.token;
$rootScope.$broadcast('event:login-confirmed');
elem.slideUp();
});
scope.$on('event:auth-loginRequired', function () {
var main = document.getElementById("main");
main.hide();
elem.slideDown();
});
});
}
}
});
I found a solution that does exactly what I asked about and can be adjusted to my needs fairly easily.
https://gist.github.com/clouddueling/6191173
It is created by Michael Calkins who I find to be one of the most clear and easy to understand sources for AngularJs tutoring. I found his videos on youtube http://www.youtube.com/watch?v=ZHMVP5aLAPM
i have a little script which fetches the likes and tweets count about a url via jquery. Now it works great, but when a certain page has 0 like/shares, then jquery returns 'undefined' because the 'shares' part is not shown in the output.
$(document).ready(function() {
url = "http://awebsitehere.com/";
beforecounter = " <b>";
aftercounter = "</b>";
// Get Number of Facebook Shares
$.getJSON('http://graph.facebook.com/'+url+'&callback=?',
function(data) {
$('#facebook').append(beforecounter + data.shares + aftercounter);
});
// Get Number of Tweet Count
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?url='+url+'&callback=?',
function(data) {
$('#twitter').append(beforecounter + data.count + aftercounter);
});
})
How would I have to edit this script to display 0 instead of undefined when facebook has got 0 shares/likes for a certain url?
try this:
$('#facebook').append(beforecounter + (data.shares || 0) + aftercounter);
and likewise for the twitter value.
At first you have to create a username of your page(see under your page name #username. Just click it...)
Then goto https://developers.facebook.com/tools/explorer/ and get an access token key
Then script something like that
function facebookLikesCount(access_token, pageusername)
{
var url = "https://graph.facebook.com/"+pageusername+"?fields=likes&access_token="+access_token+"";
$.getJSON(url,function(json){
alert(json.likes);
});
}
facebookLikesCount('your accesstoken', 'pageusername');
its work for me.
Problem
I am trying to display the reviews of a Restaurant using Yelps API. I copied Smashing Magazines version of implementing API from their jQuery ebook. The problem is that using this method there are two stores being queried because the previous owners had the same phone number. Yelp can use phone numbers to query reviews and ratings. I need only the currently open store's reviews to display. I want to do it by some how showing Yelp's node elemnt ID. Each store has a unique identifier according to Yelps API and uses node element ID. The ID of the store i want to solely display is ID="Y6D43boKItksYx_d-RQL4g"
The Code Looks Like:
function showData(data) {
$.each(data.businesses, function(i,business){
// extra loop
var bizContent = '<p><img src="' + business.rating_img_url + '" img=""/><br>'+ business.review_count + ' reviews from Yelp.com</p>';
$(bizContent).appendTo('#yelpAVG');
$.each(business.reviews, function(i,review){
var content = '<div class="comments-block"><p>Posted by ' +review.user_name + ' on ' + review.date + 'via Yelp.com';
content += '<img src="' + review.user_photo_url + '" img=""/>';
content += '<p><img src="' + review.rating_img_url + '" img=""/><br>';
content += review.text_excerpt + '</p>';
content += '<p>Read the full review<br>';
$(content).appendTo('#yelpReviews');
});
});
}
function writeScriptTag(path) {
var yelpScript=document.createElement('script');
yelpScript.type='text/javascript';
yelpScript.src=path;
$("body").append(yelpScript);
}
$(document).ready(function(){
// note the use of the "callback" parameter
writeScriptTag( "http://api.yelp.com/phone_search?"+
"&categories.name=cafe"+
"&phone="+"(408) 292-2070"+
"&ywsid=Iua-78eDnxy0DTqm8I4mDw"+
"&limit=1"+
"&callback=showData");
});
Im a little new to jQuery so I wouldn't know where to begin or what I should start with to display queried results that only have
`ID="Y6D43boKItksYx_d-RQL4g"`
ShowOnly="id":"Y6D43boKItksYx_d-RQL4g" or something similar.
Thanks For Reading.
You can't with API vsersion 1.
but
With APIv2 you can query a specific business by id:
http://www.yelp.com/developers/documentation/v2/business
Some sample code to help you get started is available on github:
https://github.com/Yelp/yelp-api/blob/master/v2/js/business.html