msn no site  + Asp.net
Autor: Juliano Sales | Publicado: 2011-04-23T08:17:00-07:00



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.
DesenvolvimentoPrimeira mente precisamos configurar esse recurso no site da Microsoft, para acessar basta entrar nessa pagina&nbsp;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&nbsp; o&nbsp; 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:&nbsp;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,&nbsp; e acrescente na teg head&nbsp; 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.
&nbsp; &lt;script type="text/javascript"&gt;&lt;!--&lt; Classe msnStatus ela retorna o status do MSN &gt;--&gt;&nbsp;&nbsp;function msnStatus(presence) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var idx = presence.id.indexOf('@');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (idx &gt;= 0) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var id = presence.id.substr(0, idx);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var element = document.getElementById('Microsoft_Live_Messenger_PresenceButton_' + id);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (element) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; element.innerHTML = "";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var conversationUrl = element.attributes['msgr:conversationUrl'].value;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var statusIcon = document.createElement('img');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var Status = statusIcon.title = presence.statusText;&lt;!--&lt;Recebe o status da variável “Status”, e como valor fazemos&nbsp; as comparações&nbsp; e atribuímos &nbsp;para a variável especifica --&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(document).ready(function () {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var txtMsnOn = "Clique aqui (Atendente está Online)";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var txtMsnOcupado = "Clique aqui (Atendente está Ocupado)";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var txtMsnAusente = "Clique aqui (Atendente está Ausente)"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var txtMsnOf = "Atendente está Offline";


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $("#boxstatusMsn").removeAttr("class");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (Status == "Offline") {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- &lt; Caso o status da variável seja offline, atribuo para o meu span o texto da variável “txtMsnOf”--&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $("#statusMsg").text(txtMsnOf);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else if (Status == "Ocupado") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $("#statusMsg").text(txtMsnOcupado);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else if (Status == "Ausente") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $("#statusMsg").text(txtMsnAusente);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $("#statusMsg").text(txtMsnOn);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp; &lt;/script&gt;
Depois de conhecer a estrutura do java script temos que configurar o corpo de nossa pagina dentro da&nbsp; tag body ,precisamos colocar os seguinte código como no exemplo a baixo.
&nbsp;&nbsp;&nbsp; &lt;div&gt;&nbsp;&nbsp;&nbsp;&nbsp; Atendimento:&lt;span&gt;&lt;a href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&amp;mkt=pt-br"&gt;&lt;label id="statusMsg"&gt;&lt;/label&gt;&lt;/a&gt;&lt;/span&gt;
&lt;div id="Microsoft_Live_Messenger_PresenceButton_e709ab67aad5cfca" msgr:conversationUrl="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&amp;mkt=pt-br"&gt;&lt;/div&gt;
&lt;script type="text/javascript" src="http://messenger.services.live.com/users/e709ab67aad5cfca@apps.messenger.live.com/presence?dt=&amp;mkt=pt-br&amp;cb=msnStatus"&gt;&lt;/script&gt;
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
Agora precisamos usar o código gerado pela Microsoft que &nbsp;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 &nbsp;e apagar a estrutura da Microsoft e vamos deixar na nossa body &nbsp;a estrutura &nbsp;que montei
Estrutura Microsoft.
&lt;script type="text/javascript" src="http://settings.messenger.live.com/controls/1.0/PresenceButton.js"&gt;&lt;/script&gt;&lt;div&nbsp; id="Microsoft_Live_Messenger_PresenceButton_e709ab67aad5cfca"&nbsp; msgr:width="100"&nbsp; msgr:backColor="#D7E8EC"&nbsp; msgr:altBackColor="#FFFFFF"&nbsp; msgr:foreColor="#424542"&nbsp; msgr:conversationUrl="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&amp;mkt=pt-BR"&gt;&lt;/div&gt;&lt;script type="text/javascript" src="http://messenger.services.live.com/users/e709ab67aad5cfca@apps.messenger.live.com/presence?dt=&amp;mkt=pt-BR&amp;cb=Microsoft_Live_Messenger_PresenceButton_onPresence"&gt;&lt;/script&gt;

Estrutura Tutorial
Essa estrutura e que vamos utilizar no corpo da nossa pagina mais antes precisamos alterar&nbsp; 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 &nbsp;

&lt;div&gt;&nbsp;&nbsp;&nbsp;&nbsp; Atendimento:&lt;span&gt;&lt;a href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&amp;mkt=pt-br"&gt;&lt;label id="statusMsg"&gt;&lt;/label&gt;&lt;/a&gt;&lt;/span&gt;&lt;div id="Microsoft_Live_Messenger_PresenceButton_e709ab67aad5cfca" msgr:conversationUrl="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&amp;mkt=pt-br"&gt;&lt;/div&gt;
&lt;script type="text/javascript" src="http://messenger.services.live.com/users/e709ab67aad5cfca@apps.messenger.live.com/presence?dt=&amp;mkt=pt-br&amp;cb=msnStatus"&gt;&lt;/script&gt;
&nbsp;&nbsp;&nbsp; &lt;/div&gt;

Exemplo do código do body da pagina.
&nbsp;&lt;body&gt;&nbsp;&nbsp;&nbsp; &lt;form id="form1" runat="server"&gt;&nbsp;&nbsp;&nbsp; &lt;div&gt;&nbsp;&nbsp;&nbsp;&nbsp; Atendimento:&lt;span&gt;&lt;a href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&amp;mkt=pt-br"&gt;&lt;label id="statusMsg"&gt;&lt;/label&gt;&lt;/a&gt;&lt;/span&gt;
&lt;div id="Microsoft_Live_Messenger_PresenceButton_e709ab67aad5cfca" msgr:conversationUrl="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&amp;mkt=pt-br"&gt;&lt;/div&gt;
&lt;script type="text/javascript" src="http://messenger.services.live.com/users/e709ab67aad5cfca@apps.messenger.live.com/presence?dt=&amp;mkt=pt-br&amp;cb=msnStatus"&gt;&lt;/script&gt;
&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp;&nbsp; &lt;/form&gt;&lt;/body&gt;Resultado Final.

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