How to add a Facebook Likebox in a wordpress.com blog – part 2 (c) 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


Search this site Find more posts on: , , , , ,


Related Links by Google

 

How to add both “Share on Facebook” and “Facebook like” buttons in a wordpress.com blog post

Facebook Like button in a wordpress.com blog post – get the code here

How to add a Facebook album in a wordpress.com blog

How to add the Facebook Like feature in a wordpress.com blog post in one click

How to add a “Share on Facebook” button in a wordpress.com blog in one click

How to use the Facebook Recommendations plugin in wordpress.com blog

How to add Facebook Likebox in a wordpress.com blog – part 1

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

    • 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.

      • 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…

  1. 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.

  2. 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.

    • 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.

  3. 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?

  4. 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.

  5. 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 ?

  6. 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!

  7. 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 :(

    • 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

      • 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. :D

  8. 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?

  9. 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

  10. 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!

  11. 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.

  12. 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!!!

Comments are closed.