Juliano Sales: msn no site + Asp.net

Nesses artigos vamos utilizar o recurso da Microsoft e customizar esse componente para melhores resultados.

Com a opção de chat nos sites facilitou a comunicação entre cliente e vendedores tornando mais humano a interações entre ambos, e com essa modificação você poderá usar e abusar da nossa criatividade.

Desenvolvimento

Primeira mente precisamos configurar esse recurso no site da Microsoft, para acessar basta entrar nessa pagina http://settings.messenger.live.com/applications/WebSettings.aspx

Configuração do Modulo.

Você estará abrindo uma página de configurações do MSN no live.com, preencha seus dados referente ao seu Windows Live ID.

A próxima página irá exibir uma opção chamada " Permitir que qualquer pessoa na Web veja a minha presença e me envie mensagens.". Marque ela e clique em "salvar" na barra acima.

Após salvar suas configurações, clique no menu "Criar HTML" localizado na lateral esquerda.

Nesta página, vamos escolher o controle botão Lembrando que o seu usuário poderá utilizar seu Windows Live ID próprio ou manda uma mensagem como "Visitante".

Logo abaixo aparece um campo onde é exibido um código que você deve copiar e salvar em um bloco de notas.

Referência: http://www.codigofonte.net/dicas/web/439_colocando-o-msn-messenger-...

Vamos iniciar o Visual Studio, criei um novo projeto Web Application ou Web Site nesse exemplo estou utilizando Web Application usando a versão do .NET Framework 3.5

Na página default.aspx entre no source da pagina, e acrescente na teg head o componente jquery,e vamos acrescentar o código Java script que fará o controle se o MSN esta online ou não, abaixo a imagem ilustrativa da estrutura do código.

Explorando o código Java script.

function msnStatus(presence) {

var idx = presence.id.indexOf('@');

if (idx >= 0) {

var id = presence.id.substr(0, idx);

var element = document.getElementById('Microsoft_Live_Messenger_PresenceButton_' + id);

if (element) {

element.innerHTML = "";

var conversationUrl = element.attributes['msgr:conversationUrl'].value;

var statusIcon = document.createElement('img');

var Status = statusIcon.title = presence.statusText;

$(document).ready(function () {

var txtMsnOn = "Clique aqui (Atendente está Online)";

var txtMsnOcupado = "Clique aqui (Atendente está Ocupado)";

var txtMsnAusente = "Clique aqui (Atendente está Ausente)"

var txtMsnOf = "Atendente está Offline";

$("#boxstatusMsn").removeAttr("class");

if (Status == "Offline") {

$("#statusMsg").text(txtMsnOf);

}

else if (Status == "Ocupado") {

$("#statusMsg").text(txtMsnOcupado);

}

else if (Status == "Ausente") {

$("#statusMsg").text(txtMsnAusente);

}

else {

$("#statusMsg").text(txtMsnOn);

}

});

}

} }

</script>

Depois de conhecer a estrutura do java script temos que configurar o corpo de nossa pagina dentro da tag body ,precisamos colocar os seguinte código como no exemplo a baixo.

<div>

Atendimento:<span><a href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&mkt=pt-br"><label id="statusMsg"></label></a></span>

</div>

Agora precisamos usar o código gerado pela Microsoft que provavelmente está como o código abaixo. Nesse código o que vamos aproveitar e apenas o id gerado pela Microsoft localizado na letra vermelha uma vez localizado o id vamos copiar esse código e apagar a estrutura da Microsoft e vamos deixar na nossa body a estrutura que montei

Estrutura Microsoft.

<div

id="Microsoft_Live_Messenger_PresenceButton_e709ab67aad5cfca"

msgr:width="100"

msgr:backColor="#D7E8EC"

msgr:altBackColor="#FFFFFF"

msgr:foreColor="#424542"

msgr:conversationUrl="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&mkt=pt-BR"></div>

Estrutura Tutorial

Essa estrutura e que vamos utilizar no corpo da nossa pagina mais antes precisamos alterar o id dessa estrutura pelo id gerado pela Microsoft, para ter uma maior segurança podemos localizar e substituir usando o Visual Studio apertanto a tecla ctrl+f

<div>

Atendimento:<span><a href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&mkt=pt-br"><label id="statusMsg"></label></a></span>

</div>

Exemplo do código do body da pagina.

<body>

<div>

Atendimento:<span><a href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&mkt=pt-br"><label id="statusMsg"></label></a></span>

</div>

</form>

</body>

Resultado Final.

Com essa funcionalidade na sua pagina você poderá colocar imagem ou personalizar o status de acordo com a mensagem recebida pela Microsoft.

msn no site + Asp.net

Um comentário: