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.

Social Media Share Buttons and Code


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):
  1. 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.
  2. 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.
  3. 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.
  4. Table Rows start and end with: <tr><td>code</td> and </tr>
  5. 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
  6. 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.
  7. 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!

Views: 923

Attachments:

Replies to This Discussion

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

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
Ok. You have a great week too Jen. =)
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

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

 

ok,,thanks,,,hey this is free,i apreciate you help and tips..thanks..
Hi Jen ... posted this in but it shows up at the bottom left of the screen as oppose to the upper top left.

I was never happy with this code. Did you paste into a text box? The comment "...bottom left of screen..." not sure what you're trying to do.

Best,

Jen

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