Adding Facebook Like Button to Posts

February 18, 2012 Blog No comments

I recently added Facebook like buttons to each of my posts and was surprised at how easy it was. There is no need to install plugins because it’s very simple.

  1. Go to Facebook and get the code to make the like button: https://developers.facebook.com/docs/reference/plugins/like/
  2. Copy the code from part one and go to your WP Dashboard under Appearance -> Editor
  3. Select your theme on the top right dropdown.
  4. Click header.php from the list of files.
  5. Paste the first code after the <body> tag.
  6. Update that file.
  7. Open index.php and find the loop. It should look like this:
  8. Go back to Facebook and copy the second code.
  9. Paste it inside of the loop at the end of the “entry” div.
  10. Replace the data-href URL with <?php the_permalink() ?> and that will generate the URL for that post.
  11. Update that file.
  12. Open single.php and find the loop and do steps 9-11 again.

Pretty simple. I also recommend checking out the WP Facebook Open Graph protocol plugin http://wordpress.org/extend/plugins/wp-facebook-open-graph-protocol/

Share on Twitter

Mobile WordPress Theme

February 17, 2012 Blog 2 comments

My goal for today was to make my blog mobile. A site should not just be developed for desktops. “With the galloping development of modern technologies the screen size margin of liljoshmobile.pngyour readership can be anything in-between a 30″ desktop monitor and the iPhone’s 3.5″ screen.” Speckyboy.com

For this, I used a popular plugin called “WPTouch”. To install WPTouch:

  1. Login to your WordPress Dashboard
  2. Click Plugins -> Add New
  3. Search for “WPTouch”
  4. Install and activate the plugin
  5. Click Settings -> WPTouch
  6. In the general settings I left most of the options except I unchecked “Show Author’s Name”, “Show Categories”, and “Hide Excerpts”
  7. Update your footer message.
  8. In advanced settings I unchecked “Enable Categories tab in the header”
  9. In the Icon Pool create an icon (59x60px) and upload the icon (you will need to scroll down and save options after you upload the icon)
  10. I didn’t like the pinstripe background because it didn’t match my site, so I opened Dreamweaver and edited /wp-content/plugins/wptouch/themes/default/style.css and around line 2068 I changed the background.
  11. You may also want to change the site title font. In the same stylesheet the style is around line 193.
  12. Since I’m using Google web fonts, I had to modify the WPTouch core header file /wp-content/plugins/wptouch/themes/core/core-header.php and add the reference to the Google font before the ending </head>
  13. I also added more fonts to the WPTouch plugin settings by editing /wp-content/plugins/wptouch/html/style-area.php around line 81

    which will appear under Settings -> WPTouch

    *Remember if you are adding Google web fonts you will need to add the reference in the core-header.php file.

If you have any questions, leave a comment. To learn more about WPTouch see http://wordpress.org/extend/plugins/wptouch/

Share on Twitter

WordPress Live Search

February 16, 2012 Blog 3 comments

Today I added a Live Search (or autocomplete) plugin to my blog and I’d like to create a short tutorial for how you can add Live Search to your WordPress blog.

  1.  Login to your WordPress Dashboard and add this plugin “Dave’s WordPress Live Search”
  2. Activate the plugin.
  3. Go to Settings -> Live Search
  4. Decide how many results you want to display (I set mine to 5)
  5. If your search is near the top leave the direction as “Down” (you may try experimenting but most likely leave as “Down”)
  6. Check “Display Post Excerpt” and leave the other 3 unchecked
  7. Leave the default style as gray.
  8. Save Changes
  9. Most likely the width of the search box will be off so go to Plugins -> Editor and select “Dave’s WordPress Live Search” from the top right drop down.
  10. Click daves-wordpress-live-search/css/daves-wordpress-live-search_default_gray.css from the list of plugin files.
  11. Change the width in ul.search_results to match your search box.
  12. Make any other style changes you’d like and click update file.
  13. That’s it! You now have a working live search box!

If you want to know more about this plugin, see http://wordpress.org/extend/plugins/daves-wordpress-live-search/ 

Share on Twitter

Page 4 of 6« First...23456