Style the input file with very little code using jQuery

Há bastante tempo que andava à procura de uma forma de costumizar o
input file que como sabemos são impossiveis de estilizar através de
css, pois mudam de browser para browser.


Mas consegui encontrar uma maneira muito simples e com muito pouco
código, aqui vai:

<!--CSS-->
<style>
.file {display:inline; width:250px;}
.contentInputFile {width:82px; height:22px; background: url(images/choose-file.gif) no-repeat right top; display:inline; position:absolute; overflow:hidden;} .contentInputFile input[type=file] {position:relative; height:22px; width:82px; cursor:pointer; opacity:0.0; filter: alpha(opacity=0);}
</style>


<!--SCRIPTS-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/
jQuery/jquery-1.5.2.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
     $('input[type=file]').bind("change", function() {
      filename = $('input[class=file]');
      valueInputFile = $('input[type=file]').val();
      if($.browser.safari || $.browser.chrome){
         valueInputFileSplit = valueInputFile.split('fakepath');
         elValue = valueInputFileSplit[1].substring(1);
         filename.val(elValue);
      }else{
         filename.val(valueInputFile);
      }
     });
  })
</script>

<!--HTML-->
<input class="file">
<div class="contentInputFile">
<input name="upload" type="file">
</div>

Funciona em todos os browsers, tive que verificar o safari e o chrome
porque ele no caminho que punha no input era um "C:\fakepah\....." o
que ficaria mal, assim tiro isso e fica igual ao que aparece no
firefox.

Tab do Facebook com uma imagem que linka para um swf

Modo de implementar uma tab no facebook, em que se tem uma imagem com um link para um swf que correr sempre dentro do facebook.

A primeira div tem a imagem


















A segunda div tem a página com o swf que aparece quando se clica na imagem


















Tanto a imagem como a página com o swf têm que estar online para funcionar.

<div id="iframeLinkDiv">
<a clicktohide="iframeLinkDiv" onclick=&
quot;outside_location.setInnerFBML(link_1);" style="cursor: pointer;">
<img alt="Compal Fresh Sangria" src="http://www.compal.pt/facebook/images/destaque2.jpg" />
</a>

</div>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="520" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://www.compal.pt/facebook/iframebanner2.html"></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>

Facebook Boxes - vão desaparecer, e as Application Tabs terão um formato mais pequeno

As Facebook Boxes, ou caixas laterais em página do facebook, que costumam ser utilizadas para destaque de aplicações, vão deixar de existir.

Em Novembro, foi anunciado pelo Facebook, que a plataforma não vai mais suportar as boxes (caixas) nos perfis e nas páginas, de forma a estimular os developers na utilização de aplicações em tabs.

Adicionalmente, as Application Tabs, em vez de terem uma largura de 740px, vão passar a ter 520px.

How To Turn Your Site Into A Facebook Fan Page

Com a antiga plataforma do facebook existia um botão o "Become a Fan", que se inseria no site do cliente e o utilizador ao clicar ficava logo fan da página de facebook.

No entanto, com a nova plataforma este botão foi removido e substituido pelo botão like. Assim, neste momento o botão like tem duas funções, uma consiste no utilizador dizer que gosta daquele artigo, produto etc..., a outra consiste em ficar fan da página de facebook.

Em relação à primeira função, já disse como se fazia no post anterior. Relativamente, á função do utilizador se tornar fan da página, o processo é o mesmo, vamos á página 'Like Button - Facebook Developers' - e produzimos o botão, a única diferença relativamente ao post anterior é que no url inserimos o link da página do facebook em vez do link do site do cliente.

Exemplo:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww%2Efacebook%2Ecom%2Fportobayfans%3Fref%3Dts&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

Facebook – Like Button

O Botão 'Like' permite ao utilizador partilhar o conteúdo com amigos do facebook. Quando o utilizador clica no botão do site, a informação de que ele gosta daquele conteúdo aparece no perfil do utilizador, a dizer que ele gosta daquele conteúdo.

Para inserir o link no site basta ir á página:

Like Button - Facebook Developers

Escolhe-se o Url do site onde queremos por o botão like, costumizamos o botão e geramos o código.

Depois de gerar o código, aparece uma caixa com o código de uma iframe e o código do XFBML, é preferivel utilizar o código da iframe, porque o outro não funciona bem nalguns browsers.

Exemplo:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fhtml-css-jquery%2Eblogspot%2Ecom%2F&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

Nota: Algo que têm que ter em atenção quando inserimos o link da página e geramos o botão, temos depois que substituir o '.' por %2E, ou seja

Aparece assim: http%3A%2F%2Fhtml-css-jquery.blogspot.com
E temos que por assim: http%3A%2F%2Fhtml-css-jquery%2Eblogspot%2Ecom

senão pode dar erro.

Para mudar a língua do botão basta inserir isto ao link: &locale=de_DE e o botão ficará, neste caso, em alemão. Se esta propriedade não for incluida, o botão ficará com a língua que o browser tiver.

Exemplo:


<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fhtml-css-jquery%2Eblogspot%2Ecom%2F&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21amp;amp;locale=de_DE" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

Facebook - Display Facebook Fan Count in Text

Adicionar a contagem de fans do facebook ao nosso site ou blog pode ser a melhor forma de o promover, pois mostra a quantidade de visitantes que tem no seu site ou blog através do facebook, e faz com que mais pessoas se tornem fans da nossa página de facebook.

Existem 3 passos que são necessários realizar para permitir a contagem de fans do facebook no site ou blog. Esta funcionalidade utiliza uma api key do facebook para mostrar o número de fans.

Step 1 – Ter acesso á API Key do facebook, à Application Secret e ao ID da página.

1.Faça login no facebook, e procure na caixa de pesquisa por ‘Facebook Developer’s Grupo’, depois de entrar click em ‘Criar nova Aplicação’ou "Set Up New Application".

2.Irá aparecer-lhe uma caixa igual a esta. Escreva o nome da aplicação, de acordo com os termos do Facebook e clique em “Criar aplicação” ou “Create Application”. Nota: Estes passos servem para teremos acesso à API Key e á Application Secret.
3.No próximo passo, terá acesso à API Key e à Application Secret. Deve copiar estes dados para um sitio qualquer pois irá precisar deles.

O Page ID é o ID do Facebook Fan Page. Se não tiver uma página no Facebook Fan, terá que criar uma primeiro. Para obter o ID da página Fan, clique em ediar a página e veja qual é o ID, no final do URL - http://www.facebook.com/pages/edit/?id=XXXXXXXXX

Step 2 - Get Facebook.php

Também vai precisar do Facebook API PHP SDK file, que se chama Facebook.php. Pode ir buscá-lo aqui, e inseri-lo num ficheiro e colocá-lo na raiz da sua pasta.

Step 3 – Mostrar o Fancount

Para mostrar a contagem de fans, deverá copiar o seguinte código e inseri-lo num ficheiro php.

<?php
require_once('facebook.php');
$facebook = new Facebook(array(
 'appId'  => 'app_id',
 'secret' => 'secret_key',
'cookie' => true,
));  
$result = $facebook->api(array(
 'method' => 'fql.query',
'query' => 'select fan_count from page where page_id = page_id;'
));  
$fb_fans = $result[0]['fan_count'];
?>

Depois terá que editar alguns dos dados tais como:
- app_id pelo seu Facebook Application ID
- secret_key pelo seu Secret
- page_id pelo seu Facebook Fanpage ID

Para mostrar a contagem de fans, basta inserir esta linha de código em qualquer sitio do site ou blog:

<?php echo $fb_fans; ?>

Facebook – Show Content to Fans – Hide from Non-Fans – FBML

Forma de mostrar um conteudo diferente ás pessoas que são fãs da nossa página de facebook, e aquelas que não são.

Isto permite exigir que um visitante da nossa página se torne fã, pois só assim conseguirá ver o conteúdo escondido. É óptimo para passatempos, pois se o visitante quiser participar terá que se tornar fã.

<fb:fbml version="1.1">
<fb:visible-to-connection>
Fans will see this content.
<fb:else>Non-fans will see this content.</fb:else>
</fb:visible-to-connection>
</fb:fbml>