Suporte phpBB

Suporte com ética e seriedade
https://suportephpbb.com.br/

Botão facebook na barra lateral

https://suportephpbb.com.br/viewtopic.php?t=49469

Página 1 de 2

Botão facebook na barra lateral

Enviado: 11 Out 2016, 12:18
por filipepres
Não estou conseguindo colocar um botão da página do facebook, aquele tipo slider que ao passar o mouse em cima ele aparece.
Uso o Estilo basic e fiz o que foi descrito nesse fórum: http://clubtech.ro/viewtopic.php?t=668
Ele disse pra editar os arquivos:
common.css

Código: Selecionar todos

.facebook{
    float:right;
    width:232px;
    height:420px;
    background: url("{T_THEME_PATH}/images/slider.png");
    display:block;
    right:-205px;
    padding:0;
    position:fixed;
    top:201px;
    z-index:10000;
}

a#facebook { 
   display: table-cell; width: 37px; height: 30px; 
    background: url("{T_THEME_PATH}/images/podzielsiena/facebook.png") top left no-repeat; 
}
a:hover#facebook { 
   background-position: 0 -30px;
}
E o overall_header.html:
Procurar:

Código: Selecionar todos

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
E adicionar abaixo dessa linha isso aqui:

Código: Selecionar todos

<div class="facebook">
        <div style="color:#FFF; padding:10px 5px 0 35px;">
           <script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script><fb:like-box href="LINK SPRE PAGINA DE FACEBOOK" width="190" height="360" show_faces="true" stream="false" header="true" style="background: #ffffff;"></fb:like-box>

         <div id="fb-root"></div>
         <script type="text/javascript">
         // <!--
 
         (function() {
           var s = document.createElement('script');
           var root = document.getElementById('fb-root');
 
           window.fbAsyncInit = function() {
             FB.init({status: true, cookie: true, xfbml: true});
             root.removeChild(s);
           };
 
           s.async = true;
           s.src = document.location.protocol +
             '//connect.facebook.net/pl_PL/all.js';
           root.appendChild(s);
         }());
 
         // -->
         </script>
       </div>
</div>
No estilo basic não tem o common.css e sim o common.scss, eu editei ele e usei o sass compiler pra "recompilar" o tema.
Onde errei?

Re: Botão facebook na barra lateral

Enviado: 12 Out 2016, 00:18
por Chico Gois
É isto que você esta falando?

Limpe o cache do phpBB e do seu navegador
face.PNG

Re: Botão facebook na barra lateral

Enviado: 12 Out 2016, 17:55
por filipepres
Obrigado pela resposta.
Mas infelizmente não funcionou excluir o cache do fórum e do navegador.
O botão seria esse: Imagem
Ele fica escondido e acompanha quando você sobe ou desce a página, ele só aparece o link da página se passar com o cursor do mouse em cima dele.
O fórum que estou tentando editar é o tasogare.xyz

Re: Botão facebook na barra lateral

Enviado: 12 Out 2016, 17:58
por Chico Gois
Experimente outro navegador ou em outro computador

Re: Botão facebook na barra lateral

Enviado: 12 Out 2016, 19:24
por filipepres
Limpei o cache do fórum no acp e instalei o opera pra fazer os testes e ficou assim:
Imagem

Não carregou a imagem do slider.png e apareceu acima do logo.

Re: Botão facebook na barra lateral

Enviado: 12 Out 2016, 21:14
por Chico Gois
Qual ender do fórum?

Re: Botão facebook na barra lateral

Enviado: 13 Out 2016, 01:49
por filipepres
Chico Gois escreveu:Qual ender do fórum?
O que seria isso?

Re: Botão facebook na barra lateral

Enviado: 13 Out 2016, 13:06
por henrique.seven2011
Veja que é usada linguagem jquery, veja se seu style está com ele ativo, caso não é só acrescentar antes da tag </head>

Código: Selecionar todos

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js' type='text/javascript'/>
Use o seguinte código, adicione ele antes da tag </body>

Código: Selecionar todos

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("http://3.bp.blogspot.com/-TaZRLv66f8g/UoMnTyTbF6I/AAAAAAAAAGY/U4qcf-SP6d0/TheBlogWidgets_facebook_widget.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><div class="theblogwidgets" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FFacebook&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe></div>
</div>

Re: Botão facebook na barra lateral

Enviado: 14 Out 2016, 02:01
por filipepres
@henrique.seven2011 eu fiz como vc falou e ficou assim:
Imagem

Editei o overall_header.html.
Se ativar o jquery antes da tag </head> acontece esse erro.
Não usando o jquery a imagem do facebook aparece mas não se move (sei que não faz isso por causa da falta do jquery).
Imagem

O style que eu uso no fórum é esse aqui https://www.artodia.com/phpbb-styles/basic/

Desculpem incomodar vocês com isso mas aqui foi o único lugar que encontrei alguma resposta.

Re: Botão facebook na barra lateral

Enviado: 14 Out 2016, 11:47
por henrique.seven2011
Essa style já tem o jquery. Vou fazer assim, vou testar aqui em localhost. Mas antes, vc fez alguma modificação anterior na style?

EDIT:
Edite o overall_footer.html e antes da tag </body> insira

Código: Selecionar todos

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("http://3.bp.blogspot.com/-TaZRLv66f8g/UoMnTyTbF6I/AAAAAAAAAGY/U4qcf-SP6d0/TheBlogWidgets_facebook_widget.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><div class="theblogwidgets" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FFacebook&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe></div>
</div>
Testei aqui e funcionou. Veja como meu arquivo ficou:

Código: Selecionar todos

		<!-- EVENT overall_footer_content_after -->
	</div>

<!-- EVENT overall_footer_page_body_after -->

<!-- IF $WRAP_FOOTER == 0 -->
	<!-- INCLUDE navbar_footer.html -->
</div>
<!-- ENDIF -->

<div id="page-footer" class="page-width" role="contentinfo">
	<!-- IF $WRAP_FOOTER == 1 -->
		<!-- INCLUDE navbar_footer.html -->
	<!-- ENDIF -->

	<div class="copyright">
		<!-- EVENT overall_footer_copyright_prepend -->
		{CREDIT_LINE}
		<br />Style by <a href="http://www.artodia.com/">Arty</a>
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- EVENT overall_footer_copyright_append -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>

	<div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
		<div id="darken">&nbsp;</div>
	</div>

	<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
		<a href="#" class="alert_close"></a>
		<h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p>
	</div>
	<div id="phpbb_confirm" class="phpbb_alert">
		<a href="#" class="alert_close"></a>
		<div class="alert_text"></div>
	</div>
</div>

<!-- IF $WRAP_FOOTER == 1 -->
</div>
<!-- ENDIF -->

<div>
	<a id="bottom" class="anchor" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

<script type="text/javascript" src="{T_JQUERY_LINK}"></script>
<!-- IF S_ALLOW_CDN --><script type="text/javascript">window.jQuery || document.write('\x3Cscript src="{T_ASSETS_PATH}/javascript/jquery.min.js?assets_version={T_ASSETS_VERSION}">\x3C/script>');</script><!-- ENDIF -->
<script type="text/javascript" src="{T_ASSETS_PATH}/javascript/core.js?assets_version={T_ASSETS_VERSION}"></script>
<!-- INCLUDEJS forum_fn.js -->
<!-- INCLUDEJS ajax.js -->

<!-- EVENT overall_footer_after -->

<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
{$SCRIPTS}

<!-- EVENT overall_footer_body_after -->
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("http://3.bp.blogspot.com/-TaZRLv66f8g/UoMnTyTbF6I/AAAAAAAAAGY/U4qcf-SP6d0/TheBlogWidgets_facebook_widget.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><div class="theblogwidgets" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FFacebook&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe></div>
</div>
</body>
</html>
Todos os horários são UTC-03:00
Página 1 de 2

Powered by phpBB® Forum Software © phpBB Limited

Traduzido por: Suporte phpBB