How to add or update the Facebook Like Box on Blogger

This is the revised guide replacing my previous posts on 'How to add the Facebook Fan Box on Blogger' and 'How to add the Facebook Like Box on Blogger'.

The code for the Like Box plugin has changed since Facebook switched to the new Timeline layout, so the older posts I mentioned above no longer apply.



The Facebook Like Box has also been updated so that it appears on your blog even while you're logged in as the page admin.  However, the Like Box still won't work while you're in preview mode on Facebook.

Here are the new instructions for adding the Facebook Like Box on Blogger and how you can update the existing Like Box on your blog.

---

Instructions:

1.  Get the code for your Facebook Like Box.

You can do this through the Facebook Social Plugin Page, or from your own Facebook page by going to Admin Panel > Manage > Edit Page > Resources > Use Social Plugins > Like Box. 

See the pics below for more info: 

a) Open Facebook Page Admin Panel

b) From Admin Panel > Click Manage and Edit Page

c) Click Resources > Use Social Plugins

d) Scroll down and click Like Box.

2.  Under Facebook Page URL, delete the URL that's currently in the box and replace it with your Facebook Page's web address.

For example, my Facebook Page's URL is http://www.facebook.com/pages/Maria-Tan/102277350547, so that's what I pasted in the box.

Once you enter the correct URL, your Like Box will appear on the right hand side, instead of the default Facebook Platform Like Box.

3.  Customize any of the other settings, i.e. Width, Height, Color, Faces, Stream, Header and click Get Code.

The settings I used were:
width="200" (The width of your Like Box)
height="558"
Color scheme=Light (White or Black background)
Show faces ticked (Pictures of people who like your page)
Show stream ticked (Info from your wall posts)
Show header unticked (Find us on Facebook bar)

4.  Copy the code under IFRAME.

5.  Sign in to Blogger and click Layout.

6.  Click Add a Gadget.

7.  Choose Basics > HTML/Javascript

8.  Add a Title and paste the code for your Facebook Like Box under Content.

9.  Click Save.

10.  View your blog and edit the HTML/JavaScript box again if necessary.

11.  Don't forget to Save the changes once you are finished :)

---

Updating the Facebook Like Box on Blogger

1.  Follow the previous instructions from Steps 1 to 4.

2.  Log in to your blog.

3. Go to your Like Box and click on the Edit icon (see pic to your left).

4.  Paste the Like Box code under Content.

5.  Click Save.

The next big thing in digital: Visual Search and Image Recognition

 



The likes of Google and Facebook are going beyond the hypertext form of indexing into a visual realm. Say hello to the hyperimage.

It's being used for online shopping in Google's Boutiques.com website and will be coming soon to all Facebook users as part of its 'facial recognition' photo tagging feature, enabling your name to be suggested to friends when a photo looks like you.






But the potential for this goes far beyond the mere enhanced shopping or stalking experience. This could be another step closer to the real Memex.

With the sea of data that traverses the internet every day, the web now faces the same challenges that traditional media, librarians and scholars have struggled with for years. How do we sort all that information out and present it so that it makes sense? And how does one find quality information that's relevant?

NYU Professor Clay Shirky highlighted this issue during his presentation at the Web 2.0 Expo in New York:

"All of those other media types have the same economics. Whether it's a printing press or a TV tower: 'It cost me a lot of money to get started, and so I had to filter for quality'.

So here's what the internet did: it introduced for the first time post-Gutenberg economics. The cost of producing anything by anyone has fallen through the floor, and as a result, there's no economic logic that says you have to filter for quality before you publish."


It's Not Information Overload. It's Filter Failure.

In the pioneering article, 'As We May Think', published in the Atlantic Magazine's July, 1945 issue, Dr. Vannevar Bush clearly vents his frustrations on the way scientific research is organised and retrieved, based on the system design issues he observed which are quite similar to what's happening on the web today:

"Our ineptitude in getting at the record is largely caused by the artificiality of systems of indexing. When data of any sort are placed in storage, they are filed alphabetically or numerically, and information is found (when it is) by tracing it down from subclass to subclass. It can be in only one place, unless duplicates are used; one has to have rules as to which path will locate it, and the rules are cumbersome. Having found one item, moreover, one has to emerge from the system and re-enter on a new path.

The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain. It has other characteristics, of course; trails that are not frequently followed are prone to fade, items are not fully permanent, memory is transitory. Yet the speed of action, the intricacy of trails, the detail of mental pictures, is awe-inspiring beyond all else in nature.

Man cannot hope fully to duplicate this mental process artificially, but he certainly ought to be able to learn from it. In minor ways he may even improve, for his records have relative permanency. The first idea, however, to be drawn from the analogy concerns selection. Selection by association, rather than indexing, may yet be mechanized. One cannot hope thus to equal the speed and flexibility with which the mind follows an associative trail, but it should be possible to beat the mind decisively in regard to the permanence and clarity of the items resurrected from storage.

Consider a future device for individual use, which is a sort of mechanized private file and library. It needs a name, and, to coin one at random, "memex" will do. A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory."

Perhaps we could all be using visual 'filters' for trawling the web in the not too distant future. As image recognition reaches maturity it could very well become an an alternative method or welcome addition to the keyword search. So here's hoping for Bush's, "Selection by association".

How to add the Facebook Like Box on Blogger

An updated version of this guide can be found here: http://maria-tan.blogspot.com.au/2012/04/how-to-add-or-update-facebook-like-box.html 



Please note: 'How to add or update the Facebook Like Box on Blogger' is the new version of this post.  The post you are viewing now was made in 2010 and may no longer work.

This is an old update to a previous post I made in 2009 on 'How to add the Facebook Fan Box on Blogger'.

Instructions:

1. Get the code for your Facebook Like Box. You can do this through the Facebook Plugin Page, or if you're already logged in to your Facebook page, go to Edit Page > Marketing and click Add a Like Box to your Website. See the pics above if you're having any trouble.
   
2. Under Facebook Page URL, delete the URL that's currently in the box and replace it with your Facebook Page's web address.
   
   For example, my Facebook Page's URL is http://www.facebook.com/pages/Maria-Tan/102277350547, so that's what I pasted in the box.
   
   Once you enter the correct URL, your Like Box will appear on the right hand side, instead of the default Facebook Platform Like Box.
   

3. Customize any of the other settings, i.e. Width, Color, Connections, Stream, Header and click Get Code.
   
   The settings I used were:
   
   width="200" (The width of your Like Box)
   height="554" (See Step 10 for more details)
   Color scheme=Light (White or Black background)
   Connections=6 (How many pictures of people who like your page show up)
   Show stream ticked (Info from your wall posts)
   Show header unticked (Find us on Facebook bar)
   
4. Copy the code under XFBML.
5. Sign in to Blogger and click Design.
6. Click Add a Gadget.
7. Choose Basics > HTML/Javascript
8. Add a Title and paste the code for your Facebook Like Box under Content.
   
9. Click Save.
10. View your blog and edit the HTML/JavaScript box again if necessary.
    
    To change the height of your Facebook Like Box, edit the code you pasted in the HTML/JavaScript box and paste height="554" after the width="..." parameter. You can customize the height to suit your own blog by replacing the numbers 554 with your own value in the quotes.
    
    E.g. For a Like Box with the height of 200 pixels, paste height="200" instead.
    
11. Don't forget to Save the changes once you are finished :)
    

How to add the Facebook Fan Box on Blogger

An updated version of this guide can be found here: http://maria-tan.blogspot.com/2010/12/how-to-add-facebook-like-box-on-blogger.html



Please note: 'How to add the Facebook Like Box' is the new version of this post.
The post you are viewing now was made in 2009 and may no longer work.

1. Get the code for your Facebook Fan Box. This can be done in a few ways, see the image above, or visit the fb Fan Box Wizard.


2. Sign in to Blogger and go to Layout > Page Elements.


3. Click Add a Gadget.


4. Choose Basics > HTML/Javascript


5. Add a Title and paste the code for your Facebook Fan Box under Content.
   


6. Click Save.


7. Preview and edit again if necessary. You can customize certain settings of the fan box.


8. Don't forget to Save the changes once you are finished :)
   

For my sidebar FB Fan Box widget to fit in snugly with my Minima Lefty template, I changed:

fb:fan connections="6"
width="200"
height="554"

Note: The scroll bar doesn't work in preview mode.