adicionando plugin do facebook ao portal ojs
TRANSCRIPT
Adicionando sua rede social ao seu portal
Como inserir plugins sociais em sua página usando O.J.S. 2.3.8
Campos dos Goytacazes - RJ, Novembro de 2013.
Faça login como um usuário comum que seja administrador
da página, e acesse:
https://developers.facebook.com/docs/plugins/
Escolha o plugin desejado.
Vamos exemplificar mostrando como inserir o Like Box.
Escolha esse item, preencha os campos necessários e marque as
opções desejadas.
Clique em Get Code, escolha IFRAME ou a opção de sua
preferência.
Copie todo o código da caixa.
Vamos inserir o Like Box abaixo do item “Ajuda do Sistema”,
na barra direita.
Acesse o caminho: ftp://x.x.x.x/plugins/blocks/help/
Copie o arquivo block.tpl, cole em seu computador em duas
pastas diferentes. Uma delas você deixará uma cópia do arquivo
original, pois se algo der errado você pode recorrer a ela.
Na outra você deixará a cópia na qual serão feitas as
alterações. Abra o arquivo com um editor de código-fonte, ou o
editor de texto padrão de seu Sistema Operacional.
Esse é o código-fonte do seu arquivo original:{**
* block.tpl
*
* Copyright (c) 2003-2012 John Willinsky
* Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
*
* Common site sidebar menu -- help pop-up link.
*
* $Id$
*}
<div class="block" id="sidebarHelp">
<a class="blockTitle" href="javascript:openHelp('{if $helpTopicId}{get_help_id|escape key="$helpTopicId" url="true"}{else}{url page="help"}{/if}')">{translate key="navigation.journalHelp"}</a>
</div>
Seu código deve ser adicionado neste local, ao final do código já existente.
Cole o código-fonte fornecido pelo facebook no local indicado no slide anterior e faça as alterações destacadas.
<div class="block" id="sidebarFacebook">
<a class="blockTitle" href="https://www.facebook.com/editoraessentia" target="_TOP">
<span class="blockTitle">Facebook</span></a>
<iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Feditoraessentia&width&height=62&colorscheme=light&show_faces=false&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" id="facebook"
style="border:none; overflow:hidden; height:62px;" Apague esta parte do código. allowTransparency="true"></iframe>
</div>
Salve seu arquivo e cole-o em ftp://x.x.x.x/plugins/blocks/help/
confirmando a substituição de arquivo.
Agora, precisamos inserir em algum arquivo as regras de formatação css ao iframe que criamos.
Copie o arquivo common.css de ftp://x.x.x.x/lib/pkp/styles, cole em seu computador, faça também um backup dele da mesma forma do arquivo anterior, adicione ao final do arquivo:
#facebook{border:none;overflow:hidden;height:80px;width:100%;padding-bottom: 10px;}
Salve, cole na respectiva pasta do ftp, confirmando a substituição.
Os arquivos, seus respectivos diretórios, e as regras de formatação aqui usadas podem variar de acordo com a versão do OJS utilizada.
Modifique as regras css de acordo com suas necessidades, mas verifique se as mesmas funcionam corretamente em navegadores e monitores de tamanhos diferentes.
Ao realizar alterações nos arquivos do sistema, mantenha sempre uma cópia salva em um local seguro, para restauração caso necessária.
Assim como essa modificação, outras também podem ser utilizadas, por exemplo, adicionar conteúdo ao rodapé do portal acessando: ftp://x.x.x.x/templates/common/footer.tpl
Considerações finais
Desenvolvido por:
Leonardo Gomes,
Técnico em Informática Industrial - IF Fluminense
Graduando em Sistemas de Informação – IF Fluminense
Estagiário na Essentia Editora - IF Fluminense
Responsável pelo portal: http://essentiaeditora.iff.edu.br
Contato: [email protected]
“Uma mente que se abre a uma nova idéia jamais volta ao seu tamanho original”.
Albert Einstein