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
, etc...Add Share Button Widget/Code:
Or, you can add Share Buttons by using widget code from sites like: AddThis
, 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):
SHARE BUTTONS AND CODE - - EDIT THE CODE BELOW, OR ATTACHED FILE.
- 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>
- The earlier the code appears in your website document/page, the sooner the download can begin and your buttons can be initialized.
- 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.
<table border="0" width="159">
<td align="center"><script src="http://widgets.fbshare.me/files/fbshare.js"></script></td>
<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>
<td align="center"><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></td>
<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!