Exemplos de gadget comentário do Google Friend connect

Dois gadgets de comentário do Friend connect, seus códigos e características

Atualização: Provavelmente Google Friend Connect deixará de prestar alguns serviços ou será descontinuado, 'fechado'.

Aqui os dois exemplos de gadget comentário, um que permite classificar a página e o outro normal, porém, como pode ser percebido quem comentar no primeiro vai aparecer no segundo e vice-versa, pois estão na mesma página.

Uma coisa a ser notada é que da para ver a classificação que o visitante deu, pode até confundir alguns, pois parece que um voto foi dado ao comentário daquela pessoa. Pode ser uma questão de atenção ou acostumar, pois isso já é usado em alguns sites, algo semelhante pelo menos.

Esses gadgets permitem mudanças em seu código, já são possíveis muitas mudanças no momento que você cria ele na página do Google Friend connect, mas, pode ser alteradas as cores e até a linguagem, com adição ou substituição de códigos.

Gadget de comentário simples

Vou mostrar abaixo como faz para deixar ele em português
O primeiro Gadget de comentário, também é usado nessa página aqui, porém, ele tem outras cores que estão mais integradas ao estilo da página e, apesar de ser o mesmo código(pouco alterado), os comentários feitos lá são independentes desses feitos aqui.
Observe com bastante atenção, pois uma vírgula ou um caracter errado ou faltando é problema.

Esse código é único para esse site, assim como se você inscrever seu site/blog no Google Friend connect o seu site terá um número parecido com esse:
site: '01835492424996160812', e geralmente quando você fizer login no site do Friend connect e acessar a Configuração ou Obter gadget o seu número vai aparecer na barra de endereço do navegador, preste atenção para esses endereços, números que lá aparecem...

Para deixar seu html mais leve pode ser deletado 

Para colocar o gadget uma linguagem português basta adicionar esse código:
locale: 'pt_BR',
Se você não sabe ou não quer procurar descobrir a largura ideal, pode ser interessante mudar a largura de pixeis para %
Vamos supor que você queira que ocupe uma largura quase total da área onde o gadget está tente algo próximo de width:96%; É desaconselhado uma largura 100% porque as bordas e padding dos objetos podem interferir.

As cores, sempre estão em uma linha parecida com essa:
skin['ENDCAP_BG_COLOR'] = '#eeeeee';
E nesse caso BG indica cor de fundo de algo.

Código de um gadget comentário simples

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-5244092212921867822" style="width:372px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#eeeeee';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#eeeeee';
skin['CONTENT_BG_COLOR'] = '#eeeeee';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['DEFAULT_COMMENT_TEXT'] = '- adicione seu coment\xe1rio aqui -';
skin['HEADER_TEXT'] = 'Coment\xe1rios';
skin['POSTS_PER_PAGE'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderWallGadget(
 { id: 'div-5244092212921867822',
   site: '01835492424996160812', locale: 'pt_BR',
   'view-params':{"disableMinMax":"true","scope":"PAGE","features":"video,comment","startMaximized":"true"}
 },
  skin);
</script>

Exemplo de um gadget comentário simples

Comentário com classificação(Ratings and reviews)

Nesse comentário com classificação(Ratings and reviews) deixei algumas cores de fundo transparente, são os códigos parecidos com esse:
skin['ENDCAP_BG_COLOR'] = 'transparent';
Deixei sem cores de fundo porque pretendia usar uma imagem de fundo para exemplo, mas, como não tem ainda essa opção, usei código CSS para dar uma personalizada e adicionar um background(fundo) nesse gadget, compare com o código do primeiro gadget e observe onde adicionei esse código:


background: #940f04 url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG) right top no-repeat;

Antes que alguém queira usar essa imagem, vou avisar que ela é inadequada devido ao grande tamanho dela e só 1/4 dela deve estar aparecendo, o uso de imagens pesada deixa um site/blog pesado e o prejudica.

O número de comentários que são exibidos na página pode ser alterado, o que é bom, vamos supor que você crie uma página pesada com muitas imagens e texto(mais comentários, mais pesada), ou você acha que seu artigo não tem muita coisa interessante que as pessoas possam comentar, você pode nesses casos diminuir o número de comentários para aquela página, se alguém quiser ler todos, vai existir um link com Próximos.
12

Código de um gadget comentário com classificação

No código pouca coisa muda, tem pouca diferença entre os códigos desses gadgets, esses códigos só estão aqui para você perceber onde foi alterado coisas básicas como: cores, largura, imagem de fundo, número de comentários expostos, etc.

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-5276152397424870104" style="background: #940f04 url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG) right top no-repeat;width:98%;border:2px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ffffff';
skin['ENDCAP_BG_COLOR'] = 'transparent';
skin['ENDCAP_TEXT_COLOR'] = '#ffffff';
skin['ENDCAP_LINK_COLOR'] = '#ffff99';
skin['ALTERNATE_BG_COLOR'] = 'transparent';
skin['CONTENT_BG_COLOR'] = 'transparent';
skin['CONTENT_LINK_COLOR'] = '#ffff99';
skin['CONTENT_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#ffff99';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#33ff33';
skin['DEFAULT_COMMENT_TEXT_COLOR'] = '#ffffff';
skin['HEADER_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_HEADLINE_COLOR'] = '#ffff99';
skin['DEFAULT_COMMENT_TEXT'] = '- adicione sua resenha aqui -';
skin['HEADER_TEXT'] = 'Votar e Comentar';
skin['POSTS_PER_PAGE'] = '12';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderWallGadget(
 { id: 'div-5276152397424870104',
   site: '01835492424996160812', locale: 'pt_BR',
   'view-params':{"disableMinMax":"true","scope":"PAGE","features":"video,comment","startMaximized":"true"}
 },
  skin);
</script>