domingo, 18 de julho de 2010

Como adicionar Friend Connect no Google sites ?

Como adicionar Friend Connect no Google sites ? Como colocar o google friend connect no seu google sites? Com a maneira que vou explicar aqui, você pode adicionar seu friend connect no seu google sites, vim tentando colocar alguns gadgets no google sites e não conseguia, procurei no Google e não tive muita ajuda, logo achei uma maneira que deu certo e então resolvi criar um tutorial para ensinar de um modo fácil como inserir os gadgets do Google Friend Connect no Google sites !

As imagens aqui que tirei por um erro ficaram meio duplicadas na parte superior, mas da pra acompanhar direitinho ! : )

O site que foi adicionado o Friend Connect hoje, tirado como exemplo para criar o tutorial:
http://www.ragnavendas.com - feito pelo Google Sites.

1 – Criando um site que aceita páginas com SCRIPT
2 – Adicionando o novo site ao Friend Connect
3 – Criando uma página no novo site com o script friend connect
4 – Criar um gadget no Google codes, referenciando o site com o script
5 – Salvar e Publicar o gadget
6 – Adicionar o novo gadget no Google Sites como URL.


1Criando um site que aceita páginas com Script

Você precisa de um site que aceite script, se tiver um, melhor, senão crie um site grátis: indico http://www.webs.com/

Tela 1

Clicar em Create WebSite.

Acompanhe na Tela 2, deve ser selecionada a página como HTML, clicando onde indica a imagem.


Tela 2

Clicar em HTML-Only Mode

Após selecionar como pagina HTML, você deve colocar o nome “endereço” do seu site, segue a imagem Tela 3 abaixo:


Tela 3

Clicar no botão Continue to Next Step

O endereço de acesso como no exemplo vai ser http://exemplo.webs.com

Logo após clicar no botão Continue to Next Step
Será enviado um mail para confirmação, talvez esse mail esteja no lixo eletrônico, entre no seu mail e clique no link para ativar o site.
Deixe o site aberto e siga o passo 2.


2 - Adicionando o novo site ao Friend Connect

É preciso adicionar o novo site criado ao Friend Connect, este novo site vai possuir o friend connect com a sua conta do Google. Acesse o friend connect : www.google.com/friendconnect
Logue com sua conta do Google e adicione seu site como mostra imagem:


Tela 4

Depois de preencher os campos C licar em Continuar.


Retorne ao site criado.

3 - Criando uma página no novo site com o script do Friend Connect.

Logado no site webs, você deve: Clicar na opção New Page, colocando o nome da página para colar o script no exemplo: membros.htm e clica em add Page como mostra a próxima imagem tela 5.


Tela 5

Clicar em Add Page

Será criado a página em branco. Clicando no lápis Edit” entra na página para você postar o código script do seu Friend Connect como mostra a tela 6:


Tela 6

Depois de colar o código do seu Friend Connect , Clicar no botão para Salvar

Obs:O código do Friend Connect gera dentro da sua conta Friend Connect, lá você copia e cola nessa página mostrada na imagem acima.

Obs: Nesse código onde existe Widht: eu deixei como ‘auto’ ,onde ele pega automático o tamanho da tela e se ajeita conforme a tela do gadget.

Após salvar a página, você pode testar se está funcionando seu Friend Connect nessa página que acabou de criar, no meu caso ficou o seguinte

endereço: http://erisonmeira.webs.com/membros.htm


Tela 7

Testando a nova página com o script do Friend Connect.

4 - Criar um gadget no Google codes, referenciando o Friend Connect.

Agora o próximo passo é acessar o Google codes, para criar um gadget aceitável para o Google sites, dentro deste gadget só vai constar o endereço desse site com o Friend Connect que está funcionando certinho J.

Você deve estar logado na sua conta do Google para criar o gadget.

Recomendo que você acesse com o Internet Explorer essa página para criar os códigos, salvar e publicar.



Para criar Acesse:
http://code.google.com/intl/pt-BR/apis/gadgets/docs/tools.html#GGE

Abriu um espaço para criar código onde você deve colocar exatamente como o seguinte:

Obs: Você deve mudar o Title e o Endereço do Site para o endereço que você criou na sua página.htm e deixar no formato com a boca de jacaré, pois nao da pra posta código aqui. Pelas fotos e imagens é possível verificar e conferir se o código está correto.

Module
ModulePrefs title="Membros do Ragna Vendas" height="200

Content type="url" href="http://erisonmeira.webs.com/membros.htm



5 – Salvar e Publicar o gadget

Após criar esse código você seleciona File e clica em Save As, coloca o nome que desejar, no exemplo foi salvo como membros, após salvar, você deve clicar em File novamente e em Publish.. para então publicar seu novo gadget. Segue as imagens abaixo:

Tela 8

Aqui você deve clicar em Save As para salvar seu código.


Tela 9

Aqui logo após salvar, você deve clicar em publish.. para publicar seu gadget.

Quando você clicar para publicar, seu gadget, será aberta uma mensagem, pode clicar em OK, e logo aparece a próxima imagem, tela 10:


Tela 10

Pode fechar esta tela :), segue o próximo passo.


6 – Adicionar o novo gadget no Google Sites como URL.


Para adicionar o novo gadget no Google sites é preciso pegar o endereço que é gerado no Google codes, clicando logo na direita em cima no nome da página salva no exemplo está como membros2.xml, ali é possível copiar o código XML, nesse exemplo fica o seguinte:

http://hosting.gmodules.com/ig/gadgets/file/112774056723824541027/me
mbros2.xml

É parecido com esse o endereço o URL que você deve postar no Google sites.


Tela 11

Aqui você copia o Endereço no navegador.


Agora a parte final e importante.

Entrar no seu site do Google, na página e lugar que deseja adicionar o gadget do Friend Connect e clica em Editar Página, Inserir > Adicionar mais gadget, seleciona Adicionar gadget por URL. Postando esse último link em XML que você acabou de copiar do código. Segue a imagem para esclarecer melhor.


Tela 12


Clicar em adicionar.

Agora é com você configurar o gadget do seu jeito !
Qualquer dúvida pode entrar em contato que tentarei ajudar : )

www.supersatisfeito.com.br
Até mais.

3 comentários:

  1. cara não sei se ta ai porque eu não achei pra colocar o friendconnect num site que não tem relacões com o google o script dele no caso...
    se estuver perguntado algo que tenha ai já peço desculpas.

    ResponderExcluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Olá, eu consegui até o passo 5, onde tinha que publicar o gadget empacou, e sempre dá esta mensagem:

    "Please consider fixing the following issues below before publishing your gadget:
    Gadget XML must be valid and well formed."

    Não sei como prosseguir, eu troquei o title e o nome da página, mas mesmo assim não vai.

    Obrigado.

    ResponderExcluir