Mar 22 2011

Facebook Like Box no BlogEngine.Net

Category: asp.net | BlogEngine | C# | widgetSuzuki @ 07:20

Como inserir o Like Box no BlogEngine.Net como um widget.
Se você usa o BlogEngine.Net e tem uma pagina no Facebook referente ao seu blog e deseja adicionar no blog para que as pessoas possam curtir/recomendar, este é a postagem que pode lhe ajudar. Irei exemplicar com a página do Ninja Code.
A página do Ninja Code no Facebook: http://www.facebook.com/#!/pages/Ninja-Code/196138507076320. Repare que existe um botão Add like box.

LikeBox_1

Assim que clicar-mos no botão, irá abrir uma página para nos auxíliar no desenvolvimento, assim:

LikeBox_2

Se não quiser clicar no botão, assim que estiver logado no Facebook acesse a url: http://developers.facebook.com/docs/reference/plugins/like-box/.
Agora estamos prontos para configurar o like box do facebook, para criar-mos o nosso widget, no campo Facebook Page URL eu inseri a url de minha pagina no Facebook (http://www.facebook.com/#!/pages/Ninja-Code/196138507076320), desmarquei a opção Show stream, a configuração ficou assim:

LikeBox_3

Agora, clique em Get Code e você terá a seguinte janela:

LikeBox_4

Copie o código iframe e reserve, para utilizar posteriormente. Já tivemos a ajuda do Facebook, agora vamos para o Visual Studio, no projeto do BlogEngine.Net.
Lembre-se, se você estiver abrindo os arquivos diretamente da pasta C:\inetpub\wwwroot\, execute o Visual Studio como administrador para que você tenha as permissões necessárias(alterar, incluir, deletar arquivos).
Na pasta widgets, inclua uma nova pasta com o nome Facebook Like Box, veja a imagem:

LikeBox_5

Na pasta Facebook Like Box, vamos adicionar um Web User Control com o nome widget.ascx:

LikeBox_6

Lembra daquele código que você reservou? Que o Facebook forneceu, cole no source do widget. O código fornecido pelo Facebook, gerou uma altura muito pequena, então alterei para 280px, portanto fique atento na string fornecida, pois há duas propriedades height. No meu caso ficou assim:

  1. <%@ Control Language="C#" AutoEventWireup="true" CodeFile="widget.ascx.cs" Inherits="widgets_Facebook_Like_Box_widget" %>  
  2. <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FNinja-Code%2F196138507076320&amp;   
  3. width=276&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=280" scrolling="no" frameborder="0"    
  4. style="border:none; overflow:hidden; width:276px; height:280px;" allowTransparency="true"></iframe>  

Acesse o code (widget.ascx.cs), seja clicando com o botão direito e clicando em View Code ou pela Solution Explorer e altere o código para que fique assim:

  1. using System;   
  2.   
  3. public partial class widgets_Facebook_Like_Box_widget : WidgetBase   
  4. {   
  5.     protected void Page_Load(object sender, EventArgs e)   
  6.     {   
  7.     }   
  8.   
  9.     public override string Name   
  10.     {   
  11.         get { return "Facebook Like Box"; }   
  12.     }   
  13.   
  14.     public override bool IsEditable   
  15.     {   
  16.         get { return false; }   
  17.     }   
  18.   
  19.     public override void LoadWidget()   
  20.     {   
  21.     }   
  22. }  

Ponto! O widget ja pode ser utilizado. Basta entrar no BlogEngine e adiciona-lo, o nome no ComboBox será Facebook Like Box.
Você pode alterar as propriedades(na string iframe) de acordo com o que quiser, para que melhor se ajuste ao seu tema/layout.
Caso você queira fazer o download deste widget -> Facebook Like Box.zip (967,00 bytes)

Para que você crie seu proprio widget de sua page do Facebook, não é necessário ter o Visual Studio instalado. Basta gerar o code no Facebook, usar o arquivo que disponibilizei pra download inserir a pasta Facebook Like Box na sua pasta de widgets e editar via texto mesmo o arquivo widget.ascx e substituir toda tag <iframe>  até </iframe>.

Este widget foi criado para demonstrar como construir o seu próprio widget para o Blogengine.Net.
Espero que tenha ajudado.
Lembre-se, se você curte as postagens, não esqueça de clicar no nosso widget para nos recomendar no Facebook.

Até a próxima.

Obs: Se você deseja obter um widget mais completo acesse este link: Facebook Like Box Widget para BlogEngine.Net

 

Pedi, e dar-se-vos-á; buscai, e encontrareis; batei, e abrir-se-vos-á. (Mateus 7:7)

Tags: , , , , , , , , , , , ,

Comments

1.
trackback DotNetKicks.com says:

Facebook Like Box no BlogEngine.Net

You've been kicked (a good thing) - Trackback from DotNetKicks.com

2.
pingback thiagosatoshisuzuki.wordpress.com says:

Pingback from thiagosatoshisuzuki.wordpress.com

Facebook Like Box no BlogEngine.Net « Thiago Satoshi Suzuki

3.
André @ CODIX André @ CODIX Brazil says:

Bom post! Bem explicado!
Abraços

4.
Suzuki Suzuki Brazil says:

Obrigado pelo comment André.
Abs

5.
trackback RTur.net says:

Facebook Page Like Widget

Facebook Page Like Widget

6.
pingback onlinewebanswers.org says:

Pingback from onlinewebanswers.org

Apps Facebook Gardens Time Pages | Online Web Answers

7.
marbre marbre France says:

Great post Suzuki, thanks for all infos.

8.
jack jack United States says:

obrigado, gracia!

9.
Lais masters Lais masters Brazil says:

Perfect, estava procurando como fazer isso!! Obrigado!

10.
trackback RTur.net says:

Facebook Page Like Widget

Facebook Page Like Widget

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading