Na primeira vez que você efetua sign in no developerWorks, um perfil é criado para você. Informações selecionadas do seu perfil developerWorks são exibidas ao público, mas você pode editá-las a qualquer momento. Seu primeiro nome, sobrenome (a menos que escolha ocultá-los), e seu nome de exibição acompanharão o conteúdo que postar.

Todas as informações enviadas são seguras.

Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Todas as informações enviadas são seguras.

My developerWorks:

Minhas notificações:

Sair

Selecione um idioma:

Adicionando widgets do Google, Twitter e Youtube nas Comunidades do IBM Connections

Fernanda de Sousa Gomes , IT Specialist - IBM Collaboration Solutions, IBM

Fernanda de Sousa Gomes é Especialista de Sistemas na brand de Lotus, na IBM Brasil, e possui 11 anos de experiência em WebSphere Portal. Ela é formada em Processamento de Dados pela Universidade Mackenzie. Suas áreas de conhecimento incluem IBM Connections, Web Content Managenent e WebSphere Application Server.

Resumo: Este documento explica como adicionar widgets do Google News, Twitter e Youtube nas Comunidades do IBM Connections.

Marque isto!

Data: 31/Out/2011
Nível: Intermediário
Atividade: 424 visualizações
Comentários:

Introdução:

Este documento explica como preparar, customizar e por fim, adicionar widgets do Google News, Twitter e Youtube nas Comunidades do IBM Connections.

Os códigos destes widgets estão disponíveis na internet por seus provedores, prontos para uso do público.

Porém, recomendamos o uso do código aqui descrito, visto que ele já foi alterado para ser inserido nas comunidades.

Produtos envolvidos:

IBM Connections 3.0.1
IBM HTTP Server 7.x

Voltar para parte superior

Parte 1 – Preparando os widgets

Nesta sessão, iremos mostrar como criar e preparar os widgets para serem consumidos pelas comunidades do IBM Connections. Para efeitos de prova de conceito, não será necessário qualquer modificação nos códigos abaixo. Porém, se desejar ajustar as palavras-chave utilizadas nestes exemplos, o documento também irá auxiliá-lo.

Google News

O widget do Google News mostrará as últimas notícias baseados em uma ou mais palavras-chave.

Exemplo do widget do Google News:

Figura 1.

O código utilizado no widget do GoogleNews é mostrado abaixo, este exemplo mostra as notícias com as palavras chaves "IBM Brasil".

Crie um arquivo chamado "GoogleNews_IBM.xml"
Copie e cole o código abaixo:

<iw:iwidget name="googleNews" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget">
<iw:content mode="view">
<![CDATA[
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0
style="border:0;margin:0;width:300px;height:250px;"
src="http://www.google.com/uds/modules/elements/newsshow/iframe.html
?rsz=large&format=300x250&q=IBM Brasil&element=true" scrolling="no"
allowtransparency="true"></iframe>
]]>
</iw:content>
</iw:iwidget>

Copie o arquivo para a seguinte pasta do seu IBM HTTP Server (crie as pastas, se necessário):

<HTTPServer>\widgets\googlenews\

Para criar versões diferentes do widget, com outras notícias, basta alterar a linha onde a palavra-chave é definida. Exemplo:

De "IBM Brasil":

http://www.google.com/uds/modules/elements/newsshow/iframe.html?
rsz=large&format=300x250&q=IBM Brasil&element=true

Para "IBM Solidaria"

http://www.google.com/uds/modules/elements/newsshow/iframe.html?
rsz=large&format=300x250&q= IBM Solidaria&element=true

Importante: Lembre-se que as regras de acentuação em códigos HTML devem ser respeitadas. Ou seja, se for acentuar a palavra "Solidária", o caracter com acento deve ser devidamente substituído pelo seu URL Encode equivalente, exemplo:

Solid%C3%A1ria

Dica: Para definir múltiplas palavras, separe cada palavra por uma vírgula, exemplo utilizando as palavras chaves "IBM Brasil,Solidaria" (a vírgula, neste caso, simboliza o "or"):

http://www.google.com/uds/modules/elements/newsshow/iframe.html?
rsz=large&format=300x250&q=IBM%20Brasil%2CSolid%C3%A1ria&element=true

Ou se preferir, você pode utilizar o próprio site da Google para criar o código com suas palavras-chave:

http://www.google.com/webelements/#!/news

Twitter

O widget do Twitter mostrará os últimos tweets em real time baseados na palavras-chave escolhida.

Exemplo do widget do Twitter:

Figura 2.

Para que este widget funcione em sua comunidade, você deverá dividi-lo em 2 partes:

Parte 1 – o código do twitter:

Crie o arquivo com o nome "Twitter_IBM_parte1.html"
Copie e cole o código abaixo:

<html>
<body>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: 'ibmbrasil',
interval: 6000,
title: '',
subject: 'IBM Brasil',
width: 250,
height: 300,
theme: {
shell: {
background: '#8ec1da',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script>
</body>
</html>

OBS: Para criar estes widgets com outras palavras-chave, altere os valores "search" e "subject" do código acima apropriadamente.

Salve e feche o arquivo
Copie o arquivo para a seguinte pasta do seu IBM HTTP Server (crie as pastas, se necessário):

<HTTPServer>\widgets\twitter\

Parte 2 – o código do widget:

Crie o arquivo com o nome "Twitter_IBM_parte2.xml"
Copie e cole o código abaixo:

<iw:iwidget name="Twitter" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget">
<iw:content mode="view">
<![CDATA[
<iframe scrolling="auto" width="100%" height="260" frameborder="0"
src="http://<webserver_host>/widgets/twitter/Twitter_IBM_parte1.html
"></iframe>
]]>
</iw:content>
</iw:iwidget>

Salve e feche o arquivo
Copie o arquivo para a seguinte pasta do seu IBM HTTP Server (crie as pastas, se necessário):

<HTTPServer>\widgets\twitter\

OBS: Lembre-se de alterar a URL do arquivo HTML apropriadamente com o host do seu webserver e nome do correto do arquivo, se necessário.

Youtube

O widget do Youtube mostrará os vídeos de um canal youtube específico.

Exemplo do widget do Youtube mostrando o canal "IBM"

Figura 3.

Para que este widget funcione em sua comunidade, você deverá dividi-lo em 2 partes:

Parte 1 – o código do youtube:

Crie o arquivo com o nome "Youtube_IBM_parte1.html"
Copie e cole o código abaixo:

<script src="http://www.gmodules.com/ig/ifr?
url=http://www.google.com/ig/modules/youtube.xml&amp;up_channel=I
BM&amp;synd=open&amp;w=320&amp;h=390&amp;title=&amp;border=
%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

OBS: Para criar widgets com outras palavras-chave, altere o valor do parâmetro "up_channel=" no código acima apropriadamente.

Salve e feche o arquivo
Copie o arquivo para a seguinte pasta do seu IBM HTTP Server (crie as pastas, se necessário):

<HTTPServer>\widgets\youtube\

Parte 2 – o código do widget:

Crie o arquivo com o nome "Youtube_IBM_parte2.xml"
Copie e cole o código abaixo:

<iw:iwidget name="googleYoutube" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget">
   <iw:content mode="view">
   <![CDATA[
      <iframe scrolling="auto" width="100%" height="260" frameborder=
"0"
src="http://<webserver_host>/widgets/youtube/Youtube_IBM_parte1.html
"></iframe>
        ]]>
     </iw:content>
</iw:iwidget>

OBS: Lembre-se de alterar a URL do arquivo HTML apropriadamente com o host do seu webserver e nome do correto do arquivo, se necessário.

Salve e feche o arquivo
Copie o arquivo para a seguinte pasta do seu IBM HTTP Server (crie as pastas, se necessário):

<HTTPServer>\widgets\youtube\

Voltar para parte superior

Parte 2 – Alterando a configuração do IBM HTTP Server

Nos passos anteriores, nós criamos os widgets que serão consumidos pelas comunidades do IBM Connections e os salvamos em um diretório do IBM HTTP Server (IHS).

Para que estes widgets estejam acessíveis via IHS, é necessário adicionar um Alias no arquivos de configuração do webserver:

Edite o arquivo abaixo:

<IHS>/conf/httpd.conf

Adicione a linha abaixo no final do arquivo:

Alias /widgets/ "<IHS>/HTTPServer/widgets/"

Onde, <IHS> é o diretório do seu IBM HTTP Server.

Salve e feche o arquivo
Reinicie o IBM HTTP Server

A partir deste momento, é possível testar o acesso aos widgets através da URL do webserver, exemplo:

http://<webserver_host>/widgets/twitter/Youtube_IBM_parte1.html

Voltar para parte superior

Parte 3 – Adicionando os widgets nas configurações das Comunidades

Por fim, devemos agora, adicionar os widgets nas configurações das comunidades do IBM Connections.

Isto permitirá que os mesmos sejam disponibilizados para serem inseridos em qualquer comunidade.

Para isso, execute o procedimento abaixo:

Vá para o diretório abaixo:

<profile>/bin/

Execute o comando wsadmin, conforme exemplo:

wsadmin.bat -lang jython -user <admin> -password <senha>

No prompt do wsadmin, execute o comando abaixo:

execfile("communitiesAdmin.py")

Efetue o checkout do arquivo widgets-config.xml

CommunitiesConfigService.checkOutWidgetsConfig("X:/temp", "<mycell>")

Onde, <mycell> é o nome da célula do WebSphere Application Server.

Vá para o diretório X:\temp e localize um arquivo chamado widgets-config.xml

Localize a área resource type="community" e insira as informações de seu widget (arquivo XML somente), logo abaixo de definitions:

<resource type="community"
aclServiceImpl="com.ibm.lconn.comm.acl.ACLSvcImpl"
resourceValuesProvider="com.ibm.tango.internal.service.CommunitiesRe
sourceValuesProvider"
xpathMandatedWidgetForMainPage="/tns:config/tns:resource[@type='com
munity']/tns:widgets/tns:layout/tns:page[@pageId = 'communityOver
view']">
        <widgets xmlns:tns="http://www.ibm.com/widgets-config">
          <definitions>


            <!--  Adicione seus widgets aqui -->
            <!--  Altere a URL apropriadamente -->

 		<widgetDef defId="News" primaryWidget="true" modes="view"
 	url="http://<webserver_host>/widgets/googlenews/GoogleNews_IBM.xml">
                </widgetDef>

		<widgetDef defId="Twitter" primaryWidget="true" modes="view"
		url="http://<webserver_host>/widgets/twitter/Twitter_IBM_parte
                                2.xml"></widgetDef>   
                                
		<widgetDef defId="Youtube" primaryWidget="true"
		modes="view"
		url="http://<webserver_host>/widgets/youtube/You
                                tube_IBM_parte2.xml"></widgetDef>

O código acima, irá permitir a inserção do widget na página "Overview" da Comunidade, através da opção "Customizar".

Caso queira inserí-lo na coluna vertical direita, o código deve ser este:

<widgetDef defId="News" primaryWidget="false" modes="view"
url="http://<webserver_host>/widgets/googlenews/GoogleNews_IB
M.xml"></widgetDef>

Salve e feche o arquivo
Retorne à sessão de wsadmin aberta no passo 4 acima, e efetue o check-in do arquivo alterado, executando o comando abaixo:

CommunitiesConfigService.checkInWidgetsConfig("X:/temp", "<mycell>")

Onde, <mycell> é o nome da célula do WebSphere Application Server.

Reinicie somente a aplicação Communities utilizando a Console Administrativa do WebSphere

Adicionando os widgets na comunidade

No passo anterior, você inseriu os widgets nas configurações do Connections. Agora, basta adicioná-los à comunidade desejada.

Faça o login no IBM Connections, exemplo:

http://<webserver>/homepage/login

Selecione a Comunidade desejada no qual você seja o proprietário
Clique em "Ações da Comunidade >> Customizar"

Figura 4.

Os widgets serão listados conforme figura abaixo:

Figura 5.

Visualização maior da figura 5.

Adicione-os, clicando no símbolo (+)

Feche a janela de customização após adicionar os widgets desejados

Figura 6.

Visualização maior da figura 6.

Pronto. Os widgets foram adicionados à comunidade no final da tela.

Figura 7.

Visualização maior da figura 7.

Voltar para parte superior

Conclusão

O documento demonstrou, passo-a-passo, como preparar, customizar e adicionar widgets públicos do Google News, Twitter e Youtube nas comunidades do IBM Connections.

Sobre o autor

Fechar [x]

Ajuda para Relatar Abuso

Relatar abuso

Obrigado. Esta entrada foi sinalizada para atenção do moderador.

Fechar [x]

Ajuda para Relatar Abuso

Relatar abuso

Falha no envio do Relatório de abuso. Tente novamente mais tarde.

Fechar [x]

developerWorks: Registre-se

Todas as informações enviadas são seguras.

Fechar [x]

Selecione seu nome de exibição

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Todas as informações enviadas são seguras.

Classificar este artigo

Comentários

Voltar para parte superior

static.content.url=http://www.ibm.com/developerworks/js/artrating/

SITE_ID=80

Zone=Lotus

ArticleID=768883

ArticleTitle=Adicionando widgets do Google, Twitter e Youtube nas Comunidades do IBM Connections

publish-date=10312011

Índice

Introdução:
Parte 1 – Preparando os widgets
Parte 2 – Alterando a configuração do IBM HTTP Server
Parte 3 – Adicionando os widgets nas configurações das Comunidades
Conclusão
Sobre o autor
Comentários

Conheça a IBM da sua cidade

A IBM está mais perto do que você imagina!

Saiba mais

My developerWorks:

Minhas notificações:

Selecione um idioma:

Itens Técnicos

Downloads e Trials

Comunidade

Adicionando widgets do Google, Twitter e Youtube nas Comunidades do IBM Connections

Relatar abuso

Relatar abuso

developerWorks: Registre-se

Selecione seu nome de exibição

Índice

Conheça a IBM da sua cidade

Compartilhe esta página:

Siga o developerWorks:

My developerWorks:

Minhas notificações:

Selecione um idioma:

Itens Técnicos

Downloads e Trials

Comunidade

Adicionando widgets do Google, Twitter e Youtube nas Comunidades do IBM Connections

Relatar abuso

Relatar abuso

developerWorks: Registre-se

Selecione seu nome de exibição

Índice

Conheça a IBM da sua cidade

Tags

Compartilhe esta página:

Siga o developerWorks: