JenSocial: Social Web Directory and Ning Tips

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

Social Media Share Buttons and Code for Ning Networks

I also added this tip to our General Networking Tips.
I've seen this request numerous times, "How do I add Social Media Share Buttons to my website?".

Add A Social Media Toolbar:
You can add share buttons via a Social Media Toolbar like: Wibiya, Skysa, Meebo, etc...

Add Share Button Widget/Code:
Or, you can add Share Buttons by using widget code from sites like: AddThis or ShareThis.

However, most website owners want to add the WordPress/Blogger Style Social Media Buttons - - that larger Web 2.0 look. It makes sense. That "in your face larger button" probably attracts and encourages more site Visitors to SHARE your pages.

You can't just add Buttons. You'll need the code that actually initiates a Share. I have created a simple table that contains 7 Social Media Buttons and their respective Share Code. I created a slender tall Social Media Box, so it will fit on most any site. The box header, and background colors are not included, so it will fit seamlessly with your site colors. You can remove any row, to remove a button from the table. I would remove 1 or 2, minimum. This box is really too tall.

Note: I will create a 2-up or 3-up wide table in the future.

You do not have to edit the individual button code. However, you will need to delete 1 of the Facebook Buttons, and delete other Share Buttons you don't want to utilize.

Get Your Table Code Ready for Your Website (very simple):

You will find the table code at the bottom of this Discussion. And, I have attached a file in case there are any issues with the code via the discussion.
Edit the Table Code, and delete 1 of the Facebook Buttons.
- I have added 2 Facebook Buttons/Code. And they are contained in rows 1 and 2 of the table code. One large (better match) and one compact.
- The Facebook Share Button/Code in Row #1 is the Official Facebook Compact Button and Code. This button has a counter like the larger version. Note: If you know of an Official Larger Button, please let me know.
- The Facebook Share Button/Code (Larger Button) in Row #2 is an Unofficial version, and I can't say how reliable it will or will not be for your site. This larger button has been created and offered by: http://www.fbshare.me/
- Remove or delete either the 1st or 2nd row, depending on which Facebook Button you wish to utilize.
Any of the Social Media Share Buttons/Code that you do not want to utilize, simply delete that table row. This is the main reason I've added the Buttons/Code to a table, so it's easy to remove Buttons you do not want to include.
Table Rows start and end with: <tr><td>code</td> and </tr>
In order for the Digg Button to work you must add the attached text file (Digg JavaScript Code) in either the <head> or the <body>.
- The earlier the code appears in your website document/page, the sooner the download can begin and your buttons can be initialized.
- If you are a Ning Network Creator, add the attached code (Digg Javascript Code) to your Custom Code Box via: My Network/Tools/Custom Code
Attention Ning Network Owners: After you add your code to a Ning Text Box, you may have to refresh your Browser 1-2 times. This is so you see all of the buttons initiated. Site Visitors should see a refreshed screen the first time in. Don't forget to add your Digg code to your Custom Code Box.
After you prepare your code, copy/paste into your web page.

SHARE BUTTONS AND CODE - - EDIT THE CODE BELOW, OR ATTACHED FILE.

<table border="0" width="159">
    <tr>
        <td align="center"><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></td>
    </tr>
    <tr>
        <td align="center"><script src="http://widgets.fbshare.me/files/fbshare.js"></script></td>
    </tr>
    <tr>
        <td align="center"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></td>
    </tr>
    <tr>
        <td align="center"><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></td>
    </tr>
    <tr>
        <td align="center"><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></td>
    </tr>
        <tr>
        <td align="center"><script type="text/javascript" src="http://reddit.com/static/button/button2.js"></script></td>
    </tr>
    <tr>
        <td align="center"><a class="DiggThisButton DiggMedium"></a></td>
    </tr></table>

Please let me know if you see any mistakes, or experience any issues.

Enjoy!

0 members favorited this