Siga-nos em...
Follow us on Twitter Follow us on Facebook Watch us on YouTube
Registro


HGIDC
Resultados 1 a 6 de 6
  1. #1

    Avatar de BeoWulf
    Data de Ingresso
    May 2011
    Localização
    Rio de Janeiro
    Idade
    27
    Posts
    389
    Agradecido
    275
    Agradeceu
    144
    Peso da Avaliação
    10

    Padrão Sistema de comentários Facebook

    Olá pessoal,
    Bom, resolvi criar um tutorial de implementação do sistema de comentários do Facebook no MuSite, então vou direto ao ponto, o sistema pode ser usado em qualquer página web, não sendo exclusiva de sites de Mu, mas como vou por como exemplos códigos do sistema de notícias do MuSite do Daldegam, então vou criar na categoria de Mu Online.

    Vamos direto ao ponto, primeiro de tudo vocês devem criar um Aplicativo no Facebook que irá gerenciar os comentários, isso é bem simples e segue detalhado em imagens que serão postadas abaixo:

    Primeiro passo é acessar a sua conta no Facebook e então entrar no seguinte link: App Developers ([Somente usuários registrados podem vem os links. ])
    Uma vez estando no link vocês irão ver uma página parecida com a seguinte:





    Deve-se clicar em +Create new App
    Então será exibida uma página como a da imagem abaixo, preencha conforme demonstrado:






    Continue o processo inserindo as informações do aplicativo que estamos criando, confira na imagens:





    Confirme os códigos captcha para avançar na criação do aplicativo, confira na imagem:





    No próximo passo selecione a linguagem PHP, confira na imagem abaixo:





    Bom, aplicativo criado, agora vamos finalizar a configuração dele para então partirmos para a parte do código implantado no HTML/PHP
    Preencha as informações conforme for solicitado, veja um exemplo na imagem abaixo:





    Parte de criação do aplicativo terminada, vamos agora gerar o código de comentários direto no Facebook, acessem o seguinte link: Social Plugin Comments ([Somente usuários registrados podem vem os links. ]).
    Nessa página vocês verão algo conforme a imagem abaixo mostra e descreve como preencher, com seus dados:





    Após preencher seus dados clique em Get Code e então aparecerá uma imagem como essa a seguir:





    Na parte que diz ESTE SCRIPT USA O ID DO APLICATIVO devem selecionar o aplicativo que criamos nos primeiros passos (o que eu postei é exemplo).
    Após selecionar o aplicativo salvem os dois códigos pois eles serão usados na parte de implementação que começa no próximo bloco do tutorial...


    Terminada a parte de criação do aplicativo, vamos iniciar agora a implantação no site, como eu havia dito no inicio do tópico, vou usar como base para demonstrar o sistema de Templates do MuSite (Daldegam).
    Selecionei aqui o arquivo: readNotice.tpl.php vou dividir em duas informações, a primeira será o arquivo original o segundo será o arquivo já com o código implantado, o que estiver marcado de vermelho no segundo código é o que deve-se alterar para as informações que vocês salvaram conforme pedido no tutorial, e o que estiver em azul não precisa alterar.

    Vamos lá, o código padrão do template que estou usando de exemplo o ja_sanidine_free é o seguinte:

    Código:
    {#INCLUDE:header}
            <div id="ja-containerwrap-fr">
                    <div id="ja-container" class="clearfix">
                            <div id="ja-mainbody" class="clearfix">  
                                    <div id="ja-content">
                        <div id="ja-content-top">
                            <div id="ja-content-bot" class="clearfix">
                                
                                <div id="ja-current-content" class="clearfix"> 
    
    
                                    <div id="notice_read">
                                        {#ResultNotices}
                                    </div>
    
    
                                </div>
                            </div>
                        </div>
                                            <div id="ja-content-top">
                                                    <div id="ja-content-bot" class="clearfix">
                                                            
                                                            <div id="ja-current-content" class="clearfix"> 
    
    
                                                                    <div id="notice_read">
                                                                            <h1>Comentários</h1>
                                        <div id="commentSelectReturn"></div>
                                        <script>
                                            function loadComments() { 
                                                Verify('?page=ajax&require=noticeselectcomments&idNotice=<?=$_GET['id'];?>', 'commentSelectReturn', 'get');
                                            } 
                                            loadComments();
                                        </script>
                                        <div class="quadros">
                                            Deixe seu comentário sobre essa notícia:<br />
                                            <textarea id="comment" style="width: 100%; height: 80px;"></textarea>
                                            <input type="button" value="Postar comentário" class="button" onclick="javascript: Verify('?page=ajax&require=noticecomment&idNotice=<?=$_GET['id'];?>&comment='+encodeURI(document.getElementById('comment').value), 'commentReturn', 'get');" />
                                            <br /><div id="commentReturn"></div>
                                        </div>
                                                                    </div>
                                                            </div>
                                                    </div>
                                            </div>
                                    </div>
                            {#INCLUDE:menuLeft}
                            <br />
                            <div id="ja-tabs" class="clearfix"></div>
                            </div>
                    </div>
            </div>
    {#INCLUDE:footer}
    Abaixo segue o código já alterado com o sistema de comentários do Facebook, lembrando que deve-se alterar apenas o que estiver em vermelho:

    Código:
    {#INCLUDE:header}
        <div id="ja-containerwrap-fr">
            <div id="ja-container" class="clearfix">
                <div id="ja-mainbody" class="clearfix">  
                    <div id="ja-content">
                        <div id="ja-content-top">
                            <div id="ja-content-bot" class="clearfix">
                                
                                <div id="ja-current-content" class="clearfix"> 
    
    
                                    <div id="notice_read">
                                        {#ResultNotices}
                                    </div>
    
    
                                </div>
                            </div>
                        </div>
                        <div id="ja-content-top">
                            <div id="ja-content-bot" class="clearfix">
                                
                                <div id="ja-current-content" class="clearfix"> 
    
    
                                    <div id="notice_read">
    
    
                                    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=485145718191156";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    
    
    <?php
    $server = $_SERVER['SERVER_NAME'];
    $endereco = $_SERVER ['REQUEST_URI'];
    $urlatual = "http://".$server.$endereco;
    ?>
                                        <h1>Comentários</h1>
                                       <!-- <div id="commentSelectReturn"></div>-->
                                    
                                        <div class="quadros">
                                        
                                        <div class="fb-comments" data-href= <?php echo $urlatual;?> data-width="600" data-num-posts="20" data-colorscheme="dark"></div>
                                            <br /><div id="commentReturn"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {#INCLUDE:menuLeft}
                <br />
                <div id="ja-tabs" class="clearfix"></div>
                </div>
            </div>
         </div>
    {#INCLUDE:footer}
    Lembrando que os códigos alteradores, deverão ser modificados pelos dados que vocês obtiveram na seguinte imagem:





    O resultado será mais ou menos o seguinte:







    Qualquer dúvida eu ajudarei no que for possível, peço sinceras desculpas, pois tenho um grande programa para explicar em poucas palavras algo quando estou criando tutoriais em texto, por isso acho que pode ter ficado meio confuso ou grande de mais o tutorial, em todo caso, se possível eu farei um vídeo depois com os passos certinhos direto para melhor entendimento. Mas uma vez peço desculpas se o tutorial ficou muito longo, no mais é isso ...


    Abraços

    Créditos:
    @ Facebook (código base)
    @ Daldegam (MuSite)
    @ BeoWulf (Tutorial e implantação do pequeno código PHP para trabalhar as URL's amigáveis no mesmo site)
    Última edição por BeoWulf; 18-03-2013 às 01:58 PM.
    Allahu Akbar

    الجميع سوف يموت هذا القرف !

    Acesse: Hidden Content

    Servidor Hard de Mu Online

  2. O Seguinte Usuário Agradeceu BeoWulf Por este Post Útil:


  3. #2

    Avatar de StaticX
    Data de Ingresso
    Nov 2009
    Localização
    Rio de Janeiro - SJM
    Idade
    31
    Posts
    380
    Agradecido
    12
    Agradeceu
    11
    Peso da Avaliação
    12

    Padrão

    [Somente usuários registrados podem vem os links. ]
    A imagem referente a parte do Get Code e a penúltima imagem está offline.... No mais parabéns!
    Em breve estarei utilizando, porem, na effectweb.
    Campanha:
    Hidden Content
    #vendeu#um#gs#pra#min#e#sumiu
    #e#acha#que#meu#dinheiro#é#capim?
    #issoaqui#sai#mais#caro#pra#vc#do#que#o#money#que# me#roubou
    #devolvemeudinheiro!

  4. #3

    Avatar de BeoWulf
    Data de Ingresso
    May 2011
    Localização
    Rio de Janeiro
    Idade
    27
    Posts
    389
    Agradecido
    275
    Agradeceu
    144
    Peso da Avaliação
    10

    Padrão

    Devido ao Bug do [IMG] do fórum, as imagens estão fora do ar, vou reupar ainda hoje e faço a adição no tópico.
    Obrigado!
    Allahu Akbar

    الجميع سوف يموت هذا القرف !

    Acesse: Hidden Content

    Servidor Hard de Mu Online

  5. #4

    Avatar de nictwis
    Data de Ingresso
    Jul 2013
    Localização
    Fortaleza
    Idade
    29
    Posts
    1
    Agradecido
    0
    Agradeceu
    0
    Peso da Avaliação
    0

    Padrão

    Citação Postado originalmente por BeoWulf Ver Post
    Devido ao Bug do [IMG] do fórum, as imagens estão fora do ar, vou reupar ainda hoje e faço a adição no tópico.
    Obrigado!
    Bom dia BeoWulf queria ver esse tutorial tem como reupar as imagens... fico no aguardo...
    abraço.

  6. #5

    Avatar de LéozíìnHo.Br
    Data de Ingresso
    Mar 2010
    Localização
    Sao Paulo
    Posts
    135
    Agradecido
    1
    Peso da Avaliação
    9

    Padrão

    Alguém que utiliza poderia re-upar as imagens? grato.

  7. #6

    Avatar de Matheus SC.
    Data de Ingresso
    May 2013
    Localização
    Rio
    Idade
    20
    Posts
    104
    Agradecido
    35
    Agradeceu
    25
    Peso da Avaliação
    6

    Padrão

    Amigo basta pesquisar no Google e vc vai direto no site do facebook


    ()'

 

 

Informações de Tópico

Usuários Navegando neste Tópico

Há 1 usuários navegando neste tópico. (0 registrados e 1 visitantes)

Tópicos Similares

  1. 4º JOGO = Argentina 1 x 0 Nigéria - Copa 2010, Veja comentários sobre o Jogo.
    Por _LenaD_ no fórum Jogos Finalizados - Resultados
    Respostas: 0
    Último Post: 12-06-2010, 02:09 PM
  2. 3º JOGO = Coreia do Sul 2 x 0 Grécia - Veja o comentários e Videos dos Gols.
    Por _LenaD_ no fórum Jogos Finalizados - Resultados
    Respostas: 1
    Último Post: 12-06-2010, 01:04 PM

Marcadores

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •