Share Button

Everyone has their own taste. Someone prefer to using Twitter, on the other hand, someone wants to use Facebook not using Twitter. This tutorial is written to solve this problem. Share button generated by a couple of websites does have diverse social plug-ins to allow people to share your pages to many social networking services such as Facebook, Twitter, Myspace, and so on. In addition, it help people print, email, add to favorite, bookmark, and many things by just one clicking. Here, I would like to describe Social Button to be added to your website.

Instruction

Add Text box to a page you want to add "Share" button, and place it on your desired place.
Type "share_button" or any short words you want. I typed "share_button" as you can see below.
Here, the most important thing is Don't change FONT TYPE, SIZE, and ANY OTHER PROPERTIES of TEXT. Keep it as default. Just type words in the text box.
There are a few websites which provide Social plug-in buttons. Among them, I would recommend two social plug-in services: "Share this" (http://sharethis.com/publishers/get-sharing-button), and "Add this" (http://www.addthis.com/web-button-select). I think "Add this" is a little bit better than "Share this" because it provides more options you can customize as well as a print button.
Please, go to http://www.addthis.com/web-button-select. Then select "Website", and choose one of styles you want to add.
There are several styles you can choose. I chose the first one. This is more common. You can see more styles if you click more options at the bottom. All is up to you. You just need to choose one of them which is well-matched with the page this button will be added. You can see its preview on the right once you select a different style.
I will illustrate this tutorial based on the first one. If you have chosen, click "Get the Code" button at the bottom. You are ready to grab the HTML code the site generated.
The source code may look like below. Actually, you don't need to sign in this site, but if you sign in, you can use analytic feature on this site, and also username will be changed to your id in this HTML code.

<!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style ">
    <a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4cf7afa9264a7476" class="addthis_button_compact">Share</a>
    <span class="addthis_separator">|</span>
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4cf7afa9264a7476"></script>
    <!-- AddThis Button END -->

Copy the source code and paste it into somewhere (text editor).
You are able to remove "Share" word highlighted in RED. It may look different from the preview, because the font style is determined by your page's css style. If you don't like any texts or want to show only icons, just delete it.
Let's go back to iWeb, then resize the text box you typed for Share Button. The size depends on the type of Share Button you selected. If you select the first one, resize the text box as "Width: 200px, Height: 35px". Otherwise, you can adjust the size according to the style.
Save your website, and then publish to Local Folder.
Open "MassReplaceIt" application, and then select "Query" you want to use for your website or you can add right now. (If you didn't master Replace HTML tutorial yet, please learn it now.)
Add Find / Replace Field by pressing "+" button. Then paste the HTML code from the text editor (look like the above code), into "Replace:" field of "MassReplaceIt" application.

<div class="text-content graphic_textbox_layout_style_default_External_200_35" style="padding: 0px; ">
    <div class="graphic_textbox_layout_style_default">
    <p style="padding-bottom: 0pt; padding-top: 0pt; " class="Body">share_button</p>
    </div>
    </div>

Replace the words highlighted in RED. For example, if the size of your text box in which you input "share_button", is 300px / 50px, replace 200 -> 300, and 35 -> 50. (It depends on the button style you chose. In addition, you should replace "share_button" to the words you input. For sure, if it is same, leave it.
If you have replaced it correctly, please copy the HTML code, then paste it into "Find:" field of "MassReplaceIt" application. It may look like below:
Press "Replace" button at the bottom to apply.
You would be noticed at what pages will be applied according to these queries. (Of course, you may have other queries on the list.) Press "Replace All" button to apply to all of them.
Check if the Share Button works from your web browsers. I would recommend to try it on Safari, Firefox, and IE as well. On some browsers in particular IE, it may look different.

You must do push "Replace" button every time when you re-publish your site.