1. 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.

2. 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.

4. Clique em Get Code, escolha IFRAME ou a opção de sua
preferência.
Copie todo o código da caixa.

5. 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.

6. 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.

7. 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&amp;width&amp;height=62&amp;
colorscheme=light&amp;show_faces=false&amp;header=false&amp;
stream=false&amp;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>

8. 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.

9. Considerações finais
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

10. 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: leonardo.delfica@gmail.com
“Uma mente que se abre a uma nova idéia jamais
volta ao seu tamanho original”.
Albert Einstein