Showing posts with label websites. Show all posts
Showing posts with label websites. Show all posts

Wednesday, October 10, 2012

A Class by Brandon Sanderson

Hidden away at in the middle of a blog post by Brandon Sanderson, he said that the lectures from his creative writing class were all online.

Say what?

So, I went to check them out. And sure enough, there they were. Each lecture is broken into multiple videos separated more-or-less by topic. Many of the videos also have the notes for the class. In a word, it's awesome! (Thanks to WriteAboutDragons for doing all the hard work.)

Want to know how Brandon plots his books? Go here.

How about advice on participating in a writers group? Got that.

Creating sympathetic characters. Meeting agents. World building. Fight scenes. And more and more. In fact, there are over 15 hours of lectures all online for your learning pleasure.

And if you're like me and don't want to click the next lecture each time, I've got you covered.

I created one, massive playlist that will start at the beginning and play all the way through to the end. Of course, you can start anywhere in the playlist and it will happily load the next video and the next. So you can  sit back and enjoy for as long as you want.

You can find the playlist here.

Personally, I'm going through the lectures as I prepare for Nano next month. I'm just past the class where he talks about creating characters and I'm going through the exercises. If your a video learner, and like Brandon's style of writing, you might like his classes, too.

Go ahead and give them a try. It's free.

* They say a picture is worth a thousand words--this picture surely is. It's titled Secrets by Sarah Horrigan. I got sucked into all the wonderful images on her photo stream, it's well worth your time. In fact, I may contact her and see if she'll let me do a whole blog post on her work. It's great.

Tuesday, June 26, 2012

Multiple Like Buttons on a Single Page (Technical Tuesday)

My last post explained how to put a Like button on a web page. That sets us up nicely to explain how to make different Like buttons for different parts of a page.

For example, imagine you have a page that lists all of your books. You could have a Like button for each of them right below the cover image.

Sound good? Let's get going then.

For the purpose of this post, let's say you have a small-to-medium-sized website. It has a home page, a page about you, a page that lists all your books and stories, and a simple form for contacting you. It's nothing fancy, but it's a start. And it looks good.

Because you read my last post, you added a Like button to your home page. Now, you want to add a Like button for each of your books, but you've got a problem. The way the Like button works, it uses the entire page. Even though you put a button next to each book, they all seem to Like the entire page. That's not what you want.

It's a tricky problem, but there is a solution.

Step 1) More Pages

Because you have to Like whole pages, that means you need to create a separate page for each book.

Each page should have the book cover image and your hook (1-2 sentences that describe your book). Fill in the Open Graph tags just the way I explained in my previous article. The page can also have blurbs, snippets, buy links, ISBN, etc. The key is that the page is devoted to the book.

Don't forget to include a Like button on this page.

Step 2) Can You Feel the Like?

Go back to your main books page--the one that has all your books and stories. Add Like buttons to each one just like you did before. The code will look something like this:


<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
...
<!-- AddThis Button END -->


Here's the key. In the first div tag, add the following attribute:


<!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style " addthis:url="http://url/to/your/book/page">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
...
<!-- AddThis Button END -->

That's all there is to it.

Now, when someone uses that Like button, it will like the book page just as if they clicked the Like button on the book page itself.

This will work for anything. Just setup a page for the thing you want Liked. Then create a Like button using the page URL. This button can be used on as many different pages as you want.

So, what do you Like? Let me know in the comments.

* Wow! I didn't even know this monument existed before today. It's the monument set up in the square where the Nazis burned books. This particular photo was taken by Chang'r and can be found on Flickr.

Saturday, June 23, 2012

How to Add a Facebook Like Button to a Webpage

It's not Tuesday, but this will be a technical post. A few people have asked me about adding Facebook Like buttons to web pages.

Step 1) Facebook and Twitter and Bears, Oh my!

There are so many social networks these days, which ones do you choose?

We've got the big guys: Facebook and Twitter, but what about LinkedIn, Pinterest, Google+, Reddit, Tumblr, and StumbleUpon?

Not to mention a metric slew of sites that aren't as popular, or aren't as social, but still have fans who might want to share your stuff:
Blogger, Digg, Buffer, Bitly, WordPress, Posterous, Orkut (are they still around?), MySpace (are they still around?),  FriendFeed, Evernote, and dozens more.

*The metric slew is a unit of measure for those who want to sound precise but who really have no clue how much they are talking about.

I'm recommending you go out to AddThis and grab their code. AddThis is used by some big sites. They are simple to use and have a lot of ways to tinker with their stuff if you're the tinkering type.

When you download their code, they'll ask you to create an account. It's not required, so if you want to try them out first, that's fine. Just dismiss the sign-up window.

Here's three examples of their stuff. (The following examples are setup for web pages, so they don't work as effectively on my blog, sorry. I'll do another post specific to blogs in the future.)








Note: AddThis isn't paying me anything to promote them. For some reason, companies don't want to give me money to promote them. *sigh*

Step 2) Huh?

Have you ever gone to like a webpage and Facebook decides it wants to use the "Email Me" picture of a giant @ sign instead of the site logo, or the description that comes up is the "About the Author" text instead of the first paragraph of the page? Frustrating, isn't it.

You solve these issues for your site using Open Graph tags. These are meta tags you include at the top of your html page that help Facebook and other sites figure out what's most important.

Now, open up your page to edit it and include the following meta tags at the top in the <head></head> section:

  <head>
    ...
    <meta property="og:title" content="***PAGE TITLE HERE***"/>
    <meta property="og:type" content="***CONTENT HERE***"/>
    <meta property="og:url" content="***URL HERE***"/>
    <meta property="og:image" content="***IMAGE HERE***"/>
    ...
  </head>

These tags tell Facebook what title, url and image to use when someone likes your page. The og:type is also interesting, there are a lot of options including "article", "author" (when you're bragging about yourself), "book" (when you're promoting your book), "cause" (when you're spreading the word for your favorite charity), "activity" (when you're announcing your book release party), and quite a few more.

And that's all you have to do. Go ahead and try it out and let me know how it works for you.

Wrap Up

Now you can help Facebook and other sites know how to share your web pages.

In my next blog post, I will show you what you need to do if your page has many different things you want to like. For example, if you have a bunch of different images or videos or quotes and you want people to like each one separately.

Until then, let me know if these steps were helpful for you in the comments below.

* Ah, the open road. There's more to this picture taken by Takver and posted on  Flickr. Especially check out Takver's  holiday set and protest pictures.

Tuesday, October 18, 2011

Putting Boxes Around Text (Technical Tuesday)

Let's go outside the box . . . and inside the box. In fact, let's talk about the box itself. I've had a few people ask me how I put boxes around text.

Like this.

It's not hard to do, and I've made a tool for you to quickly create your own.

Note: This tool may not show up in a news reader. You'll need to visit the blog.



There are some basic instructions included with the tool. If you need more details, I've got your back. Read on.

Box Content

You can type as much text as you want into the box.

You can also put HTML in there. This means that you can have images, buttons, multiple paragraphs, whatever.

Widths

There are three widths you can control with this tool.
  • Border Width: The thickness of the line.
  • Inside Padding: The space between the line and the text inside.
  • Outside Margin: The space between the line and everything outside.
Here's a quick graphic that may make more sense, or you can just play around with the settings. As you change them the Preview will be updated.


Colors

All that's left is choosing some colors.

Get the Code

Now that your box looks just right, switch to the "Get the Code" tab. There you can copy the code and paste it into the HTML view of your blog post. You can also use this code on your website.

Happy Boxing.

* Origami is one of my wow-I-wish-I-could-do-that-but-not-enough-to-actually-practice skills. So when I see things like this decorative box, I'm in awe. And Dominic Alves did a great job photographing it. You can find it and others on Flickr.

Friday, June 24, 2011

Pottermore: Awesomeness or Meh?

The other day @MarionJensen asked on Twitter if we thought Pottermore was #HUGE or #yawn. I couldn't fit my answer in 140 characters, so here goes. 

Will Pottermore be a popular internet destination and continue the Harry Potter empire? Yes.

Will the affects of Pottermore be felt across the publishing industry? Probably.

Will Pottermore change the face of publishing and be the death knell of traditional publishing? No.

Let me just say, there is a lot to #yawn about, but there is also potential for #HUGE awesome.

Before I go on, you need to know that everything I've seen so far looks cool. The screenshots are beautiful and remind me of the artwork from the US covers, but not too much. The descriptions of the site and how it will work sound great. And we can buy the eBooks! I may not qualify to be in the first million to sign up in July, but I'll definitely be there when it opens up to everyone. I mean, it's HARRY POTTER. I know there are people who aren't fans out there, but face it, you're in the minority. Sorry.

With that out of the way, let's look at what J.K. Rowling is doing with Pottermore.

She is setting up a website that enhances her books. #yawn. This has been done so many times.

The website will have interactive games that tie in with the books. #yawn. Again, been-there-done-that. In fact, crossovers from books to games to movies to TV to t-shirts to household items have been going on for a long time.

The website will have a social network component where people can interact with each other. #yawn. Everything today is becoming a social network.

She is partnering with Sony to create the site. #yawn. Don't get me wrong. Sony is a big company with years of experience producing some great games. If Sony wanted to create a site for me, I would be ecstatic, (Note to Sony Execs, I'm available via email, Twitter, and Facebook.) but anyone with enough money and a big enough platform could do the same thing. It's not revolutionary, so #yawn.

She is releasing the eBooks on her website. #yawn. Yes, they are Harry Potter books, but really, how many authors have released eBooks on their websites? Just this week?

"But wait!" you say, "Where's the #HUGE you talked about?"

I'll tell you.

While nothing about Pottermore is especially groundbreaking by itself. It's fascinating when you put it all together. I'm not privy to the internal details, but I'm guessing this is how it will go down.

She'll release the first book on the site with the games and social aspects that go along with it. There will be a flood of people visiting, some will buy the books, some will play the games, and some will stick around. Several months later (maybe a year), she'll release the second book along with an update to the site. Media blitz. Even more people go to the site, more people experience the games, more people stick around. This goes on for three to seven years. During that time, she not only has eBook sales and plenty of news hype, but she also has a loyal following of people signed onto Pottermore. She has statistics the likes of which marketers would die for. She has a direct communication network with her most loyal fans, and a social structure to keep them united and energized. That is #HUGE.

What about her traditional publishers? I don't think it's doom and gloom for them. Can you say, new releases of the books with special codes in them to get you cool stuff on Pottermore? Even if this doesn't happen, a rising tide lifts all ships. The publishers will see a bump in book sales. Plus, they get to see the results of this big experiment without putting any of their dollars on the line. Let's face it, book publishers aren't (currently) in the business of creating web destinations. If this works, that may change. Or maybe one of these big game companies (who have been doing pretty well lately) may buy up a publisher to get access to their properties. That would be #HUGE.

Pottermore feels more like a step in evolution and not a revolution. I think it's a great step. The recent changes in publishing are exciting and this just adds to the excitement. While I think much of what J.K. Rowling is trying to do is #yawn-worthy, when you put it all together it's #HUGE.

And in the immortal words of Ron Weasely, "Not good, brilliant!"


* Pottermore image © J.K. Rowling
Creative Commons LicenseUnless otherwise noted, all posts on the John Waverly blog by John Waverly are licensed under a Creative Commons Attribution 3.0 Unported License.
* Background image based on Night Sky theme by Ray Creations