Adding AddThis Social button to a #SharePoint site

One of the easiest tasks that you can do to enhance your site is adding a social buttons or add-ons  ,here you are simplemsteps to do so:

  1. open your SharePoint site and from site actions choose edit page, then choose  insert  from tools ribbon and choose web part button

2. Then choose from web part categories Media and content then choose “Content Editor”  web part

3. Your web part will say “ Edit this web part to add content to your page”  Click on Content Editor Menu and go to Edit Web Part

4. After you click (or click the “Edit Web Part” option from the drop menu like above), you have two options; the 1st one is adding your code in a file and link it to the web part  , the 2nd is choosing from the tools ribbon HTML source editing like below:

5- copy and past the following code inside the text area in the HTML source editor :

<!– AddThis Button BEGIN –>
<div class=”addthis_toolbox addthis_default_style “>
<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>
<a class=”addthis_button_compact”></a>
<a class=”addthis_counter addthis_bubble_style”></a>
</div>
<script type=”text/javascript”>var addthis_config = {“data_track_addressbar”:true};</script>
<script type=”text/javascript” src=”http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fc0816035bd5383″></script&gt;
<!– AddThis Button END –>

You will see a social buttons like below if you have an internet connection to your SharePoint server :

You can edit the code as you want , also if you prefer to add a “like” button for Facebook fans , you can add the following code:

<html>
<head>
<title></title>
</head>
<body>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=17967673270″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div text-align: right class=”fb-like” data-href=”PUT YOUR SITE LINK HERE” data-send=”false” data-layout=”button_count” data-width=”450″ data-show-faces=”true” data-font=”arial”></div>
</body>
</html>

and don’t forget to put your site instead of the phrase (PUT YOUR SITE LINK HERE)>

Enjoy.

Advertisements

About Hossam Kamal

Hossam Kamal Senior SharePoint Developer with high development skills in C#, ASP.NET, SharePoint Server Technologies, jQuery, CSS, XML, O.O.D, SSRS and MS.SQL Server.
This entry was posted in SharePoint General. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s