Lusus-art: Avatar Social Network

Share Buttons For Second Life Social Networks

By 11:37:00

Blogging about Second Life is a popular activity, especially for residents who have a defined interest in-world such as the arts, music and fashion etc. Along side this there are some prominent social network platforms that cater specifically for online 3D worlds, although for some reason it is not as easy to connect the two in the same way it is with, for example Facebook where share buttons are now part of the norm for any blog.

Although no platform owner has yet developed share buttons that enables blog readers to add their favourite content to these social networking sites, there is a work around. The idea is simple. Buttons placed are on a blog, much like Facebook, Twitter and Google+ buttons, and when clicked a small pop-up window appears so readers can quickly add the page to their Second Life social network site of choice, without leaving the blog. To get a better idea how these buttons work click on the ones at the bottom of this page.

There are two ways to add these share buttons to a blog. The first is the much simpler method of adding them to the sidebar and the second is to add them to the blog template where they will automatically appear in each blog post.

Adding The Share Buttons To The Sidebar

To add the buttons to your blog follow these steps:

1/ Sign into Blogger and then click on Layout for your blog.

2/ Drag your cursor over the following code then right click on your mouse and select copy.

<table>
<tr>
    <th style='border:none: width:100%;'>
<a href="#" onclick="window.open('http://avatarbook.org', 'newwindow', 'scrollbars=yes, toolbar=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='Avatarbook' src='http://i65.tinypic.com/5wjdxz.jpg' style='padding-left:-5px; padding-right:3px' title='Share to Avatarbook. Opens in a new window'/>
                      </a>
<a href="#" onclick="window.open('http://www.avatarsocialnetwork.com', 'newwindow', 'scrollbars=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='Avatar Social Network' src='http://i63.tinypic.com/10frr14.jpg' style='padding-right:3px' title='Share to Avatar Social Network. Opens in a new window'/>
                      </a>
<a href="#" onclick="window.open('https://sl-space.com', 'newwindow', 'scrollbars=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='SL-Space' src='http://i66.tinypic.com/eaprh4.jpg' title='Share to SL-Space. Opens in a new window'/></a>
</th>
</tr>
<tr>
                        
<th style='border:none; padding-bottom:10px; font:10px Roboto,arial,sans-serif; color:#666; width:35%'>Created by <a href="http://www.sl-inspiration.com">SL-Inspiration</a></th>
</tr>
</table>

3/ Now in the sidebar section of the blog layout, select Add a Gadget. In the window that opens select HTML/Javascript.

4/ Another window will open and in the Content area paste the code, then give it a title if you wish to. Click Save, and the share buttons should appear on your sidebar.

Adding The Share Buttons To The Blog Template

Before making changes to any blog template it is important to download a backup of the original, so it can be uploaded again later if needed. To do this:

1/ Sign into Blogger again and then choose Template from the drop down menu for your blog.

2/ To the top right of the template page click the Backup/Restore button, and in the Save window that opens give the template a meaningful name and hit Save. Your backup is complete.
.
To add the buttons to your template follow these steps:

1/ Sign into blogger, click on Template, then click the Edit HTML button.

2/ Click anywhere inside the template window, and then hit Ctrl > f to bring up a search window. Use this window to find this line of code:

<b:include data='post' name='post'/>

As you can see from the example above this code can change from template to template, but search for something similar to the above.

3/ Now drag your cursor over the following code. Hit the right mouse button then select Copy.

<table>
<tr>
    <th style='border:none; width:35%; padding:0px;'>
      <a href="#" onclick="window.open('http://avatarbook.org/links/new', 'newwindow', 'scrollbars=yes, toolbar=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='Avatarbook' src='http://i64.tinypic.com/9zsytv.jpg' style='padding-right:3px' title='Avatarbook Opens in a new window'/>
                      </a>
                      <a href="#" onclick="window.open('http://www.avatarsocialnetwork.com', 'newwindow', 'scrollbars=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='Avatar Social Network' src='http://i63.tinypic.com/2h6ykx1.jpg' style='padding-right:3px' title='Avatar Social Network. Opens in a new window'/>
                     </a>
                      <a href="#" onclick="window.open('https://sl-space.com', 'newwindow', 'scrollbars=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='SL-Space' src='http://i64.tinypic.com/2d9z8qv.jpg' title='SL-Space. Opens in a new window'/></a>
</th>
<th style='border:none; width:55%; font:11px Roboto,arial,sans-serif; color:#666; padding:0px; '>Share to SL social networks</th>
</tr>
                        
<tr>
<th style='border:none; padding-bottom:10px; font:9px Roboto,arial,sans-serif; color:#666; width:35%'>Created by <a href="http://www.sl-inspiration.com">SL-Inspiration</a></th>
</tr>
</table>

4/ If you want the share buttons to appear above each post content then paste the code above the line you searched for. For the buttons to appear below each post, paste below.

5/ Save the changes to your template and the buttons should now appear on your blog.

As all blog templates differ, it may be that your blog has more than one b:include data='post' name='post' line of code. If the buttons do not display in the correct place on your blog you may need to search for a second b:include data='post' name='post' in your template and add the share buttons script there.

Displaying the Share Buttons Only On Blog Posts

Many templates will not show the standard Facebook, Twitter and Google+ share buttons on the blog homepage. If this is the case with your blog and you would prefer for the SL share buttons not to show on the homepage also, you will need to find the following line of code:

<b : include id='sharebuttons' var='post'>

1/ Once you have found this line you should see a black triangle to the left of it. Clicking it will reveal more code.

2/ Scroll down until you see this:

<data:post.dummyTag/>

Paste the SL share buttons code after the closing </b:if>.

3/ Save the template and the buttons should now appear after each post but not on the homepage.

A final Note

As we have already mentioned, blogger templates can differ and it may be that the buttons appear more clustered on your blog than they do below. If this is the case try tweaking the width percentages in the first two lines that begin with

<th style='border:none.....

Increasing the percentage will give more room to the line you edit, but keep the total of both percentages to around 90%. Leave the third <th style='border:none..... exactly as it is.

Adding buttons for Second Life related social networks is easier than you may think, and can help to increase not only your readership but also the exposure of your favourite social platforms. If you like this tutorial then why not share it! Also, check out our new SL-Inspiration Facebook page...we appreciate each 'like' we recieve.

Adding An Avatar Social Network Button To Your Blog

By 02:22:00

Most Blogger templates come with social profile buttons added to the sidebar, but almost always you will find that some of these buttons are useful and some are not. It is possible however to edit which buttons are available on your blog by adding and removing them. One social profile button that is becoming increasingly relevant to add to a Second Life blog is the Avatar Social Network button.

Avatar Social Network

Avatar Social Network, as the name suggests is a social networking site for virtual world avatars, and is in fact the fastest growing site of its kind. As you would expect, it has pretty much all the features of a comparable site such as Facebook, but has the added feature of paying its members for their on site activity. This page explains in more detail why Avatar Social Network have chosen to do this .

As Avatar Social Network (or ASN as it is often called) continues to develop and its members continue to grow its social profile button on your blog becomes a must have feature, so this tutorial demonstrates how quickly and easily it can be added.

Before you add the button however, go to ASN and sign up if you don't already have a membership.

Adding The ASN Button To Your Blog

The first thing to do is right click on the icon above and select 'Save Image As' to save it to your hard drive. Then upload it to an image hosting site such as Photobucket and copy the code for direct link layout.

Creating The Button Code

The code for a social profile button looks like this:

<a href='http://www.avatarsocialnetwork.com/profile/Lusus' target='_blank'><img alt='Avatar Social Network' src='http://i61.tinypic.com/2xxxx.jpg' title='Avatar Social Network'/></a>

To create the text for your own button:

1/ Go to your profile page on ASN and copy the Url.

2/ Replace 'http://www.avatarsocialnetwork.com/profile/Lusus' with your Url, but keep the quotation marks.

3/ Now replace 'http://i61.tinypic.com/2xxxx.jpg' with the url of the button mentioned above. Again, keep the quotation marks.

4/ You now have the code for your button. Drag you mouse over the entire code and copy it.

Adding the Button To The Blogger Template

The final stage is simply to paste the code for the button in the correct place in your Blogger template. You will need to edit your template here, so first make a backup of it by clicking the Restore/ Backup button.

1/ Sign in to your Blogger Dashboard and from the drop down list to the right of your blog's name select Template. Now click on the Edit Template button.

2/ Scroll down the template code until you find lines like above (click to enlarge the image).

3/ You can add the ASN button to your sidebar buttons by pasting it at the end of the code, or you can decide where you want it to show on your blog.

4/ If you look closely at the text you'll see names such as Facebook, Google+ etc, Decide which of these buttons you want the ASN button to appear after then look for this:

</a>

which signals the end of one button. Paste the code for the ASN button after this.

5/ Click the 'Save Template' button and you are done.

The ASN social profile button should now appear on your blog sidebar along with the Facebook, Twitter and Google+ buttons. Not only will you be able to easily access your own ASN profile, but so will all of the visitors to your blog. You can quickly see how this works by clicking on the ASN button in the sidebar here.

Lusus-art