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

Attachments:

Replies to This Discussion

Hi Jen,

this superb. I used the METHOD #2 WITHIN XG_MODULE ACROSS NING NETWORK and as you have wriiten you do not have the answers. But I asking me why appears this button below the members box on the main page if I am signed out and it do not appears if i am signed in. Cause it affects the design of my network I removed this script again. I don't like the all design otions of this "I like button" - but the effect is really easy and I will reflect if I will add this script again.

Because the analytics box of my network was full I tested now webdav - it is funny - if you have requested the webdav from NING and you have the webdav access then you can host your additional javascripts on your own network on network. i don't know if you have written that here ... but it allows me to add more text in the analytics box again.
Hi Jens,
If the xg_module is erratic, just use the "above sign-in" version. Or like you mentioned, since you have WebDav access, you could use the SDK integrated version.
Best,
Jen
Hi Jen,

how can I use the SDK integrated version? I don't understand this version.
Do you mean that I can use in a external javascript file ....


window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
Sorry Jens. I don't know. I haven't tried it yet. If I do, I'll let you know.
Thanks! you can see this I like button here at www.ayurveda-community.net/ where I installed it - to know more about this would be nice. For me it is difficult to understand everything in English ... ;-)
Jens, Until we learn the SDK version, if you add above the Signin Box, there will be a "like" button on every page of your network. You would remove any code you have added for the "like" button. And, add this code to the Analytics box:
<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>

Hope that helps,
Jen _origwidth="180"
Hi Jen,

sure this works - but maybe I try to understand the SDK version.
Thanks for your help,

Jens
i tried installing the like box, not good. i changed the width at fb, but when i placed it on my site, it was way too big. i then had a time of getting rid of it, but it's gone now. i'll try again after ning is finished mucking about.
Thunder-X,
Are you talking about the larger box I was wondering about?
Best,
Jen
Gosh, I replied to this. But I don't see the reply. So just in case, I'll say it again. ;-)

Thanks! I thought this is what you were referring to, just wanted confirmation. I appreciate it.
that's been happening to me on ning today. you're welcome, btw.

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

© 2021   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips