Category Archives: Blogging

Adding Forms to WordPress.com posts

A relatively new feature on WordPress.com are forms. You have been able to add a poll to a post for some time via the Polldaddy button but now you can add a form to post using the last button on the media bar (next to the polldaddy button) above the text input box:

Add media buttons

The obvious form to create would be a contact form to collect readers details but as you can add many different sections they can be used to collect lots of different sorts of information:

This is clearly adding functionality similar to Google Forms and Survey Monkey and although it is not as functional as these other forms (e.g. no multiple choice boxes) it is a nice start and could be an excellent solution for straight forward form especially as it is so easy to add in to a blog post.

Advertisements

Creating Social Badge Widgets for a Hosted WordPress.com Blog

I was recently asked about my small collection of social badges on the top of my blog in the sidebar. These are created by the excellent WordPress plugin SocialGrid:

socialgrid

The question related to how to get a similar grid for blogs which are hosted on WordPress.com like the ‘Training Blog’ you are reading. Although essentially the same software, as I host my own WordPress blog, I can add plugins like SocialGrid but on a WordPress.com hosted blog you can not install plugins. You only have the options of the widgets available. You can add your own code to a widget via the basic but very flexible ‘Text Widget’ although it will not allow javascript which many of the social sites use to create collections of badges. However it does allow you to write your own HTML code (the language of web pages) so I thought I would have a go at recreating my SocialGrid style badges in a HTML table for WordPress.com even using the same great social media icons which are freely available (feel free to leave them a donation).

I have a few WordPress.com sites but used this one I set up for some WordPress.com training courses put on by OutserveWeb the web training company I work for. The end result looked like this and I have put the code below if it helps anyone.

wpsocialbadgers

Change the links and the image urls of course and copy the code into the text widget and drag to your sidebar, images can be uploaded directly through the Media options in your WordPress.com blog. It should be relatively easy to change the grid from 2 x 4 or use other or different size icons.

HTML code:

<table> 
<tbody> 
<tr> 
<td><a href="http://twitter.com/outserveweb"> 
<img class="aligncenter size-full" title="twitter" src="https://outtraining.files.wordpress.com/2011/01/twitter_32.png" alt="twitter" width="32" height="32" /></a></td> 
<td><a href="http://facebook.com/outserveweb">
<img class="aligncenter size-full" title="facebook" src="https://outtraining.files.wordpress.com/2011/01/facebook_32.png" alt="" width="32" height="32" /></a></td> 
<td><a href="http://www.linkedin.com/company/outserve-limited">
<img class="aligncenter size-full" title="linkedin" src="https://outtraining.files.wordpress.com/2011/01/linkedin_32.png" alt="linkedin icon" width="32" height="32" /></a></td> 
<td><a href="http://www.youtube.com/user/outserveweb">
<img class="aligncenter size-full" title="Youtube icon" src="https://outtraining.files.wordpress.com/2011/01/youtube_32.png" alt="Youtube" width="32" height="32" /></a></td> 
</tr> 
<tr> 
<td><a href="http://www.delicious.com/philoakley">
<img class="alignnone size-full" title="delicious" src="https://outtraining.files.wordpress.com/2011/01/delicious_32.png" alt="delicious" width="32" height="32" /></a></td> 
<td><a href="http://www.flickr.com/photos/oakleyfamily">
<img class="alignnone size-full" title="flickr" src="https://outtraining.files.wordpress.com/2011/01/flickr_32.png" alt="flickr" width="32" height="32" /></a></td> 
<td><a href="http://www.google.com/profiles/philip.oakley">
<img src="https://outtraining.files.wordpress.com/2011/01/google_32.png" alt="google icon" title="google icon" width="32" height="32" class="size-full" /></a></td> 
<td><a href="https://outtraining.wordpress.com">
<img class="alignnone size-full" title="friend" src="https://outtraining.files.wordpress.com/2011/01/rss_32.png" alt="rss icon" width="32" height="32" /></a></td> 
</tr> 
</tbody> 
</table>

BTW if you want to show code in your blog post as above on WordPress.com you will need to use the sourcecode tags otherwise it with be see as HTML and translated by the Web Browser

Adding your WordPress.com posts to your Facebook Page

This post should show you how to post any publicly readable RSS reed to a “Facebook Page”. There are many ways to add RSS updates to your personal profile but to add to Facebook Business Page.

  1. First find your WordPress Blog’s RSS feed If this is a WordPress hosted blog on WordPress.com then if your blog is example.wordpress.com then feed is usually example.wordpress.com/feed. You can always test this by putting your blog address followed by “/feed” in your browser’s address bar and you should see a list of your last posts
  2. On you Facebook Page click edit pageedit-page
  3. From the list of applications go down no “Notes” and click Edit.Edit Notes
  4. From left hand side again click “Edit import Settings”edit-import-settings
  5. Finally enter the RSS feed address we found at number 1 into the RSS box.enter-RSS-URL

This should work for any RSS feed but unfortunately it will only work for as there is no option currently to add another RSS feed after the first.

The WYSIWYG editor in WordPress.com

When entering a new post for WordPress.com on the website you will be using their WYSIWYG editor with a main row of icons. Some of the icons will be familiar to you is you are used to using word processors . The main buttons are explained in order below

WYSIWYG editor

Bold

Italics

Strike through

  • Bulleted
  1. Numbered

Blockquote – normally used for text quoted from a person or  website

Formatted Left

Centred

Formatted Right

Link to another site or page  e.g. bbc.co.uk

Break the link  – bbc.co.uk

Continue reading

Create Polls on WordPress.com

Using the poll button (highlighted below) from the upload toolbar WordPress.com can quickly and easily embed online polls powered by polldaddy

Upload toolbar

Upload Toolbar

Bookmark and Share

Embedding Video in Posts

Lets face it a screen full of text, no matter how interesting and creative, does not attract most people while surfing the web but a good picture or even a video can catch someones eye and get them reading.

As you can see from the example posts on this blog I would recommend at least one image on each post.

Here I am showing how an embedded video can make a post more interesting. The video below is direct from wordpress.com and is about there iphone client which allows you to blog directly from the ever popular Apple Iphone. This blog was embedded by uding the supplied code of  wpvideo Bh7FJ4Qg between sqaure brackets (e.g [wpvid????])

Or if you prefer you can embed a video from Youtube, Google Video or Daily Motion using the upload Video icon or using the text format suggested below:

Embed Video

Embed Video

An example Youtube video about blogging:

Or if you prefer you could pay for the Video upgrade and upload your own videos. You can also upload you videos to Youtube (or any of the other supported sites) adn embed in the usual way.

Welcome to OutTraining’s Blog

The OutTraining Blog is an example of a wordpress.com blog. This is the is the first post of the blog which is often used to set the scene, explain what the purpose of the blog is and what the reader can expect to find here.

It is recommended that Categories and Tags are used from the first post.

Categories

Categories are usually used to group posts together into related sections although they can be used however each blogger see’s fit and if preferred not at all. In this example categories will be setup for the main areas of interest (e.g. Training, Blogging, Social Media). Posts, if required, can be posted to multiple categories but it is often recommended that only one category is used:

Categories

Categories

Tags

Tags are usually used to add a more granular description to the post adding words that are related specifically to that post. so in the case of this post they could be wordpress, blogging and tutorial:

tags

tags

Tags can make more sense over time as they seen over a group of posts a ‘tag cloud’ is often used in the sidebar as a representation of the blog in tag form. Tags are being used lots of areas to allow seay earching of photos, documents as well as blogs and micro blogs (e.g. Twitter).

Not only will tags and categories become part of the navigation and arhitecture of your blog but it will help people find your posts and blog in search engines like Google. Using cateogories and post titles in your web pages will also help you being found.