How to Add the Facebook Like to All Pages - Huge hidden secret within tip for Ning NCs!

If you like this Tip, please click on the "Like Button" for this Tip Page, and our Main Site. :-) Huge hidden secret within tip, for Ning NCs!

* This tip is NOT available for distribution, outside of this Discussion.

Wow, what a great and interesting new way to share content – the new Facebook Like! Honestly, I think this beats just about any type of "share" from the past or present. You could say it's a close runner to sending out Tweets.

Here's what I like about it:

It's easy. It's not intimidating to the novice Facebook user. It has a built-in intelligence (API) that knows when you have already "liked" a web page. It shows up on your Facebook Wall, or on the Wall of whomever clicks on the "Like" button while signed into a Facebook account.

I can think of numerous ways to take advantage of this new share feature, from plain old simple viral marketing, to Contests! In fact, Jen is cooking up a new Contest as we speak. So, if you're a member of the JenSocial Network Directory, get a head start on sending friends to "like" your Blog or Profile Page - - hint, hint... ;-)

Easy Widget Builder: Facebook makes its easy to add to a web page. You can follow the instructions here on their Facebook’s Like widget builder. You can go this easy route and set up your features via the widget builder. It utilizes an iframe and a few lines of code. I think the iframe version is great, and plenty powerful enough for most web sites. ;-) Plus, all you have to do is select a few settings, copy the code, paste to your web site, and you're done! However, if you want to add to all pages (purpose of this tip), you need to edit the iframe code. See instructions below.

Here's the Challenge for Social Networks and Sites with Multiple Pages:

The widget only allows you to create a Like Button Widget for one default page URL. You can add the code to multiple pages, but your Site Visitors will only be able to "Like" one default website URL address. In other words, regardless to what page they land on - - and click on the "Like Button" - - it will return the default URL you provided within the Widget Settings. So in essence, each unique Visitor can only "Like" one page or the default URL, of your website.

How to Edit the Facebook Like Widget Code, and Dynamically Change the Page URL Where Your Site Visitor Clicks the Button:
If your software platform allows you to display the same widget across many pages, like the right column on a Ning Network, or an Article in the right column on JomSocial or WordPress - - I am going to show you how to add the widget one time, and enable your Site Visitors to "Like" any page on your site where the button is displayed.

The widget code I will provide to you, will dynamically change the Facebook Like URL to the current page, where the button resides and your Site Visitor clicks on the button. If you cannot add a widget to multiple pages, you may just want to go with the simple script provided by Facebook with one default website URL, and you're done.

Ning Network Example - Ning Network Creators: I expect Ning to add the Facebook Like button to the Ning platform very soon (time of this writing: May 11, 2010). Until that happens, you're going to love this! Not only will you love this, it will open a secret door you never thought possible. It will also demonstrate how you can add special code above the Sign-in box. Yep, that's right, no text box - - and in a place you've probably never been able to add anything on your Ning Network. Enjoy!

You will need room in your Analytics Box, or know how to call in an external js file. I will cover the Analytics Box method.

For simplicity, I will provide the exact code to make this work. You won't even have to use the Facebook Widget Builder.

---

Step-by-step for Ning Networks METHOD #1 ABOVE SIGN-IN:

Add the following code to your Analytics Box, via Manage/Analytics. This code will add the Facebook Like Button above your Sign-In Box, on every page. To add it below the box, change the code that has the word: before, to the word: after. You can also adjust the width and height of your iframe.

<script type="text/javascript" language="javascript">
x$("#xg_module_account").before("<div align=center id='custom_fb'></div>");
var fb_html = '<iframe src="http://www.facebook.com/plugins/like.php?href='+window.location+'&layout=standard&show_faces=false&width=180&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="padding-top:15px; border:none; overflow:hidden; width:180px; height:50px"><\/iframe>';
x$("#custom_fb").html(fb_html);
</script>

---

Step-by-step for Ning Networks METHOD #2 WITHIN XG_MODULE ACROSS NING NETWORK:

Add the following code to your Analytics Box, via Manage/Analytics. This code will add the Facebook Like Button within each xg_module DIV across your Ning Network. It's impossible to say where all it will be added. xg_module is a main component across a Ning Network. This has not been tested well. As in any Ning Tweak, ADD AT YOUR OWN RISK. If you have any questions about this, I seriously do not have the answers. ;-)

<script type="text/javascript" language="javascript">
x$("div.xg_module").after("<div align=left id='custom_fb2'></div>");
var fb2_html = '<iframe src="http://www.facebook.com/plugins/like.php?href='+window.location+'&layout=standard&show_faces=false&width=400&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:400px; height:40px"><\/iframe>';
x$("#custom_fb2").html(fb2_html);
</script>

---

Step-by-step for Ning Networks METHOD #3 ABOVE / BELOW OTHER SHARE BUTTONS:

Add the following code to your Analytics Box, via Manage/Analytics. This code will add the Facebook Like Button either below or above your other share buttons. This has not been tested well. As in any Ning Tweak, ADD AT YOUR OWN RISK. If you have any questions about this, I probably do not have the answers. ;-)

<script type="text/javascript" language="javascript">
x$(".share-links").after("<div align=left id='custom_fb3'></div>");
var fb3_html = '<iframe src="http://www.facebook.com/plugins/like.php?href='+window.location+'& layout=standard&show_faces=false&width=400&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:400px; height:40px"><\/iframe>';
x$("#custom_fb3").html(fb3_html);
</script>

If you don't have enough room in your Analytics Box, you can use the code
example for other websites (below), and add to a regular text box in
right column.

PLEASE READ: I strongly suggest you use the script from attached text file, instead of copy/paste from this discussion - - too much risk on hidden characters being added to the code, which will cause it not to work.

---

Step-by-step for OTHER WEB SITES or Ning Text Box (JavaScript is needed):

Add this code to the appropriate area for your platform. Again, if you do not know how to display a widget on all pages, you can simply use the code Facebook provides - - for one URL.

<script type="text/javascript">
   document.write ('<iframe src="http://www.facebook.com/plugins/like.php?href='+window.location+'&layout=standard&show_faces=false&width=160&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:160px; height:40px"><\/iframe>');
</script>

---

Logical Adjustments to All Methods - - You Can Change:

• colorscheme=light TO colorscheme=dark.
• Remove the padding-bottom:7px; and/or padding-top:5px; or adjust this padding.
• Edit the Width or Height of the iframe. I have used 160 and 40 in one method, and 400 by 40 for the Ning method (xg_module). CRITICAL: Be sure to change the width before &action, too. The width is located in 2 places.
  
• Show_faces=false to Show_faces=true - - this gets messy with an iframe.

---

WARNING: If you use the method for all pages, be aware that the "Like" Tally keeps count per unique URL. So, if any part of the URL changes, the tally will as well. For example, a short URL link would keep a separate tally to the long link. The important factor is acquiring the Facebook likes in general, not counts - - just wanted everyone to know this.

---

Full Integration: Feeling a little froggy, and want a few more features? Then you may want to go a little more sophisticated, and use Facebook's XFBML that you can integrate into your site. The advantage to XFBML is the ability to enable Facebook users to comment right from your site, and the comment is posted back to their FB Wall. The XFBML version also dynamically sizes its height; for example, if there are no profile pictures to display, the plugin will only be tall enough for the button itself. You're going to need the JavaScript SDK if you go this route.

---

If you like this Tip, please click on the "Like Button" for this Tip Page, and our Main Site. :-)

And just in case there are any issues with this raw code, I have attached a text file containing the code for both methods.

I have tested this a good deal, both methods. Please let me know if you see any issues with these instructions.

ATTENTION - THIS TIP IS NOT AVAILABLE FOR DISTRIBUTION:
This is a special tip, part of my upcoming eBook, and copyrighted. No one has my permission to copy/paste this tip or any tip from this site - - to your website or any reason, PERIOD.