Web Dois Ponto Zero: twitter

Mostrar mensagens com a etiqueta twitter. Mostrar todas as mensagens

É verdade!
Agora já pode permitir que os visitantes do seu blogue possam tuitar para o mundo a partir do seu blogue/site, podendo permitir-lhes inclusive o envio de mensagens personalizadas, como por exemplo para feedback sobre os seus artigos/posts/blogue.
E é muito rápido e simples.
Para comprovar, vá até ao fundo da minha barra lateral e experimente.
Também o pode fazer a partir deste post, como já estará, certamente, a ver.
Veja como pode incorporar esta funcionalidade no seu blogue, abaixo, neste mesmo post.

Vamos então ver como se faz.

Passo 1:

Vá até ao site @anywhere, que é propriedade do Twiiter, ele mesmo, e que lhe permitirá criar a aplicação, que acede ao twitter api.

Faça o seu registo e crie a sua aplicação. É muito fácil e rápido.

Passo 2:

Crie, na barra lateral do seu blogue, um widget/aplicação, do tipo html/script e coloque nele o seguinte código:
Nota: tenha o cuidado de colocar a sua API key em vez da minha; para além de alterar o meu twitter username para o seu.

</div>
    <style type="text/css" media="screen">
  
  .anywhere-example {
    border: 1px solid #5082A3 !important;
    padding: 0px 0px 0px 0px;
    width:200px !important;
    margin-left: 0px;
    margin-top: 0px;
  }
  .anywhere-example h4 {
    font-weight: bold;
    background-color: #5082A3;
    color:white;
    width: 200px;
    padding:0;
    margin:0;
    text-align:center;
  }
  h3 { font-weight: bold; font-size:1.1em;}
</style>
<script src="http://platform.twitter.com/anywhere.js?id=jIvIfrLGaODd37NJiqArCQ&amp;v=1" type="text/javascript"></script>
<div id="linkify-this-content" class="anywhere-example">
<div class="anywhere-example">
<center>
<div id="follow-luisj"></div>
</center>
<div class="anywhere-example">
<p>Cuidado: Estas caixas são reais. <br/>Se Tuitar, Tuíta mesmo!</p>
<p><strong>Comunique com o mundo<br/>através do twitter</strong></p>
<div id="default-tweetbox"></div>
<p><strong>Envie-nos uma mensagem<br/> personalizada através<br/> do
Twitter</strong></p>
<div id="custom-tweetbox"></div>
</div>
</div>
<div class="anywhere-example">
<div id="connect-1">
<div id="twitter-connect-placeholder"></div>
<script type="text/javascript">
var anywhereApiKey = "abcdefghi-123";
twttr.anywhere(anywhereApiKey, "1.0.0", onAnywhereLoad);
function onAnywhereLoad(twitter) {
// Simplest use case: Append a connect button to the specified DOM
// element.
twitter("#twitter-connect-placeholder").connectButton();
// Connect buttons have a range of sizes to choose from:
// small, medium, large, xlarge. "medium" is the default size.
// You can specify the size as follows:
twitter("#twitter-connect-placeholder").connectButton({ size: "large" });
};
</script>
<div id="twitter-connect-placeholder"></div>
<script type="text/javascript">
var anywhereApiKey = "abcdefghi-123";
twttr.anywhere(anywhereApiKey, "1.0.0", onAnywhereLoad);
function onAnywhereLoad(twitter) {
# Conditionally display the Connect Button based on current logged in state:
if (twitter.isConnected) {
currentUser = twitter.User.current;
screenName = currentUser.data('screen_name');
profileImage = currentUser.data('profile_image_url');
profileImageTag = "<img src='" + profileImage + "'/>";
$('#twitter-connect-placeholder').innerHTML = "Logged in as " + profileImageTag + " " + screenName;
} else {
twitter("#twitter-connect-placeholder").connectButton();
};
};
</script>
<a href="#" onclick="twttr.anywhere.signOut();">Sign
out of Twitter</a>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
twitter("#linkify-this-content").linkifyUsers();
twitter("#hovercard-example").hovercards();
twitter('#follow-luisj').followButton("luisj");
twitter("#default-tweetbox").tweetBox(
{
      counter: true,
      height: 100,
      width: 180
    });
twitter("#custom-tweetbox").tweetBox(
{ counter: true,
      height: 100,
      width: 180,
label: "O que pensa do nosso Blogue?",
defaultContent: "@luisj "
});
twitter("#twitter-connect-placeholder").connectButton();
twitter.connectButton({
    authComplete: function(loggedInUser) {
     // triggered when auth completed successfully
   },
   signOut: function() {
     // triggered when user logs out
   }
});

});
</script></div>
</div>
</div>

E é tudo.
Boa sorte.