JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

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.

1 member favorited this

Attachments:

Add_FacebookLikeButton_3NingANDOtherPlatforms.txt, 2 KB

Replies to This Discussion

Permalink Reply by www.overtone.cc - Jens on December 5, 2010 at 12:43pm

I am using method #3 and agree with you, Jen. This method provides that someone can add a comment to his or her I LIKE ... you know what I mean? If you click on I LIKE .- there appears an interactive element which allows you to add a comment too - if you add a comment too it looks like a normal posting from / on your facebook profile page.

Permalink Reply by JenSocial on December 5, 2010 at 1:03pm

Cool, thank you for the feedback Jens.

Just invited you to the premium group! So happy to have you with us.

Best to you,

Jen

Permalink Reply by solo on May 12, 2010 at 1:44pm

jen your the best ,better than snapple,lolthank you so much for this tip,now i just have to wait for my network to be up and running

Permalink Reply by JenSocial on May 12, 2010 at 1:50pm

I know. I am bordering on anger at this point, and that's not my norm. Ning needs to make the appropriate announcements for all these platform issues and down times. I would have never sent out the broadcast message with a tip this important, if I'd known we were about to experience more platform issues. Their blog is not being updated as it should be.

Sorry about the timing!

Thank you for your kind words, and happy you like (pun intended, LOL) the tip.
Best,
Jen

Permalink Reply by Anthony on October 21, 2010 at 4:44pm

Jen...you are God amongs men...or Ning...lol

I got two useful tip today.

It looks like I should come to you for features and API features instead of Ning...

Are you working on any API feature...?

Maybe a few NC say 20 could pool money, maybe a $1,000 each and we could have you create a killer engament feature for network. Any network who need to use it who didnt pool funds would have to pay a monthly fee which would share amongs the 20 who pool funds.

brain storming here...

Permalink Reply by JenSocial on October 21, 2010 at 9:24pm

Sure can't compare anything I've ever done, to God ;-), but thanks for the kind words!

Not a bad idea at all on the pooling and creating. What kind of app? Funny, I hadn't considered any development, apps that is. Today I wrote Ning about any plans for future API classes.

Let me know. If I can't do it, I know who can. ;-)

Thanks again Anthony!

Jen

Permalink Reply by Neuerotica on May 12, 2010 at 1:48pm

it wooooooorrrrrrrks! hahahahaha! thank you jen! this is great! =)

Permalink Reply by JenSocial on May 12, 2010 at 1:53pm

LOL. I'm surprised you were able to do anything with these ridiculous Ning platform loading issues. I'm glad you were able to sneak it in between issues. I would advise not announcing this to your members, until we know for sure that Ning is running smoothly - - and especially in this case. The analytics box loads last, and the "like" button will not show up, if a page doesn't completely load. I sure wouldn't have announced this tip, if I'd known we were about to experience yet more, issues.

Glad you "like" the tip! ;-)

Best,
Jen

Permalink Reply by NoTimeToCook on May 12, 2010 at 1:57pm

Wow, slick! THANK YOU!!!

It wasn't working right on my Test network--the link was for the Sign in--but it looks good on NoTimeToCook.com whether or not I am logged in.

Is there any way to find out who the "Other" people who like a page are? It just says "You and one other person like this" and I'm dying to know who these other folks are. Mostly so I can reciprocate like Twitter.

Permalink Reply by JenSocial on May 12, 2010 at 2:15pm

I haven't tried it yet, figuring it might be hard to place it on the page, as the "likes" grow. But, I believe you could increase the iframe height, change the parm for show_faces=false TO show_faces=true, and that might do it.

The JavaScript SDK integration does all of that too. But, I haven't had the nerve or time to try and make that method work with a Ning Network.

Oh too, you may just be interested in the Facebook Like Box Widget. I'll write a tip on it later.
http://developers.facebook.com/docs/reference/plugins/like-box

Glad you like it. Not sure why it wouldn't work on your test network.

Update: oops, looks like that plugin is for the facebook pages, and not just anywhere. If I find out more, I'll let you know.

Let us know if you find out how it works.

Best,
Jen

Permalink Reply by NoTimeToCook on May 12, 2010 at 2:24pm

I like how small and unobtrusive this is, so I'll probably run with this for a while. I was pleasantly SHOCKED to see that I already have 15 Likes on my cooking videos page.

This is already 100 times better than what I had yesterday. I think we're going to get a LOT more Facebook traffic because of this. Go Facebook and go Jen!

Permalink Reply by JenSocial on May 12, 2010 at 2:49pm

Fantastic!