<h3>✿ Fanbox do facebook com efeito <span>deslizante</span></h3>

Olá amigos, hoje o tutorial deu um trabalhinho mas em fim terminei vamos lá? Fan Box com efeito deslizante, ele fica oculto na página apenas aparecendo uma etiqueta que ao descansar o mouse é revelada a caixinha de curtir. Veja o exemplo abaixo


Página teste (clic)

-----------------------------------------------------------------------
Copie o código a baixo e cole antes de </Head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2 /jquery.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(function (){ jQuery(".slide_likebox").hover(function(){ jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium"); },function(){ jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium"); },500); return false; }); </script>

-------------------------------------------------------------------------------------
Agora Copie o código da caixinha escolhida cole antes de ]]></b:skin>
e salve. Veja os exemplos de etiquetas:
      .slide_likebox { float:right; width:288px; height:345px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5zGGHf5FgLjq4xC0odWjBJGC03xB34R37QeQpS45E6id4QM7NhzT6ju-Prw7bOrvnVWtvJtSIIr_pI9-UKx2w3fcHfHkjx_91AUniK9IDnRba0bv9DQ74nyaEnzmxfBUS5UWROtAm6Fc/s1600/05.png) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-iuW_CSodj1OTrL-UHMYn5St-Syw9l7rziE25eQpt86pYh567dr7xuIVLTqVASMU1hloSX2JekcAZ2qlvKsdVtsy9DwGI0t4lo-lI1PDBIf1uYuUxDxvjPsZHgxi6B1wP_DPs4EKWII/s1600/03.png) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8D05gGTL6J9vJa0o8mvEE71dfEr3l_hyphenhyphenS5jFVdQaEuTJch4CNDURXZJgdUYEFcTVlnLG5P3GnpGqaNNFaxwZNdGgxT_6iAYg09948X5a9U_YNlJogA38LA1367-iQ5pyStL2wV3gXlk8/s1600/02.png) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgon_aDnhOGnmvAICtBDiVExmE0go65kBVD-JuBrXizjjjy9RIYofZWca45WLpg8jxfIgFRbEbktBor77A5bK9ldSovYCKdS9UpZRxLWSNMmuJU_Rg8uFxHNeOxPjeQKTv0JxUrEYgXsZw/s1600/04.png) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Ze9kXrJyEw_DBAT_p6oJON1YCWgQ53LskXj3EOTh2AjP5Hl9HYKY0IiU8D80PDEmyuYMVEY6S5HAS1lVkngS50CGT2bqakXQapMa6qXOLc6UzBuXbayb1i0zB8lES69hT3FCMfUwuvU/s1600/01.png) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvtLL5PTjiOfnaGUd7e3q2X057aoHRTcgcla4KF1ElwyN85f4d0GpNEMoqiy5WoFRkTcQCkAmDWxzarcnmEy0mp_c7dz2yhpY3OSxusmYq4xeaxjM1KqAjlt5iFsLtKyqB80c1-ndN9JE/s1600/face_11.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0v023x9yz_xH234-mCsNYMnEiFQTy4Zz2dvOxclCDXZANYQ40HlRLzXI2ugKgDeYhEMCuoViqRjT1GbJJ_uDqrqKW-sO8N8HHo8xwBKHiXN6JhV3Ajg8xr9Ezd6_p_SCWf-0CWyawaVo/s1600/face_010.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpW8sZKXpwt7ieuh-D8MA3FBn4HEXRStjyHuRyjgMw-BhFg8FEWhCgurSJ-aX5LO6TEWBZADTFZ-ykT7GQ_AWqf5wk5dxeKf8wg13zu09i0HI01h3Jz6JU45zB_YTa1eScf5150r-zeoc/s1600/face_09.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEif25YGaJi9ilZYmeeEVA9DToZg866l9EBJQERKjTOok4GVdmFSDFoRy_KqDP9v_CjPy-ynDw7xb7Ja35sb1cmlJzNfBFO3dxIK9Ur2QRBd_yk1pedAG77YIf6LJgZ5t8uFHrt7T8L6k/s1600/face_08.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKOYy38zM9cI1OcNA35eVPMCb8y5oA3PlCtsaBwExALnpiCQ3DVGY_-3jiGfWbdflSmJW0Gc3uZSFFco-PHdxvuNoIYaoHtSZWcxfC4-Ltg_OzZEz9F36XhXI2I4_fTwryQ3wVXuD6RQE/s1600/face_00.png) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6_pUc7FstYrvXO25Csu2BNanxMulL_TSizpCCoKQ7YBkGjnzjYbL5QaznL6M-_T0DsEW6lDFbUaXCm8OJBQ0tM2Pzmk-8iVB-n7_Y2GNRP743frCwfn0_ClE3bpQHXzd38VrZ9vgRnA/s1600/face_20.png) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEichyphenhyphenv6iLXrNm-KQg0jW5ND1bHKvSO0nv0EkcCpLIVjA783TuKxDBuw4nPzm6rZAfxDTRQ50HdBjErGx2zmID-KNjr86fLhGQYWMcyoSjx7sCUemYjMUIuMku3YZdZrprXqceQe8AuxOrg/s1600/face_117.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhCsMdLPggcqVLCkcNu91q9XixRJ2HCZL74x0j1OVo1d6VzgHoq5Ro76JiGXvN3GISkGsuSjgAnRZZB6JabUPk8hF9cApZ7Hrbd4XM2Jjka8Hu_ECPpbdBeNaZBBVORId30vaR-hSr4xk/s1600/face_27.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9nwu7vzq-w19VhKHsFDNJmJgZCmUq5zodBIcH2Ls6S-06BLj2eKg3ne5cXS4Btkaatv4jJdjyUKjaa28D7TU3DLHyxBWosppPk3hgJOFCMHt03GCIHuRf4pM8Aq7aG2tZZNl86nVa7g4/s1600/face_02.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_CMX-FUwpm7zazvSFDifGw4AowtQHlb6ZBZWwZTjYkNc45g77YwfF5npKjj4yfdRFb5e9DJ54POQO-bKtjkMnYl83gzKFsYMAN_51e3F_HDmfjGDWdO8VoFXY_LKgm1zOzb6k969iH_E/s1600/face_16.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwoR5ygMo3G3A6Z397NsViooCRt0X0Iettc6SvTFrFWdFgjoUQWeOd_IOO4K0rZzKXEpzhQ_pKtaRGPBm8EhijFqG7YTp_2ChFc4Q35LXn4KCCY3aSl8VZwbAiI10I0tHK70yCqMs0aTE/s1600/face_015.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEWeivawzaDFmTNSeoUra8ZaSDc4uNhmVYbkpl2aSbNQTFyJ0nID0df24D5aG_G66R_j63_C33Xq0vRYWbxiXoy30IP4cb-OMtfnahTDh7PYEuDHBN1FqPi8ENJnlu9EvJwQls002TeM/s1600/face_014.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6FH4hAFCNkVAh-dQqIh4FiDEMsZ213xf4Qsi_pXMnkg1DicGMVMOxKx_LfuGV1hKbzyW_288ikQQkwPhJx_Q2ad2tcmCePKdsajA7NNtchqA0k8sYVyTrvMS-1hNXw2pQOixVgHfA_U4/s1600/face_07.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDa7OhcSW0LthyphenhyphenwNlXWY5yPe9i9CFJfn6FzlNGEA96fhj8_r7SDZ2sIuiA8nrNFJSMUvaVZ_p1g_3W5FQ_glJjoZZ3NYifur0KxXzCZxQonFrG-WZo_fO2ZHvuiL8zd8waU3K-Vkg5ASA/s1600/face_23.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV9-bu1EG1Epo7YYSwSeOOazkDc5QMCOn7Pzs4W_yRIipjc9-zsP5dN4bhCT0araPIpR5__ttfHknGgz7zaAAzOm7kZziVNJJfCswrSUMFNLjHJ6QAzSdmNrxgHXfuXktPJoRtbPegRGo/s1600/face_21.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNK2jXQvJUpiVN3CcxfQMdjRvIPIInV0fNB2VK3jCqOF0RQGDPmq3NE6udPA0_YKqwQGw75hNY4P6JntEmFA1daveewe2pQFWg3wgBNgSaIZQ7l8_wY5b2-fDxCsaOm2aiqjp1B6ErcE/s1600/face_013.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdiDAY2JDLIGezkOzjKY32sQu73m33vzBKeb7e-UYxjXQuR9gVnj4viO_tAQN7vVSbdrpWImA0OSeiu6VsOKGD4WbLwDRwZsqTkqVuaE9foTOQwFas1_pcV4cLqzDs0uzsBgskcdDuhh4/s1600/face_12.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}

      .slide_likebox { float:right; width:288px; height:345px; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjswCWkB-Rb1oY1xX_9mEM77Mo1t6gZ-YGDF4U2ya7lESGJaVOlZRrWMXe7yLIzUD-K5toe-AQI_Zli07EC0kvKr8pGKCKtd-WGIY_x2Daomt4aP9cl9zzyPsSoiYp4_Mmm0c2UuMnmkbE/s1600/face_019.PNG) no-repeat !important; display:block; right:-250px; padding:0; position:fixed; top: 130px; z-index:1002; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap { margin-top:2px; margin-left:-5px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } div.likeboxwrap iframe {margin:-1px}


-------------------------------------------------------------------------------------
Copie o código abaixo cole em HTML/Java Script e salve.

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"> <span> <div class='likeboxwrap'> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNOME DA FAN PAGE NO FACEBOOK&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:320px;" allowtransparency="true"> </iframe></div></span></div></div>

Adicione o nome da sua Fan page no Facebook
(escreva com letra minuscula)

Escreva no código acima apenas o nome da Página, veja a marcação em azul abaixo. Não coloque espaços e nem o endereço, apenas adicione o nome da página.

-----------------------------------------------------------------------------------------

Segundo o Facebook, uma Fan Page é uma interface específica para a divulgação de uma empresa, marca, banda, etc.

Não conseguiu usar? Clic aqui WWW

Esses Backgrounds usados no código foram criados por mim se usar por favor de os créditos é proibido reblogar.