How to add a Facebook Likebox in a wordpress.com blog – part 2 (c) Netty Gritty

Posted on January 20, 2011 by Netty Gritty

Finally here is how you can have a Facebook Likebox right in your wordpress.com blog.

Note: This post assumes that you have already created a Facebook page.

Go to Facebook’s Social plug-ins page and create your Facebook Likebox.

http://developers.facebook.com/docs/reference/plugins/like-box

When you are satisfied with the way your Likebox looks, right-click somewhere inside the Facebook Likebox you see on the right and choose “open the frame in a new tab”.

Go to that new tab. You will see your Facebook Likebox there.
* To know what I am talking about, view My Facebook Likebox

Leave the tab that has your Facebook Likebox open.

Note: This solution does not show the Facebook Likebox by default. But if you click a text link, the Facebook Likebox it links to will open right in your blog!

This blog does not have a Facebook fan page, so I am using the Facebook Likebox of a different Facebook page to show how it looks.

Wanna learn how to create a Facebook Likebox like that in your free wordpress.com blog?
Then please read the following post:
How to embed iframe widgets in a wordpress.com blog

Find more posts on: Facebook, code, sharing, social bookmarking, Facebook Like, Fcaebook Share

42 thoughts on “How to add a Facebook Likebox in a wordpress.com blog – part 2 (c) Netty Gritty”

hsvideomodels on January 21, 2011 at 9:38 pm said:

the shortcode is not working in side bar text widget. why? pls help
- Netty Gritty on January 21, 2011 at 9:56 pm said:
  
  Have you tested if it works in a post? This shortcode will work in a side bar. Mine is working perfectly. Look for the very last widget, it says “follow”.
  
  If it is working in a post, let me know.
  - hsvideomodels on January 22, 2011 at 2:05 am said:
    
    Ok i tried to add the shortcode in my post and nothing showed up, heres is my facebook likebox link http://tinyurl.com/6gcf3n5 pls assist me generate the code just like yours with the Like sign
  - Netty Gritty on January 22, 2011 at 2:13 am said:
    
    Please clarify which part of the tutorial you did not understand or could not achieve. I cannot configure it for you because I do not know the username and password of your Tagul account, without which I am lost. Besides, I don’t have the time to do the total thing for users. Sorry…
hsvideomodels on January 22, 2011 at 4:17 am said:

The tagul part..I’ve succeeded in creating my tagul account. I did all you said fetch tags then build cloud after getting the flashcode i tried converting it to shortcode using the vodpod.com/wordpress thing when insert tagul flashcode into the codebox and preview nothing shows same goes with when i put it on post.
Netty Gritty on January 22, 2011 at 10:35 am said:

I really want you to be able to do this on your own. You are in almost in the final stage. Bravo!!

Instead of using vodpod, use the gigya method to modify the Tagul code.

If you have problem understanding the gigya method, paste the code here:
http://textsnip.com/

and give me your textsnip url. I will change the Flash code for you if you can’t after trying.

* by the way, I have hidden your comment that has your Tagul account info.
hsvideomodels on January 23, 2011 at 5:29 pm said:

I think Its working now. Will let you know if I encounter more problems. Thank you
- Netty Gritty on January 24, 2011 at 9:57 am said:
  
  gigya id=”preziEmbed_edkkbotsl9pb” name=”preziEmbed_edkkbotsl9pb” src=”http://prezi.com/bin/preziloader.swf” type=”application/x-shockwave-flash” allowfullscreen=”true” allowscriptaccess=”always” width=”550″ height=”400″ bgcolor=”#ffffff” flashvars=”prezi_id=edkkbotsl9pb&lock_to_path=0&color=ffffff&autoplay=no&autohide_ctrls=0″
  
  Just put the code above in [] and your Prezi will appear in your wordpress.com blog.
  
  [gigya id="preziEmbed_edkkbotsl9pb" name="preziEmbed_edkkbotsl9pb" src="http://prezi.com/bin/preziloader.swf" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="550" height="400" bgcolor="#ffffff" flashvars="prezi_id=edkkbotsl9pb&lock_to_path=0&color=ffffff&autoplay=no&autohide_ctrls=0"]
  
  If the customizations are not right in this example, customize the code in Prezi, copy and paste in textsnip and give me the Textsnip url. I will convert it to a wp.com-compatible code.
punkytriumph on March 8, 2011 at 8:27 am said:

I can follow your step by step, but when I get to modify flash code in gigya, you’ve lost me. There must be an easier way to do this. Also when we are pasting it is the cloud category box or text box on WordPress?
Netty Gritty on March 8, 2011 at 9:28 am said:

I am afraid there is no easier way than the gigya method. Since Flash is not directly accepted in wordpress.com, you have to modify it first in the gigya method.

If you have problem making a gigya code out of your Flash code, just use http://textsnip.com/ to paste your code and give me the url of your textsnip. I will modify the code for you.

Also when we are pasting it is the cloud category box or text box on WordPress?

I am not sure what you mean by that. You paste the modified code in wordpress.com and it produces a box similar to the one you see in this post.
Radu on March 17, 2011 at 5:38 pm said:

Hello!

You say: Do NOT put anything in the url field. I can’t fetch the tags if i don’t fill that field, it gives me error. What should I do ?
- Netty Gritty on March 18, 2011 at 2:00 am said:
  
  Please read the “Things to remember” section.
  - faith1st on March 18, 2011 at 1:14 pm said:
    
    Where is that section? I can’t find anything like that on your blog.
  - Radu on March 18, 2011 at 1:17 pm said:
    
    Sorry, I used another username above.
  - Netty Gritty on March 19, 2011 at 12:50 am said:
    
    Sorry.
    
    I thought that info is in this post. You can find the “Things to remember” section in this post:
    How to embed iframe widgets in a wordpress.com blog
Srinivasa Varadhan on March 17, 2011 at 8:24 pm said:

I have different way of approach to this problem..
Check out the solution here : http://indiancriticz.wordpress.com/2011/03/17/adding-facebook-like-box-widget/
- Netty Gritty on March 18, 2011 at 2:06 am said:
  
  I wish you could share an example!
  - Netty Gritty on March 18, 2011 at 2:09 am said:
    
    Oh, I got it now! But um, I like my readers to stay in my main blog.
ADL on March 19, 2011 at 1:40 am said:

hello netty gritty, i really love your flash solution but at the tagul side, i couldnt seems to be able to get the .swf url to be inserted into the gigya code!

my url textsnip is here : http://textsnip.com/0f9ad3

are you able to help me modify the code into something i can straight away insert in my text box? thanks so so much!
- Netty Gritty on March 19, 2011 at 12:21 pm said:
  
  Hi ADL,
  Thanks for letting me know that you like it.
  Your modified code is here:
  http://textsnip.com/53cebe
  
  Enjoy!
ADL on March 19, 2011 at 3:48 pm said:

hello netty gritty,

thankss so much for modifying! IT works but the like box doesnt appear as the one in your example. Is there something wrong when i am pasting the like box url in taguL?

mine is jus a sentence saying you like it and no likebox
- ADL on March 19, 2011 at 4:20 pm said:
  
  after some trying omg i finally got it right with my fb url! its not an easy task but this is definitely the best solution out there for inserting facebook like box into wordpress.com blog!
  
  visit my site http://www.alldealsleak.com and try it ! (hopefully u can like my fb too! hehe)
  
  thanks so much for this ingenious idea
  - Netty Gritty on March 20, 2011 at 1:21 am said:
    
    Oh my God! It’s looking gorgeous!! It;s great that you have succeeded. And thanks for saying the idea is ingenious. I like to figure out how to do things in wordpress.com and your compliment is definitely a big inspiration.
ADL on March 20, 2011 at 12:12 pm said:

btw are we allowed to control how much feed we wanna send out to our subscribers?

instead of sending a newsletter for every new blog post, can we make it to once every week for the readers?
Netty Gritty on March 20, 2011 at 11:27 pm said:

No, not really.
TB Joshua Testimonies on March 28, 2011 at 9:54 pm said:

Hi, thanks for the instructions! I have followed the instructions via Tagul but am stuck where it says Tagul will generate a code.

The code I received at the end is http://tagul.com/preview?id=23005@1 – is that correct?
- Netty Gritty on March 28, 2011 at 10:16 pm said:
  
  Thanks for thanking me!
  
  Well, you have succeeded! Congrats!!
  
  Now here is the code that you need to put for it to show up in your blog!
  
  Enjoy!
  - Netty Gritty on March 31, 2011 at 7:05 pm said:
    
    Wow! You have succeeded!!
    Your Fcaebook Likebox is looking kewl!!
seezinchin on April 22, 2011 at 7:43 pm said:

I followed every instructions that you gave me and everything looks great. But after tagul box showed up in my side bar, I clicked on tag and it lead me to google. I don’t know what’s wrong. can you tell me more. My blog url is http://seezinchin.wordpress.com/
thx
- seezinchin on April 22, 2011 at 8:02 pm said:
  
  I’ve got it now. that’s not our fault and that’s tagul’s own problem.
  - seezinchin on April 22, 2011 at 8:03 pm said:
    
    Thanks Netty Gritty. Thank You Very Much, In Deep.
  - Netty Gritty on April 24, 2011 at 11:27 pm said:
    
    You are most welcome!
    But um, it’s not really Tagul’s problem, but wp.com’s.
Meghna on May 7, 2011 at 3:13 am said:

Hello Netty Gritty…

I am tryin to follow you instruciton… in doing so … I went on to Socialplugin and created Likebox. However, when i right click on it, i do not see an option to “open the frame in a new tab”.

Also when i try clicking on “* To know what I am talking about, view My Facebook Likebox” link it says that page is restricted. Please advice.

Thank You!!
Meghna
- Netty Gritty on May 11, 2011 at 10:06 am said:
  
  Hi Meghna!
  Please give me the code of your Facebook Likebox (the one fb gives you) and I will help you out!
  
  My Facebook Likebox is here:
  http://www.facebook.com/plugins/likebox.php?id=178698238235&width=292&connections=16&stream=true&header=true&height=587
  - Meghna on May 11, 2011 at 10:25 am said:
    
    Nitty Grity…
    
    I eventually got it …. I have FB logo on my blog …I appreciate your helo on this…. great work around…
    
    Right now i am having problem importing my blog to FB but once i do have that up there, for which i am working with FB, I will have to manually update the image right?? or will indicate and update followers automatically??
  - Netty Gritty on May 11, 2011 at 9:13 pm said:
    
    Hi Meghna,
    I am not sure if I understand where you want the image updating to happen…in Facebook or wp.com? If it is Facebook, the images should update themselves.
- Meghna on May 11, 2011 at 9:32 pm said:
  
  I meant on WP…
  - Netty Gritty on May 13, 2011 at 12:19 am said:
    
    If you are using the Facebook Likebox like in this tut, then it will update manually. But the FB image you have put in your blog now will not auto-update.
dingosaar on May 26, 2011 at 1:34 am said:

CAREFUL!!!
I just did that on my blog. When you right-click on the “preview Like Box”, you get code like that (I attached comments, the code is in lines beginning with > – all in one line, here fractured to be readable):
> http://www.facebook.com/plugins/likebox.php?
> api_key=1111111111111111&
Baaaaad thing! Baaaad!
Delete this! “API key” seems to be a key to your facebook-account APIs need to connect. You DO NOT want to have this unencrypted in a link; it works well without.

> channel=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Df110149376849cc%26origin%3Dhttp%253A%252F%252Fdevelopers.facebook.com%252Ff17c4b22f91611e%26relation%3Dparent.parent%26transport%3Dpostmessage&

Whatever – can be deleted.

> colorscheme=light&
> header=true&
> height=590&

those define style and height – experiment with it at will.

> href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FDingoSaar%2F212146825472437&

seems to be the facebook connection to your page. Won’t work without it; ID seems to be superseded by this link.

> locale=en_US&

Bad style; if you delete it, the Like Box will take the locale of the browser (recommended). Delete.

> sdk=joey&

Whatever? Works well enough without it, so delete.

> show_faces=true&
> stream=true&
> width=300

again, style tags – experiment at will.

Hope I could be helpful. It IS a good way!
- Netty Gritty on June 1, 2011 at 12:51 pm said:
  
  I am not sure I get it! Could you slow down and break it into bite-size info? Thanks in advance for your help!
goldbhaskar on September 12, 2011 at 1:10 am said:

URL: http://www.injury-compensation-ireland.com/
NAME: Injury Compensation Ireland
Human societies are always smart enough to tap onto whatever profitable pathways they see,
and the same ideology has led to the opening of many Compensation Law Firms.
The local newspapers are generally filled with reports about cases being contested by
representatives from various compensation law firms so much so that any tourist scanning
over the city newspaper supplements is bound to be a bit
surprised by the prominent face of these law firms.
PutThatCookieDownNow on January 31, 2012 at 6:11 am said:

I’ve been trying for two days to add the code from Facebook to a Text Box Widget but it is one error message after another. This solved my problem! Thank you for the tip. It’s almost too easy!!!

Netty Gritty

Sanjida's blog featuring wordpress.com tricks and free web resources

How to add a Facebook Likebox in a wordpress.com blog – part 2 (c) Netty Gritty

42 thoughts on “How to add a Facebook Likebox in a wordpress.com blog – part 2 (c) Netty Gritty”

Follow “Netty Gritty”

January 2011
M	T	W	T	F	S	S
« Dec				Feb »
					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

Like this:

42 thoughts on “How to add a Facebook Likebox in a wordpress.com blog – part 2 (c) Netty Gritty”

Follow “Netty Gritty”