Add Facebook Profile Picture after Login? - javascript

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" />';

Related

display alert message after redirect

I have a button that executes a function:
$("#btnRemove").click(function () {
var name= $("#editAccountName").val();
if (confirm("Are you sure you want to mark " + "''" + name + "''" + " as innactive?")) {
saveAccount(false);
window.location.href = "/RxCard/Search";
}
alert (name + "was marked innactive.")
});
I need the alert to show after the user is redirected to "/Rxcard/Search"
what do i need to change in my code to get it working like that?
on a side note, how would do the same but with a CSS customized alert?
Thanks.
Instead of putting your alert in this code, you need to put it into the script behind Search page. Now you can add a url parameter and then in there check it and show the alert if that parameter is set:
if (confirm("Are you sure you want to mark " + "''" + name + "''" + " as innactive?")) {
saveAccount(false);
window.location.href = "/RxCard/Search?name=" + name;
}
And then add this somewhere (doesn't matter that much):
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
And at last this code goes into your search page code:
function() {
if($.urlParam('name') == true){
alert (name + "was marked innactive.");
}
}();
You cannot run an alert after the location.href has changed because it causes the browser to refresh. Once refreshed, your script is no longer running.
You would need to move your alert script into your search page and perhaps pass the name as a querystring arguement.
You could store the name value using localstorage. The value can be evaluated after the redirection so you can display the dialog with the stored value (if any)
You can't style your alert dialog but you can always create a modal dialog from scratch or by using a web framework / library.

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;
}

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

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.

How to get user location and user hometown in facebook api?

I am already using this script but I didn't get hometown and location when I use API the hometown and location is undefined message appears please give example code and how to get user mobile number in Facebook API:
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
}, { scope: 'email,user_birthday,user_location,user_hometown' });
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.' + ' Email: ' + response.email + ' Facebook ID: ' + response.id);
//console.log('Good to see you, ' + response.name + '.');
var userfirstName=response.first_name;
var lastName=response.last_name;
var useremail=response.email;
var usersex=response.gender;
var userbithday=response.birthday;
var hometown= response.hometown.name;
var location= response.location.name;
alert(hometown);
});
}
<fb:login-button show-faces="false" width="200" max-rows="1" scope="email,user_birthday,user_location,user_hometown" onclick="testAPI();" onlogin="Log.info('onlogin callback')">
Sign Up with Facebook
</fb:login-button>
but can't get hometown and location, please help give any example.
You are using wrong permissions, try this:
{ scope: 'email,user_birthday,user_location,user_hometown' }
Another thing, to access the hometown use this:
var hometown= response.hometown.name;
Also, instead of /me; mention explicitly the fields you want using the fields parameter; just like: /me?fields=hometown
Graph API Explorer

Navigating to HTML page within javascript

I have this survey that stores to local storage. The user is prompted 'are you sure' once clicking submit. I'm trying to navigate to a confirmation HTML page(Confirmation.html) in my directory after user clicks 'ok' . But I'm not able to achieve both storing values and navigating to work. Can get any one only, it seems. Any help would be appreciated.
function clicked() {
if (confirm('Are you sure you want to submit? You will not be able to go back.')) {
form.submit();
} else {
return false;
}
}
$('form').submit(function () {
var person = $("#FirstName").val() + "." + $('#LastName').val();
$('input, select, textarea').each(function () {
var value = $(this).val(),
name = $(this).attr('name');
localStorage[person + "." + name] = value;
window.location.href = "Confirmation.html";
console.log('stored key: ' + name + ' stored value: ' + value);
});
});
<button type="submit" value="Save" id="Save" onclick="clicked();" >Submit Form</button>
If the above does not show my problem, here is the whole in jsfiddle
try this
<script>
$( document ).ready(function() {
$('#Save').click(function (e) {
if (confirm('Are you sure you want to submit? You will not be able to go back.')) {
var person = $("#FirstName").val() + "." + $('#LastName').val();
$('input, select, textarea').each(function () {
var value = $(this).val(),
name = $(this).attr('name');
localStorage[person + "." + name] = value;
window.location.href = "Confirmation.html";
console.log('stored key: ' + name + ' stored value: ' + value);
});
}
});
});
</script>
and remove onclick="clicked();" from button.
I am not sure why you need the confirmation.html page. Consider my opinions as follows:
1st: you are already asking the user for the confirmation giving him a messagebox. Thereafter you should only submit the form data (after any additional validation) to a server-side page (which I believe you have mentioned in the action value of the form).
2nd: If you still need the confirmation.html page then you should redirect to confirmation.html from that server-side page but not from your form page(the current page). Now it depends on the usage of confirmation.html that you should redirect to confirmation.html before/after feeding the form data into the database(or doing something else).

Categories

Resources