JenSocial: Social Web Directory and Ning Tips

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

Social Media Share Buttons and Code

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: Add the main code block above, to a Ning Text Box. 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

Attachments:

digg_script.txt, 1 KB
socialmedia_sharebuttons.txt, 1 KB

Replies to This Discussion

Permalink Reply by Neuerotica on August 30, 2010 at 9:08am

Wow! Can't believe nobody responded to this, especially considering how often I see requests for this over on Creators. I use
GizaPage, so I think for me this might be overkill. Still, I want to consider it if I can make it not seem like it. This is my
GizaPage widget (well a picture of it anyway):

Permalink Reply by JenSocial on August 30, 2010 at 10:49am

Very nice widget you have there. Actually this code needs updating. I'm still testing the idea of at least letting lower resolutions close the box with the open/close arrows, like I have here on JenSocial. Hang in there and give me a while to test, then I'll share better code with everyone.
Have a great week,
Jen

Permalink Reply by Neuerotica on August 30, 2010 at 10:55am

Ok. You have a great week too Jen. =)

Permalink Reply by henry ramirez on January 31, 2011 at 5:55pm

hi Jen:,,i having a error on this widgets,,llok my site and look ware the siciao book mark is going.LLall wayy to the botton..You can help me???

www.facebooklatino.net

e-mail-henryramirez9851@gmail.com

Permalink Reply by JenSocial on January 31, 2011 at 7:13pm

Henry,

I had problems with this code when adding to the Custom Code Box. That's why I wrote this tip to add to a Text Box. Although, I have to admit, I didn't make that real clear, sorry. Only add the Digg to Custom Code, if you're using Digg. The other code needs to go in Text Box.

I suggest adding to a Ning Text Box in right column.

Best,

Jen

Permalink Reply by henry ramirez on January 31, 2011 at 9:15pm

ok,,thanks,,,hey this is free,i apreciate you help and tips..thanks..

Permalink Reply by Predestined by God on April 19, 2011 at 8:50pm