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 can try this code in your custom code box, but I can't guarantee I wrote it correctly. I didn't have time to test, and I'm notorious for leaving out code when writing scripts.

<script type="text/javascript" language="javascript">
x$(document).ready(function() {
if (x$("div.xg_widget_profiles_profile_show").length > 0)
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>

I also can't guarantee how it may react with the facebook like button.

If you want more solid information on this type scripting, TJ of jQueryHelp is the Expert, or my coding Guy. And for custom coding he charges $75 per hour and minimum.

Best,
Jen
Thanks Jen. Maybe when I get one of those nifty, yet elusive, test networks I'll have enough courage to test it. I'm afraid to do anything that hasn't been thoroughly verified. Thanks for providing the code, though. I'm saving it in a document so I can use it later.
Glad to hear you like it, and hope you get to implement it soon!
;-)
Great tip Jen!
Super easy to implement.
Im hoping it will bring lots of new members to our network...
Keep up the good work!
Thanks for the feedback, Lee! Happy you like it!
;-)
Hi Jen,

I come back to this discussion to let you know that I am using now METHOD #3 ABOVE / BELOW OTHER SHARE BUTTONS by hiding the facebook NING button. It works fantastic - just one point: I am missing the I like facebook button below photos - it works for videos, dicussions but not for photos and I don't know why ... do you have an idea?

All the best
Jens

Hi Jen,

Since NING finally gave us the Like buttons but at the cost of the Facebook Share button could you please alter the script for placing an AddThis bar instead of the Facebook Like button ?


Bookmark and Share

Hi Martin,

I want to see this other working properly first, and see that there are no bugs. I might consider this in the future. Plus, this might be tough for me to do with my Scripts4Ning script, which has an AddThis Bar. It's a little confusing. I will keep it in mind though, for sure.

Thanks for the suggestion,

Jen

O.K.

Keep me posted if you will.

Hi Jen,

 

Your tips are really cool.. Anyway, I tried this facebook code and it worked well... but, for some reason, the like of facebook doesn't show the page's title, it just shows the main address for likes of any page... are there anyways to solve this... please visit my network and try liking a page to see what i mean..

 

thanks

Hi Pansak,

This could be similar to what The Douglas Archives has reported. I do wonder in your case though, does it have anything to do with your site being private past the home page?

Let me know,

Jen

Hi Jen,

I've just switched my privicy settings to public for all pages, but still facing the same results:

only the network name and address shows.

please let me know

Many thanks,

Pansak

 

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