Comentários Recentes na Barra Lateral

Publicada originalmente em 28 de Janeiro de 2012.
Texto corrigido e actualizado com novas ligações.

Osvaldo

Mocheco⊗Marafado

Publiquei este artigo no Mocheco⊗Marafado em Janeiro de 2012, depois de pedir autorização ao autor do script para fazer uma tradução do mesmo para Português.
Era um script que além de permitir colocar os comentários mais recentes na barra lateral do Blogger, ainda tinha a opção de apresentar o avatar de quem comentara junto com o nome...

Isso na altura era uma novidade que eu quis partilhar com os meus visitantes, especialmente com aqueles que poderiam aproveitar uma versão em Português.

NOTA: O texto seguinte está praticamente como o escrevi há cerca de 10 anos...

---

Tentei actualizar este artigo onde necessário, mas resolvi mexer o menos possivel para não estragar o sentido de alguns dos comentários deixados então e que restaurei neste artigo... e também para recordar/mostrar alguma da confusão que alguns bloguistas enfrentaram quando o Blogger faz algumas sérias modificações na plataforma alguns anos atrás.

Estes últimos dias tem sido uma loucura brincando com os códigos do novo sistema de comentários do Blogger, pelo meio criei um novo template mas depois o Blogger editou o código base da plataforma (suponho que para corrigir alguns bugs entretanto descobertos), e isso estragou toda a personalização que tinha feito e tive que refazer tudo.

Mas, e como mesmo quando as coisas não correm bem há sempre alguma coisa boa no meio, ao procurar soluções para os problemas que tive para corrigir certas coisas, aconteceu de descobrir um excelente blogue de tutoriais e dicas para o Blogger onde vi algo que já tinha tentado fazer sem sucesso: Um gadget com os comentários mais recentes na barra lateral.

Sim. Existem milhares desses gadgets por essa blogosfera fora, cada um com uma maneira diferente de mostrar os comentários recentes... mas o que me chamou a atenção neste gadget foi que além dos comentários recentes com a ligação para o comentário em si e o nome de quem deixou o dito comentário, também mostra o avatar de quem comentou com a ligação para o perfil (se disponível).

O blogue é Yet Another Blogger Tips Blog (que recomendo seguir para se manterem actualizados sobre esta e outras dicas publicadas por lá ) e onde podem encontrar o tutorial sobre como colocar o gadget dos comentários recentes com avatar da autoria do MS-potilas.

Podem ver o elemento a funcionar aqui neste blogue na barra lateral (Com um estilo bem diferente do apresentado na imagem deste artigo de 2012), ou no Quadradinhos INk, onde também o instalei.

Claro que fiz algumas modificações no estilo CSS para se adaptar ao meu blogue, mas basicamente não é necessário modificar muita coisa.
Da maneira como está o código, basta copiar e colocar num novo elemento HTML/JavaScript na barra lateral.

Abaixo podem ver o código já traduzido e com os estilos CSS que utilizo[utilizava em 2012] aqui neste blogue:

Ver Código

ver código

imprimir?

01	<style type="text/css">

02	.recent-comment {/* ---- Cada um dos comentários ---- */

03	margin-bottom:5px;

04	background: rgba(0,0,0,0.5);

05	padding: 5px 5px 5px 25px;

06	border: 1px inset #4be;

07	border-radius: 10px;

08

}

09	.recent-comment a:hover {/* ---- Os links presentes em cada um dos comentários ao passar o rato por cima ---- */

10	text-decoration:none;

11

}

12	.recent-comment:hover {/* ---- Cada um dos comentários ao passar o rato por cima ---- */

13	background: rgba(0,0,0,0.8);

14	border: 1px outset #4be;

15	box-shadow: 0 0 5px #abc, inset 0 0 5px #fff;

16

}

17	.recent-comment-admin {/* ---- Estilos para os comentários do autor do blogue ---- */

18	background: #fff;

19

}

20	.recent-comment-ico {/* ---- Estilos para os avatares ---- */

21	margin: 4px 0 -30px 5px;

22	display:block;

23	position:absolute;

24

}

25	.recent-comment-header {/* ---- Estilos para a parte que engloba os avatares e o nome do comentador ---- */

26	height: 24px;

27	overflow: hidden;

28	margin-left: 10px;

29	font-variant: small-caps;

30	font-size: 98%;

31

}

32	.recent-comment-header a {/* ---- Estilos para o link com o nome do comentador ---- */

33	color: #fc4;

34	line-height:220%;

35

}

36	.recent-comment-header a:hover {/* ---- Estilos para o link com o nome do comentador ao passar o rato por cima ---- */

37	color: #de6;

38

}

39	.recent-comment-body {/* ---- Estilos para o comentário em si ---- */

40	padding-right: 4px;

41	font-size: 95%;

42	border-top: 1px dashed #888;

43	margin:3px;

44

}

45	.recent-comment-footer {/* ---- Estilos para o link Ler Mais (localização) ---- */

46	font-size: 85%;

47	float:right;

48	margin-right:10px;

49

}

50	.recent-comment-footer a{/* ---- Estilos para o link Ler Mais ---- */

51	background: #4be;

52	color: #000;

53	padding:0px 3px;

54	border: 1px ridge #ff0;

55	border-radius: 10px;

56	opacity:0.5;

57

}

58	.recent-comment-footer a:hover{/* ---- Estilos para o link Ler Mais ao passar o rato em cima ---- */

59	color: #00f;

60	padding:1px 5px;

61	border: 1px outset #ff0;

62	opacity:1;

63

}

64

</style>

E a parte javascript:

ver código

imprimir?

001	<script type="text/javascript">

002	// Recent Comments blogger gadget by MS-potilas 2011, using feed avatars

003	// see http://yabtb.blogspot.com/2011/12/son-of-better-recent-comments-gadget.html

004

//

005	// CONFIGURAÇÕES:

006	var numRecentComments = 10; //numero de comentários a mostrar no elemento

007	var numPerPost = 0; // max de comentários que o script lê por artigo (0 para lêr todos em cada artigo)

008	var maxCommentChars = 90; //numero de caracteres a mostrar no corpo do comentário

009	var maxPostTitleChars = 0; // numero de caracteres a mostrar no titulo do comentário (o nome do comentador), usar 0 para mostar o nome completo

010

011	var txtWrote = 'disse:'; //o texto a seguir ao nome de quem comenta

012	var txtMore = 'Ler Mais >>'; // o texto do link para o comentário

013	var txtTooltip = '[user] em "[title]" - [date MM/dd/yyyy hh:mm]';

014	var txtAnonymous = 'Anónimo'; // deixar só ' ' ou colocar o como desejar que apareça quando existem comentários feitos por Anónimos

015	// Variables [xxx] in texts:

016	// supports [title], [user], [date], [time], [datetime], [date format]

017	// format supports: yyyy=long year, yy=short year, MM=month(01-12), dd=monthday, hh=hour, mm=min, ss=sec (formatos de data suportados pelo script, recomendo não mexer neste parte)

018

019	var getTitles = true;   // se colocar false, o script carrega mais rapido mas não mostra o nome do comentador

020	var trueAvatars = true; // se colocar false, o script carrega mais rapido mas não mostra o avatar

021	var urlMyAvatar = '';   // se deixar como está, o avatar do autor será o mesmo do perfil ou pode colocar um link para um avatar à escolha

022	var urlMyProfile = '';  // colocar o link do perfil do autor do blogue caso não tenha no blogue o elemento Perfil e queira dar estilo diferente aos comentários do autor

023

//

024	var cropAvatar = true; // mudar para false se não desejar que o avatar apareça quadrado (recomendo deixar true)

025	var sizeAvatar = 24; // tamanho em pixels do avatar

026

var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5b6Rzno8zmUWW9_5dkcjQTbSM6eiXY8Kroc4bddrfots190bLKCc01nSP7j-qWxPXQoSTgolu8orlTxtnwU8LJ5kTEcG4oDHUGOihuoAZVNFEfnqFe-ws-qpQIViLflTZRVI4cKB9v0/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable (avatar por defeito quando não existe avatar e aparece o icone do blogger. se alterar, colocar /s"+sizeAvatar+"/ tal como demonstrado acima para que script altere o tamanho automaticamente conforme o tamanho que colocamos em var sizeAvatar)

027

//

028	var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar; // se o comentador é anónimo ou comenta com nome/url (alterar para ficar como em var urlNoAvatar se quiserem colocar um avatar personalizado, mas em vez de "url" colocar 'url')

029	var maxResultsPosts = "";       // or for example "&max-results=100" (recomendo não alterar)

030	var maxResultsComments = "";    // or for example "&max-results=300" (recomendo não alterar)

031	// FIM DA CONFIGURAÇÃO

032	var urlToTitle = {};

033	function replaceVars(text, user, title, date) {

034	text = text.replace('[user]', user);

035	text = text.replace('[date]', date.toLocaleDateString());

036	text = text.replace('[datetime]', date.toLocaleString());

037	text = text.replace('[time]', date.toLocaleTimeString());

038	text = text.replace('[title]', title.replace(/\"/g,'"'));

039	var i = text.indexOf("[date ");

040	if(i > -1) {

041	var format = /\[date\s+(.+?)\]/.exec(text)[1];

042	if(format != '') {

043	var txtDate = format.replace(/yyyy/i, date.getFullYear());

044	txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));

045	txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));

046	txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));

047	txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));

048	txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));

049	//or: txtDate = txtDate.replace("dd", date.getDate());

050	txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));

051	//or: txtDate = txtDate.replace("hh", date.getHours());

052	text = text.replace(/\[date\s+(.+?)\]/, txtDate)

053

}

054

}

055	return text;

056

}

057	if(urlMyProfile == "") {

058	var elements = document.getElementsByTagName("*");

059	var expr = /(^| )profile-link( |$)/;

060	for(var i=0 ; i<elements.length ; i++)

061	if(expr.test(elements[i].className)) {

062	urlMyProfile = elements[i].href;

063

break;

064

}

065

}

066	function getPostUrlsForComments(json) {

067	for(var i = 0 ; i < json.feed.entry.length ; i++ ) {

068	var entry = json.feed.entry[i];

069	for (var k = 0; k < entry.link.length; k++ ) {

070	if (entry.link[k].rel == 'alternate') {

071	href = entry.link[k].href;

072

break;

073

}

074

}

075	urlToTitle[href] = entry.title.$t;

076

}

077

}

078	function showRecentComments(json) {

079	var postHandled = {};

080	var j = 0;

081	if(numPerPost) {

082	while(numPerPost < numRecentComments) {

083	for(var i = 0 ; i < json.feed.entry.length ; i++ ) {

084	var entry = json.feed.entry[i];

085	if(entry["thr$in-reply-to"]) {

086	if(!postHandled[entry["thr$in-reply-to"].href])

087	postHandled[entry["thr$in-reply-to"].href] = 1;

088

else

089	postHandled[entry["thr$in-reply-to"].href]++;

090	if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)

091

j++;

092

}

093

}

094	if(j >= numRecentComments)

095

break;

096	numPerPost++;

097

j = 0;

098	postHandled = {};

099

}

100	if(numRecentComments == numPerPost)

101	numPerPost = 0;

102

}

103	postHandled = {};

104

j = 0;

105	for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {

106	var entry = json.feed.entry[i];

107	if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)

108

continue;

109	if(entry["thr$in-reply-to"]) {

110	if(!postHandled[entry["thr$in-reply-to"].href])

111	postHandled[entry["thr$in-reply-to"].href] = 1;

112

else

113	postHandled[entry["thr$in-reply-to"].href]++;

114

j++;

115	var href='';

116	for (var k = 0; k < entry.link.length; k++ ) {

117	if (entry.link[k].rel == 'alternate') {

118	href = entry.link[k].href;

119

break;

120

}

121

}

122	if(href=='') {j--; continue; }

123	var hrefPost = href.split("?")[0];

124	var comment = "";

125	if("content" in entry) comment = entry.content.$t;

126	else                   comment = entry.summary.$t;

127	comment = comment.replace(/<br[^>]*>/ig, " ");

128	comment = comment.replace(/<\S[^>]*>/g, "");

129	var postTitle="";

130	if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];

131

else {

132	postTitle = hrefPost.split("/")[5].split(".html")[0].replace(/_\d{2}$/, "");

133	postTitle = postTitle.replace(/-/g," ");

134	postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);

135

}

136	if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {

137	postTitle = postTitle.substring(0, maxPostTitleChars);

138	var indexBreak = postTitle.lastIndexOf(" ");

139	postTitle = postTitle.substring(0, indexBreak) + "...";

140

}

141

142	var authorName = entry.author[0].name.$t;

143	var authorUri = "";

144	if(entry.author[0].uri && entry.author[0].uri.$t != "")

145	authorUri = entry.author[0].uri.$t;

146

147	var avaimg = urlAnoAvatar;

148	var bloggerprofile = "https://www.blogger.com/profile/";

149	if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)

150	avaimg = entry.author[0].gd$image.src;

151

else {

152	var parseurl = document.createElement('a');

153	if(authorUri != "") {

154	parseurl.href = authorUri;

155	avaimg = 'https://www.google.com/s2/favicons?domain=' + parseurl.hostname;

156

}

157

}

158	if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")

159	avaimg = urlMyAvatar;

160	if(avaimg == "https://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")

161	avaimg = urlNoAvatar;

162	var newsize="s"+sizeAvatar;

163	avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");

164	if(cropAvatar) newsize+="-c";

165	avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

166	if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)

167	authorName = txtAnonymous;

168	var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';

169	if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

170	var clsAdmin = "";

171	if(urlMyProfile != "" && authorUri == urlMyProfile)

172	clsAdmin = " recent-comment-admin";

173	var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601

174	var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

175

176	var txtHeader = txtWrote;

177	if(txtWrote.indexOf('[')==-1)

178	txtHeader = authorName + ' ' + txtWrote;

179

else

180	txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

181

182	var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);

183

184	document.write('<div title="'+tooltip+'" class="recent-comment'+clsAdmin+'">');

185	document.write('<div title="'+tooltip+'" class="recent-comment-header'+clsAdmin+'"><div title="'+tooltip+'" class="recent-comment-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');

186	if(comment.length < maxCommentChars)

187	document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '</div>');

188

else {

189	comment = comment.substring(0, maxCommentChars);

190	var indexBreak = comment.lastIndexOf(" ");

191	comment = comment.substring(0, indexBreak);

192	document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '...</div>');

193	if(txtMore != "") {

194	var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);

195	document.write('<div title="'+tooltip+'" class="recent-comment-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');

196

}

197

}

198	document.write('<div style="clear:both;"></div></div>');

199

}

200

}

201

}

202	if(getTitles)

203	document.write('<script type="text/javascript" src="https://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');

204	document.write('<script type="text/javascript" src="https://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');</script>

Ocultar Código

E é isso...
Para colocar o gadget em português, basta copiar ambos os código acima e colar num novo elemento HTML/JavaScript na barra lateral.

Tentei deixar o código comentado para ser fácil de entender como personalizar e configurar.

Caso prefiram colocar a versão em inglês, sigam as indicações no artigo original.

Que acham?

---

E... como estamos no mês do Natal...

O Natal é daqui a

-835 Dias

0-9 Horas

0-1 Minutos

0-32 Segundos

E por hoje é tudo.

Até breve.

Osvaldo Correia

Aspirante a Artista Digital, Moderador no site Heromorph desde 2007, autor do extinto blogue de fotomontagens e Banda Desenhada Mocheco Marafado. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Apaixonado por BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, onde pretendo partilhar algumas das coisas que tenho aprendido na vida.
BloggerTwitterFacebookPinterestStackOverflowNexusModsContactoPaypal

Queres ler outro artigo ao calhas?