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>
        
música: Satyricon - Fuel For Hatred
sinto-me:
publicado por suskind às 05:32
link | comentar | ver comentários (1) | favorito

.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