Posts tagged tutorial

Integrating Facebook comments with your WordPress site

Feb17th
2012 Leave a Comment Written by Daniel Veazey

One of the changes I’ve made to my blog is adding the ability to leave comments using a Facebook account. There are a couple of advantages to commenting this way. First, the reader doesn’t have to type in their name and email address in the WordPress comments, so that makes it a little bit easier for the reader and therefore a little more likely that he or she will leave a comment. Second, when the reader leaves a comment, should he or she leave the “Post to Facebook” option checked, it gives your website more publicity because it shows up in their news feed and all their Facebook friends have an opportunity to see it.

Now I’m going to show you how to add this feature to your WordPress site.

First go to developers.facebook.com/apps and click the Create New App button. Give this app a name, and ignore the App Namespace field. I named mine “danielveazey.com comments.” Click the checkbox saying that you agree with their platform policies, then click Continue. Type in the Captcha words to prove you’re not a spambot. Then you’re presented with a bunch of mumbo jumbo about App ID and API keys and whatnot.

Now go to developers.facebook.com/docs/reference/plugins/comments/. You should see this:

Put your website’s URL in the first field (you’ll be changing this later in the code, but don’t worry about that now). Set number of posts to how many comments you want displayed by default (I left mine at 2). Set the width to a number of pixels that fits your theme well. For mine, I made it 773, and that goes all the way across the main content area of my single posts. You can choose the light or dark color scheme, then click Get Code.

Now you’re going to get your hands a little dirty. Leave that code there and open a new tab on your browser. You need to get into two files in your WordPress theme, header.php and comments.php. Make a backup copy of these files before you go mucking about in them. From your WordPress dashboard, go to Appearance → Editor. Over on the right, click on header.php. Copy all the code in the editor window and save it to a file on your computer so you can change it back if you mess up. Do the same for comments.php.

In header.php, look for the <body> tag. Right below that line, paste all the code from the first part of the pop-up code that Facebook gave you. Make sure it’s the HTML5 version (it should be by default). It’s at the top of the pop-up window. Now click Update File at the bottom of the editor. Here is an example of what that part of the file might look like:

<body <?php body_class(); ?>>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=221223671306596";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Now open up comments.php and find the line that reads “You can start editing here.” Paste the second piece of code from Facebook right below that line. You should see your website’s URL where it says data-href=”http://blahblahblah.” Where your URL is, you need to replace that with ”<?php the_permalink(); ?>” so the comments will appear correctly.

So the whole line looks like this:

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="2" data-width="773" data-colorscheme="dark"></div>

Click Update File at the bottom of the editor and you’re done. Now the Facebook comments should show up just above where your WordPress comments appear.

If you found this post helpful, please leave a Facebook comment below, or a WordPress comment below that. Or both.

WordPress comments, facebook, wordpress

Everything You Need to Know About Gimp Layer Masks

Jan31st
2011 15 Comments Written by Daniel Veazey

One of the most popular posts on my blog is my Gimp Layer Mask tutorial. I feel like that post doesn’t fully explain everything you need to know about layer masks, so I’m going to try to break it down here, and hopefully by the end of this post, you will be a layer mask master.

What is a layer mask?

A layer mask is pretty much exactly what it sounds like. It puts a mask over a layer of your gimp image and you manipulate it to hide parts of the layer while showing other parts. When you apply a layer mask to an image, the mask itself deals with only black and white, and shades of gray in between. White areas of the mask make those corresponding areas of the layer opaque, and black areas of the mask make the corresponding areas of the layer transparent. Shades of gray make the layer partially transparent. The darker the shade of gray, the more transparent that part of the layer becomes, and the more of the layer below it shows through. Let’s look at an example:

In Gimp, open two photos by choosing “Open As Layers” from the File menu. As you can see on the right in the layers palette, each photo is on a separate layer.

Next, right-click on the top layer and Add Layer Mask. A window pops up that says “Initialize Layer Mask to.” Choose White (full opacity).

A white rectangle appears next to the thumbnail image in the layers palette:

It’s hard to tell, but this white rectangle also has a white border. The white border means that anything you do right now will be applied to the layer mask, and not to the layer itself. Try clicking on the thumbnail of the image on that layer and you’ll see the white border move over the thumbnail. Now any changes you make will be applied directly to that layer instead of the layer mask. Now there are lots of ways you can manipulate the layer mask. you can draw on it with the paintbrush, type over it with the text tool, make a gradient over it, etc. Any black that you add to the layer mask now will make that area of the layer transparent, and you’ll be able to see the layer below it in those areas. I guess I should make it clear that when you make changes here, you’ll be doing it in the main image area, not on the thumbnail of the layer mask. I think you already knew that, but I wanted to make sure. Let’s try drawing with a large, hard-edge brush and see what happens.

Where I drew on the image with black, it masked the area, allowing the layer below to show through. I might sound repetitive, but this is the main point of this post, and if you understand it, then you can do just about anything with a layer mask. In the layers palette, the thumbnail of the layer mask now has a black streak across it where I drew on the image. Now let’s look at how shades of gray affect the layer mask.

Here I made a gradient on the right side of the image, with white on the left end and black on the right end of the gradient. You can see this in the layers palette. In the image, the layer fades out from left to right, corresponding to the gradient from white to black. One more thing, I made a circle in the lower left part of the image with a soft-edge brush, so the mask fades at the edges of the circle.

That is really all you need to know to get started with layer masks. I hope this helps. If you have any questions, feel free to drop me a line on the contact page.

Gimp, Photography Gimp, layer mask

The best way to make a vignette in Gimp

Dec18th
2010 2 Comments Written by Daniel Veazey

Vignettes look cool. There are several ways to create the effect in Gimp. Here is an easy method to make an aesthetically pleasing vignette. You can click on the screenshots in each step to see them larger.

Step 1

Duplicate the background layer on the layers palette.

Step 2

Change the mode of the new layer to Multiply.

Step 3

Right click on the layer and add a layer mask. Choose white (full opacity) for the fill option on the pop-up dialogue.

Step 4

Select the blend tool from the tools palette.

Step 5

Change the shape of the blend to Radial and change the offset to about 30. Changing the offset makes the radial gradient weighted so the change from light to dark takes place closer to the edge of the gradient instead of evenly from center to edge.

Step 6

Click and drag from where you want the lightest part of the photo to be toward the edge of the photo.

Step 7

Admire your vignette.

Gimp, Photography Gimp, vignette