Siga-nos no Google+

É proibida a reprodução total ou parcial dos artigos do Limon Tec sem a devida citação da fonte.

10 dezembro 2012

Tutorial - como criar uma Rede Social igual ao Facebook

Aprenda a criar sua rede social - imagem retirada do site br.buddypress.org
Antes de tudo quero dizer que não tente criar uma rede social usando recursos free, um membro da nossa equipe já tentou essa façanha mas só deu problema quando a rede já estava pronta, pois a hospedagem grátis por exemplo não suporta nem os plugins do WordPress então imagina 10 usuários registrado na sua rede social, a página do site deve nem abrir.

Se você tem dinheiro para pagar uma hospedagem vamos ao tutorial, mas antes de tudo não esqueça de configurar um domínio aonde você irá hospedar seu site seja ele .com .net .com.br ou outro.
1-Baixe o pacote do WordPress

Download WordPress - imagem retirada do site www.escolawp.com

Acesse o site da versão Português do Wordpress (clique aqui para Português do Brasil ou aqui para Português de Portugal) e faça download do arquivo clicando em "Faça o download do WordPress..." como mostra a imagem acima.

Depois de baixar, você terá na sua pasta de downloads ou em outro lugar um arquivo .zip com todos os ficheiros de instalação do WordPress, então descompacte-o para uma pasta em seu Desktop (área de trabalho).

2-Crie um Banco de Dados
Para criar um Banco de Dados é necessário que você acesse o Cpanel da sua conta de hospedagem(em outras palavras, painel de controle do seu site no servidor). Normalmente está disponível em www.seu-site.com/cpanel mas caso não consiga localizar seu Cpanel, entre no site da hospedagem que você contratou e procure lá a àrea de Cpanel, depois faça login com os dados de acesso providenciados pela empresa onde você contratou a hospedagem.
Banco de Dados - imagem retirada do site www.escolawp.com
Ao acessar o Cpanel, você terá de clicar na seção “Databases” no ícone que diz MySQL Databases, como mostra a imagem acima.
criar banco dados - imagem retirada do site www.escolawp.com
No passo seguinte, você precisa começar a criar o seu banco de dados. Ele vai o usar o prefixo definido por padrão, então você terá apenas de dar um nome para o banco de dados, que poderá ser aquilo que você bem desejar. Depois de escrever o nome do banco, clique em “Create Database”, como mostra a imagem acima.
banco criado  - imagem retirada do site www.escolawp.com
Para verificar que o banco de dados foi criado corretamente, você deverá ver uma linha abaixo na seção “Current Databases” onde aparece os bancos de dados criados, qual o tamanho desse banco de dados, e ainda a possibilidade de eliminar um determinado banco de dados criado, como mostra a seta vermelha na imagem acima.
Depois disso anote o nome do banco de dados que você criou (no caso da imagem acima o nome do banco de dados é "wwwmudi_blog"), anote no bloco de notas do seu computador por exemplo.
criar usário - imagem retirada do site www.escolawp.com
No passo seguinte, você precisa criar um usuário, que mais tarde iremos associar ao banco de dados. Repete-se o processo acima indicado, onde você pode escrever aquilo que bem desejar como o nome do usuário. Defina uma senha para o usuário, usando o gerador de palavras-chave que está disponível. Dessa forma você poderá criar uma senha muito forte. Depois de concluído, clique em “Create User”.
Não esqueça de anotar também o nome e a senha do banco de dados que você criou (no caso da imagem acima o username do banco de dados é "wwwmudi_user1"), anote no bloco de notas do seu computador por exemplo.
adicionar usuário banco - imagem retirada do site www.escolawp.com
Por fim, precisamos associar o nosso usuário ao banco de dados criado, para que ele possa editar, eliminar, criar, etc. Escolha no menu o usuário e o banco de dados criado, e clique em “Add” para adicionar os privilégios de ambos.
privilégios - imagem retirada do site www.escolawp.com
Por fim, precisamos apenas definir ao usuário todos os privilégios no banco de dados. Selecione a opção “All Privileges” e clique em “Make Changes” para efetuar as alterações. Dessa forma seu banco de dados fica perfeitamente criado e associado ao usuário, e poderemos partir para o passo seguinte.
3-Conectar-se ao servidor de hospedagem
Para você se ligar ao seu servidor de hospedagem, para carregar o WordPress, você vai precisar de usar um cliente de FTP. Aquele que recomendamos tanto para usuários de Mac OSX como de Windows, é o aplicativo FileZilla. Faça download do programa clicando aqui, depois instale e abra o FileZilla para iniciarmos o processo de ligação ao seu servidor de hospedagem.
ligação rápida - imagem retirada do site www.escolawp.com
No topo do software FileZilla, você pode colocar os dados de login, que será sempre ftp.seu-site.com, o nome de usuário e palavra-chave fornecidos pelo seu serviço de hospedagem, e clicar em “Ligação Rápida” para acessar de imediato o seu servidor.
public html - imagem retirada do site www.escolawp.com
Ao entrar no seu servidor, você irá ver uma lista de ficheiros idêntica a imagem acima. Você terá de abrir a pasta “public_html” que é a seção pública do seu servidor, onde será instalado o WordPress.
4-Configurando o WordPress
Agora você deverá enviar para seu servidor o arquivo do WordPress que havia baixado. Primeiro precisamos abrir a pasta WordPress que baixámos e descompactámos do site oficial do WordPress.
ficheiro - imagem retirada do site www.escolawp.com
Ao abrirmos a pasta, vamos procurar o ficheiro “wp-config-sample.php” e alterar o seu nome para “wp-config.php”. É obrigatório alterar o nome do ficheiro!
Depois disso, vamos precisar de o abrir e editar. Para editarmos esse ficheiro, vamos precisar de um software de leitura de código PHP. Para quem tem Mac OSX utilize o aplicativo Sublime Text 2 e quem utiliza Windows pode usar o aplicativos aplicativo Notepad++. Instale o software, e abra o ficheiro “wp-config.php” usando esse mesmo software.
editando arquivo - imagem retirada do site www.escolawp.com
Entre as linhas 19 e 25 do código desse ficheiro, vamos precisar colocar as informações do banco de dados que guardamos no passo Nº2, colocaremos o nome do banco de dados, nome do usuário do banco de dados e password do usuário do banco de dados.
Preencha os campos com todas as informações que usamos no passo Nº2 (coloque os dados entre as 'aspas') e guarde o ficheiro exatamente com o mesmo nome e terminação, neste caso “wp-config.php”.
5-Enviar o WordPress para o servidor
Depois de termos editado com sucesso o ficheiro de configuração do WordPress, vamos precisar enviar todos os ficheiros do WordPress para dentro da pasta “public_html” do nosso servidor de hospedagem.
selecionar ficheiros - imagem retirada do site www.escolawp.com
Abra a pasta WordPress que contém todos os ficheiros do WordPress, incluindo o ficheiro “wp-config.php” que estivemos a trabalhar no passo anterior, selecione todos ficheiros e pastas presentes aí dentro como mostra a imagem acima, e arraste esses ficheiros para dentro da pasta “public_html” do seu servidor de hospedagem. Pode abrir a pasta “public_html” antes de arrastar os ficheiros, para ter a certeza de que os coloca no local certo.
processamento - imagem retirada do site www.escolawp.com
No rodapé do seu cliente de FTP FileZilla irá aparecer o estado de processamento de envio dos ficheiros para o servidor como mostra a imagem acima. Dependendo da velocidade de conexão da sua internet, este processo pode levar alguns minutos até carregar todos ficheiros para o seu servidor de hospedagem. Verifique se todos os ficheiros foram transferidos com sucesso, e em caso de falha em alguns ficheiros, envie isoladamente esses ficheiros novamente.
resultado final - imagem retirada do site www.escolawp.com
Depois de ter enviado todos ficheiros para dentro da pasta “public_html” do seu servidor de hospedagem com sucesso, o resultado final será igual a esse que demonstra a imagem em cima.
6-Instalar o WordPress
Para correr o instalador do WordPress, digite o endereço do seu blog www.seu-blog.com no browser para iniciar o processo de instalação do WordPress.
instalador - imagem retirada do site www.escolawp.com
Irá aparecer-lhe uma página exatamente idêntica a esta imagem acima, onde você deverá dar um título ao seu blog, definir um nome de usuário para acesso ao blog, uma senha, indicar seu endereço de email, e ainda definir se pretende que os buscadores indexem de imediato os conteúdos do seu blog ou não. É recomendável que desative esta opção até ter conteúdos criados por si no blog, por fim a evitar que sejam indexadas páginas de teste.
Depois de configurar todos os campos, clique em “Instalar WordPress”.
sucesso - imagem retirada do site www.escolawp.com
Se a sua instalação tiver corrido sem qualquer tipo de problemas, você será presentado com uma mensagem “Sucesso” como a imagem acima e poderá efetuar o login no seu WordPress, usando os dados de usuário e senha definidos no instalador.
painel wordpress - imagem retirada do site www.escolawp.com
Ao efetuar login, você será novamente presenteado com uma mensagem de Boas-Vindas ao seu novo site WordPress como a imagem acima, indicando que toda a sua instalação correu com sucesso, e a partir deste momento o seu site está online e pronto a ser preenchido com conteúdos.
site online - imagem retirada do site www.escolawp.com
Se acessar o endereço do blog, irá ver também que ele já se encontra online como a imagem acima, pronto a ser estilizado, configurado e a receber os seus primeiros conteúdos. A sua instalação foi bem sucedida, rápida e sem problemas.
Agora que seu WordPress já está instalado, vamos ensinar a configurá-lo como uma rede social!
Para quem não sabe, o BuddyPress é um conjunto de plugins e templates WordPress que lhe permite criar em poucos minutos uma rede social com o WordPress. Sua rede social terá:
Mural: global, pessoal e grupos de atividades com comentários em formato de árvore, postagem direta, possibilidade de favoritar e utilizar @citações. Todos estes streams utilizam RSS feeds e notificações por email.
Perfis Completos: campos de perfil totalmente editáveis permitem-lhe definir quais os campos obrigatórios para os seus usuários preencherem.
Conexões com Amigos: permita aos seus usuários efetuarem conexões e amizades com outros usuários de forma a que possam manter-se em contato com as atividades de outros membros, ou filtrarem apenas os usuários de que mais gostam.
Mensagens Privadas: as mensagens privadas permitem aos seus usuários falarem diretamente uns com os outros, de forma privada. Os usuários podem ainda enviar mensagens para várias pessoas em simultâneo e manter conversações totalmente em privado.
Blogagem: comece um blog integrado diretamente na sua rede social. Os seus usuários podem inclusive criar blogs a partir de sub-domínios da sua rede social. Mantenha um controlo sobre as postagens e comentários publicados.
Grupos Extensíveis: grupos públicos, privados ou escondidos permitem aos seus usuários manter os tópicos e assuntos de debate organizados.
Fórums de Discussão: os fórums de discussão integrados dentro dos grupos permitem aos seus usuários manterem as conversações organizadas e devidamente estruturadas.
E não acaba por aqui, o BuddyPress juntamente com o WordPress oferecem uma grande variedades de plugins que podem ser utilizado para diversas finalidades, como por exemplo bate-papo, botões de "curtir", galerias de imagens, restringir nome de usuários etc.
1-Instalando o BuddyPress
Vou encinar a instalar via FTP, pois é mais certeza que a instalação será bem sucedida.
Primeiro baixe o Plugin BuddyPress no site do BuddyPress, clique aqui. E em seguida, usando o FileZilla faça upload para sua pasta de plugins do WordPress os arquivos do BuddyPress. Após o upload, no seu painel de administração vá para Plug-ins > All e Ativar o plugin, como mostra a imagem abaixo.
budypress - imagem retirada do site querocriarumblog.com.br
A próxima coisa a fazer é ativar o template disponível, portanto, vá no menu “Aparência” > “Templates” e ative o template padrão do BuddyPress, como mostra a imagem abaixo.
BuddyPress - imagem retirada do site www.escolawp.com
2-Configurando o BuddyPress
Depois de ativar o plugin e o template, você irá ver uma nova opção no menu do seu WordPress, chamada “BuddyPress”. Essa nova secção tem 4 opções dentro dela: General Settings, Component Setup, Forums Setup e ainda o Profile Field Setup. Vejamos então como configurar cada uma delas corretamente.
2.1-OPÇÕES GERAIS (GENERAL SETTINGS)
Esta é a secção onde você pode configurar as opções gerais da sua nova rede social, e verdade seja dita, você não precisa editar nada. Se deixar todos os valores padrão sua rede social ficará funcionando bem.
BuddyPress - imagem retirada do site www.escolawp.com
Confira abaixo a função de cada opção:
*Base profile group name: Esta opção está escondida no visual da rede social, portanto, pode deixar como está.
*Full Name field name: Este é o nome do campo de Nome do usuário.
*Disable BuddyPress to WordPress profile syncing?: Escolha a opção “não”, e a sua rede social do BuddyPress irá ficar devidamente sincronizada com os registros do seu WordPress.
*Hide admin bar for logged out users?: Escolha a opção “sim”, uma vez que a barra de administração dos usuários não deve aparecer para os convidados e usuários que ainda não pertencem à sua rede social.
*Disable avatar uploads? (Gravatars will still work): Escolha a opção “não” caso deseje utilizar apenas os gravatars e não permitir a seus usuários carregarem seus próprios avatars.
*Disable user account deletion?: Permite aos usuários eliminarem a sua conta de utilizador.
*Disable global forum directory?: Permite-lhe mostrar um diretório de fórums no seu site.
*Disable activity stream commenting on blog and forum posts?: Permite aos seus usuários comentarem nos fórums e blogs diretamente a partir da atividade do seu mural.
*Default User Avatar: Escolha qual o estilo de gravatars padrão que pretende para a sua rede social.
2.2-CONFIGURAÇÃO DE ELEMENTOS (COMPONENT SETUP)
A próxima secção é a “Component Setup”, e é basicamente o local onde você pode escolher mais as partes do BuddyPress que pretende utilizar no seu novo site.
BuddyPress - imagem retirada do site www.escolawp.com
Confira abaixo a função de cada opção:
*Activity Streams: Permite aos seus usuários atualizarem as suas atividades a partir de qualquer local do site.
*bbPress Forums: Ativa o suporte a fórums do bbPress dentro dos grupos do seu BuddyPress.
*Friends: Permite que seus usuários façam conexões de amizade entre si.
*Groups: Permite aos seus usuários criarem, juntarem-se e participarem de grupos.
*Private Messaging: Permite aos usuários enviarem mensagens privadas uns aos outros.
*Extended Profiles: Activa os perfis customizados e avatars no site.
2.3-CONFIGURAÇÃO DOS FÓRUMS (FORUM SETUP)
Se ativou a opção de fórums de discussão no quadro anterior, então terá de voltar a ativar no seguinte quadro. Clique em “Setup a new bbPress Installation”. Dependendo do tipo de permissões em seus ficheiros, você irá ver como a imagem abaixo:
BuddyPress - imagem retirada do site www.escolawp.com
Se vir esta imagem, então copie e cole todo o código que aparece na sua frente num novo ficheiro, e guarde-o com o nome bb-config.php (utilize os programa citados no passo 4 da instalação do WordPress), e depois carregue-o para a raíz do seu servidor do WordPress através do seu FTP. Depois disso, seus fórums estarão instalados e prontos a usar.

2.4-CONFIGURAÇÃO DO PERFIL (PROFILE FIELD SETUP)
Esta secção será única para todo o seu site, dependendo de qual o nicho de mercado onde você vai criar a sua rede social ou que tipo de usuários você pretende atrair. Esta opção permite-lhe configurar vários campos personalizados para os perfis de membros dos seus usuários. Por exemplo, se a sua rede social for igual ao Facebook você pode introduzir campos personalizados (custom fields) para: Cidade onde mora, Sobre, Site, data de aniversário, Emprego, E-mail, perfil do twitter etc.
BuddyPress - imagem retirada do site www.escolawp.com
Clique em “Add New Field” e iremos configurar um campo personalizado de perfil. Para este tutorial, iremos introduzir um campo para o perfil no Linkedin, mas você pode criar para o Twitter, Facebook etc. Introduza um título para este campo e uma pequena descrição. Depois escolha se este deverá ser um campo obrigatório ou não e depois escolha qual o formato que o campo deverá ter. Neste caso específico escolhemos uma “text box” uma vez que o usuário irá colocar apenas o endereço URL do seu perfil no Linkedin. Irá ficar como a imagem abaixo:
BuddyPress - imagem retirada do site www.escolawp.com
Repita este processo as vezes que desejar para a quantidade de campos personalizados que desejar ter na sua nova rede social.

Agora que você já aprendeu o básico, comece a "fuçar" as funções do seu BuddyPress e WordPress, vou deixar uns link que podem ser uteis na hora da personalização de sua rede social.
*Plugins para BuddyPress, clique aqui para abrir.
*Temas para sua rede social, clique aqui para abrir.
Observe esse belo exemplo de tema para sua rede social se parecer com o Facebook:
Fishbook tema - imagem retirada do site  wordpress.org
Pronto esse foi o tutorial, qualquer problema comente abaixo que responderemos o mais breve possível. Lembre-se que antes de comentar procure no Google seu problema.

Fontes: escolawp.com & querocriarumblog.com.br

Sua opinião:
O sistema de comentários do Facebook está apresentando problemas, se por acaso nossa equipe não lhe responder em no máximo uma semana, entre em contato por e-mail ou nossos perfis sociais.
Related Posts Plugin for WordPress, Blogger...
Comentar com sua conta do Google+
Comentar com sua conta do Blogger

0 comentários:

Postar um comentário

Comente, discuta e aprenda, mantenha os comentários construtivos! Comentários ofensivos serão apagados.