Showing posts with label Avatar Social Network. Show all posts
Showing posts with label Avatar Social Network. Show all posts
Lusus

Share Buttons For Second Life Social Networks


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>
                        <!--please do not remove this credit -->
<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.

                          <!-- SL Social Share Links-->
<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>
                        <!-- please do not remove this credit-->
  <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>
                          <!-- SL Social Share Links ends-->
 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.
Read More