<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>shapeshifter.se &#187; social media</title>
	<atom:link href="http://www.shapeshifter.se/tag/social-media/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.shapeshifter.se</link>
	<description>Mostly miscellaneous technical mumbo-jumbo.</description>
	<lastBuildDate>Mon, 11 Jul 2011 14:19:15 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>ShareIt! &#8211; Social Media Bookmark Bar</title>
		<link>http://www.shapeshifter.se/2008/08/05/shareit-social-media-bookmark-bar/</link>
		<comments>http://www.shapeshifter.se/2008/08/05/shareit-social-media-bookmark-bar/#comments</comments>
		<pubDate>Tue, 05 Aug 2008 09:31:45 +0000</pubDate>
		<dc:creator>fli</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[bookmark]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[share]]></category>
		<category><![CDATA[social media]]></category>
		<category><![CDATA[web 2.0]]></category>

		<guid isPermaLink="false">http://www.shapeshifter.se/?p=176</guid>
		<description><![CDATA[
Want a &#8220;web 2.0&#8243; styled bookmark bar for your blog that automatically creates submission links (bookmark and share) to social media sites? if you answered yes, then continue reading.
I previously used the service from addthis but never really liked it so I created my own, you&#8217;re free to use it if you like. It&#8217;s a [...]]]></description>
			<content:encoded><![CDATA[<p><!-- WSA: rules for context 'adsense-post-square' did not apply --><br />
Want a &#8220;web 2.0&#8243; styled bookmark bar for your blog that automatically creates submission links (bookmark and share) to social media sites? if you answered yes, then continue reading.</p>
<p>I previously used the service from addthis but never really liked it so I created my own, you&#8217;re free to use it if you like. It&#8217;s a simple script that is quite easy (guess it depends on who you ask&#8230;) to use and that generates bookmark/share buttons for popular services such as delicious, digg, facebook, twitter and more.</p>
<p><strong>Supports Delicious, Digg, StumbleUpon, Twitter, Technorati Favorites, Google Bookmarks, Facebook, Reddit, Diigo, Blogmarks, Blinklist and Magnolia</strong></p>
<p>This is a sample of how the bookmark bar could look, it&#8217;s possible to re-arrange and remove individual services if wanted. The icons are courtesy of <a href="http://fasticon.com/freeware/index.php/web-2-icons/">http://fasticon.com/freeware/index.php/web-2-icons/</a></p>
<p style="text-align: center;"><a href="http://www.shapeshifter.se/wp-content/uploads/2008/08/bookmarks.png"><img class="size-full wp-image-178 aligncenter" title="bookmarks" src="http://www.shapeshifter.se/wp-content/uploads/2008/08/bookmarks.png" alt="" width="290" height="26" /></a></p>
<p>Follow this guide to get your own bookmark bar, you need some knowledge of how to edit HTML.<br />
<span id="more-176"></span></p>
<h3>Step 1</h3>
<ul>
<li>Download <a href="/pub/shareit/shareit.js">shareit.js</a></em></li>
<li>Download the icon pack from <a href="http://fasticon.com/freeware/index.php/web-2-icons/">here</a> or <a href="/pub/shareit/Web2Icons_PNG.zip">here</a></li>
</ul>
<h3>Step 2</h3>
<p>Extract the folder <em>Icons</em> from Web2Icons_PNG.zip, copy the <em>Icons</em> directory and the <em>shareit.js</em> file to your webhost.</p>
<h3>Step 3</h3>
<p>Integrate a piece of JavaScript code where you would like the bookmark bar to appear, the script will automatically get the current page title and page link and use that as the base for the submission.</p>
<p>There are three variables that affect the look.</p>
<ul>
<li><em>share_show</em> &#8211; Selects which services to display</li>
<li><em>share_icon_path</em> &#8211; Absolute path to icon directory</li>
<li><em>share_domain</em> &#8211; Optional, if you want your domain to be replaced with something else.</li>
</ul>
<p>Make sure to adjust the path to the Icons and shareit.js so that they point to the correct position on your webhost.</p>
<p>This will give you a bookmark bar like the one above.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #003366; font-weight: bold;">var</span> share_show <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'delicious'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'digg'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'stumbleupon'</span><span style="color: #339933;">,</span>
   <span style="color: #3366CC;">'twitter'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'technorati'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'google'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'facebook'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'reddit'</span><span style="color: #339933;">,</span>
   <span style="color: #3366CC;">'diigo'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'blogmarks'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'blinklist'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'magnolia'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> share_icon_path <span style="color: #339933;">=</span> <span style="color: #3366CC;">'/Icons/'</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span>
&lt;script type=&quot;text/javascript&quot; src=&quot;/shareit.js&quot;&gt;&lt;/script&gt;</pre></div></div>

<p>You can tweak <em>share_show</em> to select and order which services you would like to display, for example to only display FaceBook, Digg, Delicious and Twitter set it like this</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #003366; font-weight: bold;">var</span> share_show <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'facebook'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'digg'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'delicious'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'twitter'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> share_icon_path <span style="color: #339933;">=</span> <span style="color: #3366CC;">'/Icons/'</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span>
&lt;script type=&quot;text/javascript&quot; src=&quot;/shareit.js&quot;&gt;&lt;/script&gt;</pre></div></div>

<p>If you have an IDN domain you need to use the <em>share_domain</em> setting, set it to your puny-encoded domain. Like this</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #003366; font-weight: bold;">var</span> share_show <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'delicious'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'digg'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'stumbleupon'</span><span style="color: #339933;">,</span>
   <span style="color: #3366CC;">'twitter'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'technorati'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'google'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'facebook'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'reddit'</span><span style="color: #339933;">,</span>
   <span style="color: #3366CC;">'diigo'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'blogmarks'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'blinklist'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'magnolia'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> share_icon_path <span style="color: #339933;">=</span> <span style="color: #3366CC;">'/Icons/'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> share_domain <span style="color: #339933;">=</span> <span style="color: #3366CC;">'www.xn--bcher-kva.ch'</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span>
&lt;script type=&quot;text/javascript&quot; src=&quot;/shareit.js&quot;&gt;&lt;/script&gt;</pre></div></div>

<p>There you have, you should now have your very own bookmark bar!</p>
<p>If you use this on your blog/website consider putting a link back to here, thanks.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.shapeshifter.se/2008/08/05/shareit-social-media-bookmark-bar/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

