Segunda-feira, 8 de Junho de 2009

SAPO.Widget.ShareThis

A Widget ShareThis permite partilhar via serviços de link, mail ou imprimir para pdf a uma página de um site.

Dependências e código fonte

A widget depende do Prototype e da libsapojs.

Para incluir a widget e as bibliotecas devem colocar as seguintes linhas no head do vosso html

<!--
-->
<script type="text/javascript" src="https://js.sapo.pt/Prototype/1.8/"></script>

<script type="text/javascript" src="https://js.sapo.pt/SAPO/"></script>
<script type="text/javascript" src="https://js.sapo.pt/SAPO/Widget/ShareThis/0.1/"></script>

Utilizar a Widget

A widget tem 4 modos de funcionamento. Sendo que o modo pré-definido é o modo 3.

Os modos são os seguintes:

  • 0 => Mostra apenas os ícones dos serviços
  • 1 => Mostra apenas os nomes dos serviços
  • 2 => Mostra os nomes e os ícones dos serviços
  • 3 => Modo Tooltip

Para verem um exemplo dos modos de utilização e decidirem qual se adequa podem ver a sample

A chamada da widget pode ser feita inline ou para incluir num determinado elemento do DOM

* Widget inline

<!--
-->
<script type="text/javascript">
new SAPO.Widget.ShareThis();
</script>

* Widget para um elemento do DOM

<!--
-->
<script type="text/javascript">
/**
* A chamada é feita no dom:loaded do prototype para o elemento já estar disponivel.
*/
Element.observe(document, 'dom:loaded',function(){   
    new SAPO.Widget.ShareThis({target: 'id_do_elemento'});
});

</script>

Como podem ver do exemplo da chamada da widget para um elemento DOM a widget recebe um objecto de inicialização para definição de algumas propriedades.

Opções

As opções que podem ser passadas à widget são:

  • target - id do elemento DOM que irá conter a widget
  • url - url a partilhar, por default é a url da página em que o site se encontra
  • mode - modo de funcionamento da widget ; valores aceites => 0, 1, 2 ou 3
  • only - array com os serviços que querem mostrar
  • exclude - array com os serviços que querem esconder
  • clickOutClose - Se for true e a widget estiver no modo de tooltip qualquer clique fora da widget fecha-a automaticamente
  • custom_services - Serviços a adicionar à widget
  • pdf_json_url - serviço json que gera o pdf
  • email_url - serviço json que envia o email
  • pdf - Se false esconde o tab pdf
  • email - Se false esconde o tab de envio de email
  • max_retries - Numero de tentativas que os serviços externos realizam
  • pageTitle - titulo da pagina a bookmark/imprimir/enviar, caso não seja preenchido vai buscar o document.title
  • closeTitle - Texto a aparecer no tab de fechar (modo Tooltip)
  • cssURI - url de uma folha de estilos costumizada - default: https://js.sapo.pt/Assets/Images/ShareThis/style.css (Pode ser aproveitada para posterior costumização)
  • language - lingua a usar na widget Share This. Valores aceites ['pt','en'], valor pré definido 'pt'
  • lang_values - valores a substituir o pré-definido da linguagem. São todos opcionais
    • email_name_from
    • email_name_to
    • email_to
    • email_send
    • email_sending
    • email_sending_error
    • email_invalid
    • email_required
    • email_share
    • email_close
    • pdf_download
    • pdf_error
    • closeTitle
    • tooltip_title
    • email_tab_title
    • email_link_text
    • pdf_tab_title
    • pdf_link_text
    • web_tab_title

Exemplos

  1. Modo default (3) - com fecho automatico ao clicar fora
    <!--
    -->
    <script type="text/javascript">
    new SAPO.Widget.ShareThis({clickOutClose: true});
    </script>
        
  2. Modo 0 - definindo um css
    <!--
    -->
    <script type="text/javascript">
    new SAPO.Widget.ShareThis({mode: 0, cssURI: 'https://js.sapo.pt/Assets/Images/ShareThis/style.css'});
    </script>
    
        
  3. Modo 1 - excluindo os serviços stumbleupon e reddit
    <!--
    -->
    <script type="text/javascript">
    new SAPO.Widget.ShareThis({mode: 1, exclude: ['stumbleupon','reddit']});
    </script>
        
  4. Modo 2 - escondendo o tab de pdf e envio de email
    <!--
    -->
    <script type="text/javascript">
    new SAPO.Widget.ShareThis({mode: 2, pdf: false, email: false});
    </script>
        
  5. Modo 3 - definindo o titulo da pagina explicitamente, fechar com clique fora, a ser colocado no elemento dom target e em inglês
    <!--
    -->
    <div id="target"></div>
    
    <script type="text/javascript">
    Element.observe(document, 'dom:loaded',function(){
        new SAPO.Widget.ShareThis({mode:3, pageTitle: 'sapo_test_title', clickOutClose: true, target: 'target', language: 'en'});
    });
    </script>
        
sinto-me:
música: Satyricon - Fuel For Hatred
publicado por suskind às 05:32
link | comentar | favorito
1 comentário:
De sitiocomvistasobreacidade a 13 de Dezembro de 2009
Caros,
Não percebo nada do vosso post sobre os butões share this
Falam do Head HTML, mas nas personalização avançada, vejo um Editor CSS.
Gostava de pôr uma coisa simples, como vejo aqui http://abcdoppm.blogs.sapo.pt/ ou aqui http://jugular.blogs.sapo.pt/
Agradecia bst que me ajudasse. Obrigado
sitiocomvistasobreacidade@hotmail.com

Comentar post

.mais sobre mim

.pesquisar

.Outubro 2010

Dom
Seg
Ter
Qua
Qui
Sex
Sab
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.posts recentes

. Promote JS

. LibSAPO.js - Documentação...

. SAPO.Utility.Date

. SAPO

. LibSAPO.js 2009 -> 2010

. LibSAPO.js no Twitter

. SAPO.Widget.ShareThis

. Mudança para jQuery

. SAPO.Utility.Cookie

. Syntax Highlighter

.arquivos

. Outubro 2010

. Junho 2010

. Janeiro 2010

. Julho 2009

. Junho 2009

. Abril 2009

. Março 2009

. Fevereiro 2009

. Julho 2008

. Junho 2008

.tags

. todas as tags

blogs SAPO

.subscrever feeds

Em destaque no SAPO Blogs
pub