e-tips-rss-feed

Issues with Anchors in Yola blog posts.

Mon, 18 Jan 2010 15:30:40 +0100

Setting multiple anchors in a blog post may show a problem.

The problem apparent is that it seems to jump out of the current post and out to the route page of the blog. There it sits…. Forever!

Contact with Kershnee at Yola Support resulted in a solution. It appears that the blog setup uses a "base ref" tag. Thus

<base href="http://krooclub.com/http://{www.example.com}/{app}.php" />

An article reference that Kershnee gave me explained the effect of this:
Ref: http://www.ilikespam.com/blog/using-base-href-with-anchors

There are a couple of points that I would like to highlight from that article:

"The purpose of the <base/> tag is to specify the base location for resolving relative urls. It was only ever meant to be used for viewing a page where the document root is not available (for example, from an email) and should technically point to the actual document location, rather than the homepage. However, there are two significant advantages to the latter:
1. Your site can be easily ported to a new location; and
2. Your web applications can be built without any reference to the location they are installed."

But…..

"Unfortunately, there is one downside - it breaks anchor links."

So identification of the problem was made. The solution: to include the path to the blog post either as a relative or an absolute URL.

Relative URL

Absolute URL

Broken:

#anchor

http://www.example.com/app#anchor

Corrected:

page#anchor

http://www.example.com/app/page#anchor

I chose to use the absolute URL fix and it worked immediately.

I would very much like to thank Kershnee for her support and accuracy in solving this issue. As always her communication is top notch and she is always timely in her responses. A very professional responder.

Adding a banner to Yola blog posts

Wed, 18 Nov 2009 18:39:06 +0100

The addition of images to blog posts is a great way of enhancing noticeability and particularly if you are using your blog to market and advertise products. A picture.......
The RSS facility associated with yola blogs transmits images faithfully and completely without degradation. It's a great feature.

There is another way also to add images to blog posts. This method allows automatic insertion in every post. It is only seen if someone clicks the post so there is no "fatigue" aspect of monotony and repetition. It's a once only addition. It is most suitable for logos adn info banners such as website banners.

You just add a line of code to the "Settings" of the "Blog manager". There may also be some code sitting there and it doesn't seem to cause a problem either o the image or to the existing function of the previously added code.

The banner or logo would be uploaded into your file manager either directly in the root file manager or into a folder that you may wish to use. The image needs to be correcly sixed before it is suitable for this use. Something like "MeasureIt", a useful add-on for FireFox is ideal. Measure the height and width of the image as you wish it to be placed in pixel units. Edit you image with some kind of image editor and store it in your file manager for use.

Insert this code into the "Settings" of your "Blog Manager" in the site builder:

<img src="http://krooclub.com/resources/{optional folder}/{image}.jpg" style="margin: 4px; padding: 0px; float: center;">

If you add this as the first entry in the settings area, the image will be the first apparent immediately under the post content.Good luck with this and you can be confident that it will work..... I think! You can see the effect by clicking on the title bar of this post or any other post. You will notice the Krooclub banner immediately under the post and before the DISQUS section.

Talking about duplicate content on my website.

Wed, 04 Nov 2009 00:35:11 +0100

Is this a formal definition? Does duplication harm my site noticeability? Should I do something about it?

The same material published two or more times on the one website is at least duplication. A single small paragraph, statement or diagram is not considered a problem but entire articles, lists, extracts of tables are. Duplication hinders categorising websites for the sake of various indexation , ranking etc.

At the moment duplication is not doing any harm to your site. The strategies are being developed currently as a collaborative effort by a number of website related organisations and companies. Google is undoubtedly well up there and they have released an informative video with Chris Coutts discussing the issue. Well worth the watch if you have an interest. Chris has reassured web-authors that there most definitely is no panic to remedy duplication and that information will be released in a timely manner as the processes are finalised and methods for deployment are agreed upon. There are current methods available with surprisingly simple lines of code. You can view this on Google's resource pages somewhere??

As mentioned there is no panic or urgency to act yet. It's probably worthwhile just getting your head around it. Examining your own sites and identify signifiacnt duplication of content. I'm sure various Q&A's will emerge if tey haven't already and specialist panels and forums will be seen to advise.

Subscribing to the "feeds" on this site

Wed, 04 Nov 2009 00:16:29 +0100

RSS has been promoted as the hands off method for subscribing to all feeds. It's a once only process and thereafter you don't need to do anyhting to keep it functioning. RSS subscription has been advocated for the last few years with the knowledge that it will become part of the status quo very quickly.

But there's a hold-up. People are not subscribing through RSS as much as presumed. The reason given is that it is too complex to set up. Many have tried to simplify the process and give good explanations but still only some subscribe by this method. Now the SEO consultants are promoting a dual hand approach allowing subscription by RSS or by email. They have become so adamant about this style of doing it that their analysis programs that some have eg: http://www.websitegrader.com will penalise you site ranking by their algorithms if an eamil subscription ad an RSS feed is not available.

A product by Feedburner allows you to use the XML or Atom feed for subscription by email. It's a free service and one recommended as soon as you can.

A clear process for adding attribution to images

Thu, 15 Oct 2009 19:01:13 +0100

With the generosity of subscribers to Flickr for example who allow others to use their images free of charge, we users have a huge resource of excellent images at our finger tips.
The only requirement is compliance with the conditions of the CC license and attribution or referencing the creators work back to them somehow.

It maybe easiest to show the information that is associated with each CC licensed image and work from there.

This image has been taken from Flickr. I simply searched on "Japanese temples" then in the advanced tab I selected "Creative Commons" Licensed images and from the shorter list this was one. I downloaded the image as is and kept the Flickr name. Normally I rename it to something intuitive but for this exercise I am keeping the same.
The next step I took was to scroll down a little on the page and located the "Additional Information" There are some symbols and in blue writing the phrase: Some rights reserved. Clicking the blue writing then opens a page on the Creative Commons site and in the second section under the heading: Under the following conditions:
Within the section "Attribution" there is an easily seen box which when clicked will highlight the attribution conditions and the license details. Copying this and pasting it into Notepad or some non-formatting text editor displays the content contained. This in fact is our data to work with. Don't be put off by it. We don't need all of it.

<div xmlns:cc="http://creativecommons.org/ns#" about="http://www.flickr.com/photos/24443965@N08/2370768914/"><a rel="cc:attributionURL" href="http://www.flickr.com/photos/24443965@N08/">http://www.flickr.com/photos/24443965@N08/</a> / <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC BY-NC-SA 2.0</a></div>
If we break it down a bit we can begin to see what is useful to us.
Let's look at the about: http://www.flickr.com/photos/24443965@N08/2370768914/
The http://www.flickr.com/photos/ is the Flickr site and the general folder for all photos stored.
The next part: 24443965@N08 is the so called "photostream" of the owner of this image. The following number (2370768914) is the image ID within the photostream
The next part of the information: http://www.flickr.com/photos/24443965@N08/ is the display if we placed it in an HTML holder. This is the important attribution data and something we can use directly.
Following on we can see <a rel="license"href=" http://creativecommons.org/licenses/by-nc-sa/2.0/"> Creative Commons don't keep a register of licenses and the license which the owner elects to use with their image is one of a few options. The owner for this image has nominated the license "by-nc-sa" which is explained in the creative commons site.
The requirement for attribution is to link to the owner's photostream and to give the license class plus the details of the conditions of the license by providing a link.

So for the above image we need two key pieces of information:
The owner's photostream address and the Creative Commons License class.
In this case:
Photostream address: www.flickr.com/photos/24443965@N08
CC License Class: by-nc-sa
That's really all we need to annotate the image.

I think very few of us really like additional details on our pages things like Photostream addresses so the way we can reduce this is to place it as a link within the image. That fills the requirements of the license as I read it. I also have found that to include this in a tooltip is a very convenient way of highlighting the fact that it comes from a licensed source.

At this time I am placing the CC license as a badge under the image directly. This highlights again that there are conditions associated with the use and in fact another person who may copy this is required legally to follow the same conditions. Maybe I will change the way I do this in time. For some reason the small badge doesn't get under my skin. I use the badges provided by Creative Commons and each of the badges are hot linked to the CC page describing the conditions of the license.

So:

If you mouse-over the image you will see a tooltip displaying the photostream address of the image, this can be clicked to take you to the collection. If you click the CC badge you will be taken o the specific page for the license conditions specified by the owner. These things are in compliance with the CC license fully.

The code for the work is in two parts. The image with tooltip including the link to the photostream and secondly the badge and CC license.

1. The image coding:

<a href="http://www.flickr.com/photos/{photostream}/"><img style="border:0;" src="{folder}/{sub-folder}/{image}.jpg" onMouseover="ddrivetip('www.flickr.com/photos/{photostream}/','{hex code for tooltip bkgd colour}', {tooltip width in pixels})"; onMouseout="hideddrivetip()"></img></a>

This is the specific code for the image above:
<a href=http://www.flickr.com/photos/24443965@N08/"><img style="border:0;" src="http://krooclub.com/resources/flickr_tutorial/2370768914_4ec1424c96.jpg" onmouseover="ddrivetip('www.flickr.com/photos/24443965@N08/','#013565', 200)" ; onMouseout="hideddrivetip()"></img></a>

2. The CC badge

You need to create a folder where you store images and then copy the CC buttons from the Creative Commons Downloads page. Name them by the License class, ie the characters on each button. This allows for easy assignment.

<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/"><img src="http://{domain where button image is filed}/{folder}/{sub-folder}/{button image file}.png"> (In this case: BY-NC-SA.png)

Finally because the tootltips is a javascript code you need to place the CSS style and the code in an HTML placeholder at the top of your page. This then allows the Tooltip to function.

The link to this code is here
<style type="text/css">
#dhtmltooltip{ position: absolute; width: 150px; border: 2px solid
black; padding: 2px; background-color: lightyellow; visibility: hidden;
z-index: 100; /*Remove below line to remove shadow. Below line should
always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } </style>

<div id="dhtmltooltip"></div>

 (please delete this when pasting into your site. It's part of protecting the code for display)

If you have any queries then please don't hesitate to post back here.

Adding Creative Commons images to your Yola blog.

Mon, 05 Oct 2009 11:32:52 +0100

The variety and quality of images on Flickr is amazing. The search to find a topic or a specific field is now very accurate which is great for the person who wishes to use licensed copies for their own website.

I have found in many cases the quality of the images on Flickr is superior to the commercial royalty free sources. The images have a look of spontaneity and freshness. Generally there are at least a few to choose from and the selection of Creative Commons images is easy.

This really is made possible by the generosity of individuals who wish to share their photos without payment . The requirement being attribution and compliance with the terms of the license. Both these are easy to deal with.
The process in outline is:

Type your search description or keyword(s) into the search box.

This will return all the images classified under your search. It will contain both Copyrighted and Commons licenseimages and videos. Currently there are very few videos compared to static photos.

Scroll right to Advanced Search and click the heading

You will be taken to another dialogue page with various options.

Select the Creative Commons option(s) and scroll a little further down to the SEARCH button and click.

You will now be presented with a similar page of images as shown initially but all these will be licensed to use under a Creative Commons license.

Select the image you would like to review and it will be redisplayed at the published size. If you now wish to keep a copy of this Right click and Save the image with a new name preferably, as the nomenclature used in the catalogue is non-intuitive. Not really an issue if you only wish to use one image but if you are selecting a number then it makes it easier to give the image an intuitive clue.

Record the name of the image in Notepad. Scroll over to the right of the image and you will see the Creative commons heading. Click this.

A redirected page on Creative Commons will be displayed with a description of the license and the specific image license as a line of code. If you click this line of code it will copy then paste it into the Notepad entry. You now have the information required for attribution of the image. (It seems as if it doesn't copy on click with FireFox but by right click and Copy it works).

You can now paste the image into your Blog post and below paste the line of code as HTML. On display your image will show and underneath this will be the attribution and Creative Commons License. The font size and colour is able to be varied using the blog text tools available.

http://www.flickr.com/photos/liberato/ / CC BY-SA 2.0

About Creative Commons.

Creative Commons is a system of licensing which enables the owner to license their work for free use with a choice of various conditions associated with the work. So it allows an owner to share their work and have this work attributed to them. They may also state for example that the work may or may not be used for commercial purposes, may or may not be modified. Creative Commons

Installing a customised RSS feedbutton (RSS chicklet) onto your site.

Tue, 06 Oct 2009 00:37:55 +0100

Yola for example have an RSS chicklet available on any "blog" page and simply by clicking and dragging this chicklet onto your page, the RSS subscription button or chicklet is installed, configured and ready to go as soon as you re-publish (update) your site.

The chicklet supplied is a recommended standard RSS chicklet and is instantly recognisable. Fortunately the concentric three wave lines have been adopted by many RSS chicklet designers as the central theme for the myriad of cutomised icons out there, so in fact many are intuitively recognised despite colour and design.

There are some very artistic creations of RSS chicklets around the web and the creativity of their designers is amazing. For example:

To place any of these or others, you take note of the image file name and the folder(s) then drag an html widget into the place where you wish to place the chicklet. The next step is to add the code into the HTML widget:

<a href="full URL of your RSS feed" (eg:"http://ediblyasian.yolasite.com/recipes.rss")><img src="url of your RSS chicklet that you wish to embed"(eg:"http://ediblyasian.yolasite.com/resources/buttons/28.png" )title="{an optional title for the chicklet} " alt="(an alternative description of the chicklet in case the image doesn't show and great for SEO requirements)"eg:"RSS link dock recipes-rss" style='width:50px; border:none; align:left;'></a> {The 50 px statement here is the width of the display of your chicklet and may be adjusted to suit your page style}

Simplified:
<a href="full URL of your RSS page"><img src= "relative or full URL of the image of your RSS chicklet" title="{optional title of your chicklet}" alt="alternative decription of the image" style='width:nnpx; border:(style) align:(style;'></a>

Specific example:
<a href="http://ediblyasian.yolasite.com/recipes.rss"><img src="http://krooclub.com/resources/buttons/28.png" title=" " alt="RSS link dock recipes-rss" style='width:50px; border:none; align:left;'></a>

Support the new user subscribing to your RSS feed.

Sat, 12 Sep 2009 22:31:56 +0100

For the initiated it almost seems intuitive and a funny question t ask. For the vast majority of new users, subscribing to an RSS feed is confusing,frustrating and difficult to understand.

It really is a round about process and poorly designed. Questions from a potential subscriber usually hit in two waves. "What is this RSS? "and "when I click the RSS button I get redirected back to the page" or "I can see a lot of unformatted text."

The process is not about to change in the immediate future and more and more users want to subscribe to various RSS feeds. I think that we can be pro-active in this regard and make available a description of the "What is ...?" and a good description of "How to ...". It should be right there next to the RSS chicklet and the options for RSS Readers should be stated clearly. It is sad to lose subscribers after working so hard to promote our work simply because they find the subscription process too complex and confusing and the communicating supportive instructions easily created by the web author.

One I have recently come across, on a Mexican food site, has a small box with a question mark and clicking the mark describes the RSS and an outline of the process of how to subscribe. Clicking onto this opens a Tooltip kind of arrangement and describes the process for the user in straight forward language for both generic readers and familiar web-based names of various RSS readers that are commonly employed. This is a clever approach and really takes out the intimidation and hard effort factors immediately. I think worth while considering for all web sites with RSS feeds included.

Here is the example mentioned:

[?] Subscribe To This Site

This is a functional demonstration so please feel free to have a good orientation around it.

The text itself is placed in a new separate page of a Yola site for this example and given a name such as RSS.

There are two (2) blocks of code that need to be placed on this page both in HTML widgets. :

The first block of code should be set at the highest part of the page:

body {

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:11px;

}

#wrapperRSS {

width:85%;

background:#eee;

margin:12px auto;

}

#explainRSS {

border:4px solid #006;

padding:0 12px;

}

</style>

The second block of code in a separate HTML widget following the first and containing this code:

<divid="wrapperRSS">

<a href="#" onclick="window.close()">Close Window</a>

</p>

What Is RSS?

</h2>

<p>

Click on any RSS button to get the latest blogs from www.krooclub.com or any other RSS feeds on the Web (they're everywhere nowadays) to get newsfeeds from CNN, BBC, Yola or just about anything else.

</p>

<p>

Once you get started, it's like having your favorite parts of the Web come to you. No need to go out and check for updates all the time. No need for bookmarks!

</p>

<p>

"RSS" means "Really Simple Syndication." But that's just a fancy way of saying that you can keep up with all the updates to www.krooclub.com <em>without having to check the site</em> every week to see "what's new." New pages and updates to old ones are released through RSS.

</p>

<p>

<strong>How do you get started?</strong> Just follow these simple instructions!

</p>

<p>

Download a <strong>free</strong> RSS Reader first (or skip to the bottom to learn about Web-based readers). These are variations of special software that read the RSS feeds...

</p>

<p>

<strong>Windows -- RssReader</strong><br>

<a href="http://www.rssreader.com/" target="_blank">http://www.rssreader.com/</a>

</p>

<p>

<strong>Mac -- NetNewsWire</strong><br>

<a href="http://www.newsgator.com/Individuals/NetNewsWire/" target="_blank">http://www.newsgator.com/Individuals/NetNewsWire/</a>

</p>

<p> or you my already have MS Outlook for example which has a reader built in.

</p>

<p>

Once you're set up, here's all you have to do...

</p>

</div>

<p>

<strong>Right-click</strong> (<em>control-click</em> for Mac users) on the orange RSS button on any page of this site, or any blog or news source that interests you. Select <strong>Copy Shortcut</strong> ("Copy Link to Clipboard" on a Mac), and <strong>paste</strong> that URL into your RSS Reader.

</p>

<p>

That's it! You'll be subscribed.

</p>

<p>

You can also use a Web-based RSS reader, like My Yahoo!, My MSN, or iGoogle/Google Reader. Look for any of these buttons on a page on this site.

</p>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

<p>

Click on that button to add the RSS feed to that Web-based reader. If you don't yet have an account, you can set up one after clicking on the button.

</p>

<a href="#" onclick="window.close()">Close Window</a>

</p>

</div>

For the images labelled "imageX name type", these are for the icons of the various web based readers. You can simply copy them from this post or make your own by searching the relevant sites for their icons.

Spreading the message: Tweetmeme

Sun, 02 Aug 2009 18:01:56 +0100

Casey STUBBS has suggested that I add the Re-Tweet function as an option into the Comments section of the blog posts. It is a very wise and "on the mark" recommendation and I thank him for this.

So now we have a method for doing this also. The process is following on from the previous post and simply adding a couple of lines of script into the Settings section of the DISQUS enabled section.

The reference for the script is here: Tweetmeme Help.

There are a number of options which you can choose from depending on your needs. Please look at these to help you work out the optimal for your site.
The code I have chosen is:
<script type="text/javascript">
tweetmeme_url = 'http://yoururl.com';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

So to install in the Disqus enabled generic platform blogs, select "Blog Manager" from the Edit/Manage options in the builder.
Click on the Settings tab.
Copy the scripts from the Tweetmeme Help page as referenced.
Paste it into the next available line
Select "Done"
Save
Update.

You have now installed the retweet function.

This allows a reader to submit the post as a tweet or in fact a retweet. This has the power of spreading your post into new realms and effecting the much talked about viral nature of Twitter. It all is about increasing readership and noticeability.

Good luck with this Blog Enhancement.

Feed Shark

Adding multiple codes into the DISQUS Settings of blogs

Sun, 26 Jul 2009 02:14:35 +0100

The facility for adding comments using the DISQUS feature also allows you to add extra HTML coding to each post if it's relevant to the process of the comment.

For instance I have installed the DIGG Submit and Vote button via this method. I have also added the pingback facility by placing the relevant code into the DISQUS Settings of the blog. The post is in this blog Installing the Pingback module into DISQUS enabled Yola blogs

Now there is a facility for adding CSS to the comments section of the DISQUS commentaries.

I don't know if there is any absolute limit to the number of code segments that can be added but I wouldn't think that there will be many to possibly add either.