Plakieta użytkownika

Plakietka użytkownika

Co to takiego?

Jest to cenna plakietka^tm, którą możesz umieścić na własnej stronie internetowej, aby zaprezentować swój profil użytkownika z serwisu devPytania.

wygląd: domyślny

wygląd: czysty

wygląd: ciemny

wygląd: kontrastowy

Jak tego używać?

Skopiuj jeden z poniższych fragmentów kodu i wklej na swoją stronę internetową.

<iframe src="http://dynamic.devpytania.pl/users/flair/2.html?theme=clean" marginwidth="0" marginheight="0"
        frameborder="0" scrolling="no" width="210px" height="60px"></iframe>

<script src="http://dynamic.devpytania.pl/users/flair/2.js?theme=clean" type="text/javascript"></script>

Techniczny bełkot

URL

http://dynamic.devpytania.pl/users/flair/{id}.{format}[?theme={theme}]

Dostępne formaty danych

html, js, json

Metody HTTP

GET

Parametry

{id} ID użytkownika
{format} html, js lub json
{theme} nazwa wyglądu

Przykłady

http://dynamic.devpytania.pl/users/flair/2.html
http://dynamic.devpytania.pl/users/flair/2.js
http://dynamic.devpytania.pl/users/flair/2.json

HTML

Uwaga
Możesz wybrać jeden ze standardowych wyglądów plakietki: czysty (clean), ciemny (dark) i kontrastowy (hotdog). Uczynisz to, określając nazwę wyglądu za pomocą parametru theme w query stringu. Jeśli chcesz, możesz również określić własny wygląd plakietki. W tym celu ustaw wartość parametru name na none oraz zdefiniuj odpowiednie style CSS. Przykładowy arkusz CSS został przedstawiony poniżej.

JavaScript

Uwaga
Możesz wybrać jeden ze standardowych wyglądów plakietki: czysty (clean), ciemny (dark) i kontrastowy (hotdog). Uczynisz to, określając nazwę wyglądu za pomocą parametru theme w query stringu. Jeśli chcesz, możesz również określić własny wygląd plakietki. W tym celu ustaw wartość parametru name na none oraz zdefiniuj odpowiednie style CSS. Przykładowy arkusz CSS został przedstawiony poniżej.
.valuable-flair {
	background-color: #f8f8f8;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: 50px;
	padding: 3px;
	width: 200px;
}

.valuable-flair .gravatar {
	float: left;
}

.valuable-flair .gravatar img {
	width: 50px;
	-ms-interpolation-mode: bicubic;
}

.valuable-flair .userInfo {
	float: right;
	text-align: right;
}

.valuable-flair .userInfo .username {
	line-height: 12px;
}

.valuable-flair .userInfo .username a {
	color: #0077CC;
}

.valuable-flair .badge1 {
	color: #ffcc00;
	font-size: 120%;
	margin-left: 3px;
}

.valuable-flair .badge2 {
	color: #c0c0c0;
	font-size: 120%;
	margin-left: 3px;
}

.valuable-flair .badge3 {
	color: #CC9966;
	font-size: 120%;
	margin-left: 3px;
}

.valuable-flair .reputation-score {
	color: #aaaaaa;
	font-size: 120%;
	font-weight: bold;
	margin-right: 2px;
}

.valuable-flair .badgecount {
	color: #aaaaaa;
	padding-left: 1px;
}
    

JSON

Uwaga
Wspieramy zarówno format JSON, jak i JSONP. Dla JSONP określ dodatkowy parametr w query stringu: callback=X, gdzie X jest funkcją, która ma zostać wywołana po otrzymaniu odpowiedzi od serwera. Aby dowiedzieć się więcej, w jaki sposób korzystać z JSONP za pomocą jQuery, odwiedź stronę z dokumentacją jQuery. Funkcje mogą zawierać jedynie litery, liczby i znaki podkreślenia oraz nie mogą być dłuższe niż 80 znaków. Poniżej zamieszczamy przykład użycia JSONP za pomocą jQuery:
Przykład
<html>
<head>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<style>
	.badge1 { color: #FFCC00; }
	.badge2 { color: #C0C0C0; }
	.badge3 { color: #CC9966; }
</style>
<body>
	<h1>Strona testowa - pobieranie plakietki za pomocą JSONP</h1>

	<div id="so-flair">
		<div id="gravatar"></div>
		<div id="displayname"></div>
		<div id="reputation">Reputacja: </div>
		<div id="badges">Odznaki: </div>

		<a id="profileurl"></a>
	</div>

	<script type="text/javascript">
	    $().ready(function() {
	        $.getJSON("http://dynamic.devpytania.pl/users/flair/2.json?callback=?", flairCallback);

	    });

	    function flairCallback(data) {
	        $("#gravatar").append(data.gravatarHtml);
	        $("#reputation").append(data.reputation);
	        $("#badges").append(data.badgeHtml);
	        $("#displayname").append(data.displayName);
	        $("#profileurl").attr("href", data.profileUrl).append("Zobacz mój profil");

	    };
	</script>
</body>

</html>        
    