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

JenSocial Network Directory - How To Add the Facebook Like Button to All PagesIf 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.





JenSocial Network Directory - How To Add the Facebook Like Button to All PagesIf 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.


Views: 4042

Attachments:

Replies to This Discussion

You are seriously AWESOME! I'm going to try it out later, after I get something to eat:) It does work on your page though:) BTW the image is linked to my FB profile if you want to "friend" me:)

Glad you like the tip, Janettee. It's probably the biggest secret and tip I've given yet. I wanted to announce it 2 hours ago. But with Ning sites up/down for hours, I guess I better wait. Let me know how it goes.
:-)
I haven't been able to get in:( I'm going to try now. I just realized that this doesn't display the way you have it here, does it?
It just displays above the sign-in box. Is that what you're referring to?
No, I mean how on this page, for instance, it shows before comments.
No, that takes a good deal of code with an external js file, and I may remove it. Plus, by adding above the sign-in box, you receive the same benefits. I'm still testing. I do see a negative for Ning Networks. If you are on a page URL and it's for example the latest activity version of the URL like your reply:
http://theningdirectory.ning.com/xn/detail/2154984:Comment:231994?x...

and you clicked on "Like" from that URL, it would not tally for the main URL:
http://theningdirectory.ning.com/group/socialnetworktips/forum/topi...

Each unique URL will have a different tally. But, all-in-all, what matters is the likes for your site, period. So, it's not too bad. ;-)
OK thanks:) The only reason I would like that is that it seems to be more intuitive, but I think as long as I post an explanation (which I usually do for everything), it should be okay:) I did test it out on my network, and when I went to my Facebook page I noticed it did show unique pages:) Not like before, when I tried using GB instructions I ended up showing "Janettee likes The Human Touch" for EVERY like I made:( Again, you are SOOO awesome:)
I added the method for the xg_module (just extracted from my external js and put in appropriate format). I put a warning about not being tested well, no way to say where all it will show up, and can't answer questions about it. ;-)

So, you may enjoy that one.

Best,
Jen
Hi Jen,

This sounds good. I do have a question. Most of Ning has a limit on the analytic code space. Do you know if they will increase the size of this space?

Hugs
Ralphy
Hi Ralphy,
Couldn't reply to yours - - I haven't heard yet. But my guess is, they will increase the space.
Hugs back,
:-)
Jen

Good Morning Jen,

 

I just added the codes and they are working fine! I did not use this one because it was showing up in weird places:

 

WITHIN XG_MODULE:

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

==========

 

Thank you so much for all your help!

I think method #3 is the best one. Is this the one you used? I'm not even sure why I added the one above, must have had 2 glasses of wine instead of 1, LOL!!!

 

Have a great week,

Jen

RSS

Members

Discussion Forum

Ning 3.0 vs. Grou.ps for a brand new community

Started by Rodney Cummins. Last reply by Rodney Cummins Jul 22, 2013. 2 Replies

Suggestion for Jensocial

Started by Bernard Lama. Last reply by JenSocial Jun 3, 2012. 1 Reply

Scheduling background changes

Started by Mind's Eye. Last reply by Mind's Eye Feb 29, 2012. 1 Reply

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips