JenSocial: Social Web Directory and Ning Tips

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

Add Google +1 Above Ning Sign-In / Add Facebook Above the Google +1

To add the Facebook Like Button and Google's new +1 (Plus One) button to your Ning Network, add the following code to your Custom Code Box, via My Network/Tools/Custom Code;

Google +1 Button Only
<!-- G +1 All Pages Above Sign-In -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" language="javascript">
x$("#xg_module_account").before("<div align=center id='custom_g1'></div>");
var g1_html = '<g:plusone></g:plusone>';
x$("#custom_g1").html(g1_html);
</script>

Both Buttons (Facebook Like and Google +1) - - this is my code. Be sure to change your facebook settings as you want them. If that makes no sense, not to worry. Just use this code:

<!-- Facebook All Pages Above Sign-In -->
<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>
<!-- End FB All Pages Above Sign-In -->
<!-- G +1 All Pages Above Sign-In -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" language="javascript">
x$("#xg_module_account").before("<div align=center id='custom_g1'></div>");
var g1_html = "<g:plusone></g:plusone><br>Don't forget to Like and +1 us!";
x$("#custom_g1").html(g1_html);
</script>
<!-- End G +1 -->

Where to find the Google Plus One Code if you need it:

http://www.google.com/webmasters/+1/button/

Enjoy!

1 member favorited this

Replies to This Discussion

Permalink Reply by JenSocial on December 4, 2012 at 10:43pm

Hi Phuze,

I tried several formatting changes, and it still won't fit. I think you'll need to make your table 2 rows. Or, let me share my JenSocial code with you. It has 3 buttons. See if this will help you with 3 instead of 4. My eyes are tired, but think you would only have to change the Twitter JenSocial:

<script type="text/javascript" language="javascript">
var fb3_html = '<iframe src="http://www.facebook.com/plugins/like.php?href='+window.location+'& layout=button_count&show_faces=false&width=79&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden;width:100px; height:21px"><\/iframe>';
</script>
<div id="tmp_sm_belownavbar" style="display:none;"><div id="socialshare" style="xg-p:relative;text-align:center;height:35px;width:308px;padding:5px;top:0px; left:-2px;background-color: transparent;border-bottom: 1px dashed #E6E6E6;"><center><table width="320"><tr><td align="center" valign="bottom" width="33.3%"><script type="text/javascript" language="javascript">
/* write new fb button code using var above */
document.write(fb3_html); </script></td><td align="center" valign="bottom" width="33.3%" height="40"><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><g:plusone size="medium"></g:plusone></td><td align="center" valign="bottom" width="33.3%" height="40"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="JenSocial">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></td></tr></table></center></div></div>
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
if (x$(".xg_widget_profiles_profile_show").length == 0) {
    x$("div#column2.xg_column.xg_span-7").before('<div align=right id="sm_belownavbar"></div>');
    var t_sm_belownavbarCode = document.getElementById('tmp_sm_belownavbar');
    var sm_belownavbarCode = document.getElementById('sm_belownavbar');
    sm_belownavbarCode.innerHTML = t_sm_belownavbarCode.innerHTML;
}
}
</script>