Walker News » Wordpress http://www.walkernews.net A capsule of walker's experience in life... Sun, 29 Jan 2012 16:29:08 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 How To Finetune And Add Google +1 Button To HTML Or WordPress? http://www.walkernews.net/2011/07/04/how-to-finetune-and-add-google-1-button-to-html-or-wordpress/ http://www.walkernews.net/2011/07/04/how-to-finetune-and-add-google-1-button-to-html-or-wordpress/#comments Sun, 03 Jul 2011 16:10:55 +0000 Walker http://www.walkernews.net/?p=8204 official wizard helps one to easily create Google +1 button for embedding in HTML or WordPress powered site, but you might want to tweak the Google +1 button for better page load performance.

Firstly, the default Google +1 button code generated by wizard requires web browser to load JavaScript from HTTPS source. As you may know, loading HTTPS content requires stable Internet connection. If there are too many packet loss (e.g. ping result shows “Lost” of more than 5%), the page content from HTTPS source will likely wait forever to complete or the worst situation is nothing rendered at all!
If you ever experience Gmail shows loading problem and then it prompts you to select “Load basic HTML for slow connection”, you may understand the pain of accessing HTTPS content over a troubled connection.

If your page is not sourced over HTTPS (most blogs and websites are not), then you should finetune Google +1 button code to load plusone.js from “http” instead of “https”, i.e.:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Note, if your page is loaded over HTTPS, then you should use the default +1 button code, otherwise some web browsers (e.g. Internet Explorer) might display security warning when loading mixed content.

Secondly, try not putting plusone.js script at header section of HTML or at beginning of article, for the sake of page load performance. Say there is issue to load plusone.js, it might impact overall page load if that JavaScript is loaded first (since it’s in the header section) before the rest, most importantly the main content.

So, the best place to embed Google +1 button, if possible, is at footer section (e.g. footer.php of WordPress powered sites) or at section where it’s loaded after main/important content, for reading pleasure.

Thirdly, use href to explicitly specify page URL to +1. The first attempt of plusone.js is to detect the href value of “g:plusone” and the fact of parsing link rel="canonical" tag is likely incur overhead (additional step to check for alternate source of page URL) and the parsed value is subject to accuracy of canonical value (added by WordPress, for example).

Lastly, use explicit load for performance reason too (with reference to +1 button API documentation), e.g.:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">{"parsetags":"explicit"}</script>

Note, this “explicit load” value of parsetags requires you to call either gapi.plusone.go(container) or gapi.plusone.render(container) method to render +1 button.

So, here is this complete example of Google +1 button code created with performance in mind (replace the page_url accordingly, e.g. uses get_permalink($post->ID) of WordPress to get current page URL):
<div id="gpon">

   <script type="text/javascript" src="http://apis.google.com/js/plusone.js">{"parsetags":"explicit"}</script>

   <g:plusone count="false" href="page_url"></g:plusone>

   <script type="text/javascript">gapi.plusone.go("gpon");</script>

</div>

You may use the official wizard to customize +1 button, such as size and whether to display count or not (my example explicitly disable +1 count):

Customize Google +1 button for websites.

Then, replace <g:plusone count="false"></g:plusone> with the line generated by wizard according to your customization (but remember to include the “href” value of g:plusone).
]]> http://www.walkernews.net/2011/07/04/how-to-finetune-and-add-google-1-button-to-html-or-wordpress/feed/ 0 How To Find A WordPress Blog RSS Or ATOM Feed URL? http://www.walkernews.net/2011/01/16/how-to-find-a-wordpress-blog-rss-or-atom-feed-url/ http://www.walkernews.net/2011/01/16/how-to-find-a-wordpress-blog-rss-or-atom-feed-url/#comments Sun, 16 Jan 2011 13:33:01 +0000 Walker http://www.walkernews.net/?p=6436
When setting up Feedburner service, for example, it will ask for the feed URL. So, where is it? Where to find the feed URL? How does it look like?

With reference to WordPress Codex (official documentation), the supported feed URL of a WordPress-powered blog are as such (replace “example.com” to your blog home page URL):
RSS 2.0 (default):

http://example.com/?feed=rss2

http://example.com/feed/rss2/

http://example.com/feed/
RDF/RSS 1.0:

http://example.com/?feed=rdf

http://example.com/feed/rdf/
RSS 0.92:

http://example.com/?feed=rss

http://example.com/feed/rss/
ATOM feed:

http://example.com/?feed=atom

http://example.com/feed/atom/

As you can see, the easiest to remember feed URL is probably the 3rd sample of RSS 2.0 feed.
]]> http://www.walkernews.net/2011/01/16/how-to-find-a-wordpress-blog-rss-or-atom-feed-url/feed/ 0 2 Ways To Add Facebook Like Button With Comment Box To WordPress http://www.walkernews.net/2010/11/23/2-ways-to-add-facebook-like-button-with-comment-box-to-wordpress/ http://www.walkernews.net/2010/11/23/2-ways-to-add-facebook-like-button-with-comment-box-to-wordpress/#comments Tue, 23 Nov 2010 06:53:10 +0000 Walker http://www.walkernews.net/?p=5917
If you would like to add this new Facebook Like Button to WordPress blog, here are two different ways to get it done in minutes, even WITHOUT installing a WordPress plugin.
With reference to Facebook Social Plugin guide, comment box only available for the iframe version of FB Like Button that uses “standard” layout style with a width of at least 400 pixels. As for the XFBML version, there is always an option to add a comment.

In addition, the page URL must be encoded to RFC 1738 format.

Uses functions.php

Edit functions.php of active WordPress theme to add this block of PHP code (to automatically append the FB Like Button to post content):
add_filter('the_content','wfblike');

function wfblike($incontent){

  $FbLike = '<iframe src="http://www.facebook.com/plugins/like.php?href=' . rawurlencode(get_permalink()) . '&layout=standard&show_faces=true&width=480&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:480px;height:80px;" allowTransparency="true"></iframe>';

  if ($post->post_parent || is_single())
    $incontent = $incontent . $FbLike;
  return $incontent;
}

The rawurlencode is standard PHP function used to encode or convert hyperlink to the required RFC 1738 format.

If there is no such functions.php file in active WordPress theme folder, just create one with these two lines:
<?php
?>

Then, insert the block of code in between the <?php and ?>
Using comments.php

If visitors will leave a comment for the post, they might prefer to share their thought about the page on Facebook :-)

Of course, you can use other PHP files in the active theme folder (except for header.php, 404.php...).

Insert this block of code to comments.php file (embed PHP in HTML code, which is different than the one used in functions.php):
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>&layout=standard&show_faces=true&width=480&action=recommend&colorscheme=dark&height=80" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:480px;height:80px;" allowTransparency="true"></iframe>

Whichever way you'll use, you might also need to use some CSS syntax to control the iframe appearance on your theme.

If this is trick is too hard for you, then get a WordPress plugin or buy me a coffee to do it for you :-)
]]> http://www.walkernews.net/2010/11/23/2-ways-to-add-facebook-like-button-with-comment-box-to-wordpress/feed/ 0 How To Add Facebook Share Button To WordPress Post Page? http://www.walkernews.net/2010/11/09/how-to-add-facebook-share-button-to-wordpress-post-page/ http://www.walkernews.net/2010/11/09/how-to-add-facebook-share-button-to-wordpress-post-page/#comments Tue, 09 Nov 2010 06:51:08 +0000 Walker http://www.walkernews.net/?p=5842
With reference to Facebook documentation, however, the social networking giant suggests users to use FB Like Button for sharing pages, hints the FB Share Button will be deprecated.

If you still want to consider it, here is this 2-step guide:

1) Open header.php file of active WordPress theme and add this script tag to the line between <head></head> tag.
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>
Putting this script tag at header will get the JavaScript file loads faster so the functions in it are available for calling asap.

2) Open single.php file of active WordPress theme (or the PHP file template in theme folder that generate page of which you want to add the said social networking feature) and insert the FB Share Button hyperlink tag:
<a name="fb_share"></a>
This simple link tag will be converted by JavaScript function (added by step-1) to the FB Share Button for current page URL accordingly.

Note, there are three different styles of FB Share Button available, which can be specified by type attribute (default style is “button” if not specified), i.e.:
<a name="fb_share" type="button">

<a name="fb_share" type="icon_link">

<a name="fb_share" type="icon">

For those who are interested to create own button style, please use this hyperlink link template for the <a></a> tag:
http://www.facebook.com/sharer.php?u=<Encoded URL>&t=<Encoded title of content>

For WordPress, the encoded URL can be easily generated by rawurlencode (PHP function), i.e.:
http://www.facebook.com/sharer.php?u=<?php echo rawurlencode(get_permalink()); ?>&t=<?php echo rawurlencode(get_the_title()); ?>

That is all you need to do for adding the FB Share Button on WordPress. If you want FB automatically include excerpt or portion of content, specific thumbnail of image used in the post, etc, then you might need to include some meta tags required by Facebook in the header section of HTML page :-(.
]]> http://www.walkernews.net/2010/11/09/how-to-add-facebook-share-button-to-wordpress-post-page/feed/ 0 How To Add Facebook Like Button On WordPress Post Page? http://www.walkernews.net/2010/11/07/how-to-add-facebook-like-button-on-wordpress-post-page/ http://www.walkernews.net/2010/11/07/how-to-add-facebook-like-button-on-wordpress-post-page/#comments Sat, 06 Nov 2010 16:42:56 +0000 Walker http://www.walkernews.net/?p=5797 It’s easy as falling off a log if you need to add a fancy Facebook Like Button to WordPress post pages without using yet another plugin that might slower down your blog hosted on a shared server.

Personally, am not favor installing too many WordPress plugins, especially those providing simple tweak that can be achieved easily by adding simple PHP codes to functions.php file in an active theme folder.

So, if you’re adventurous and interested to dirty hands with some simple PHP coding, please allow me to show you how to get job done for this subject:

1) Log in to WordPress hosting account and open functions.php file in active theme directory for editing. If this file doesn’t exist on your active theme folder, then create the template file initialized with these two lines:
<?php
?>

2) Insert this block of PHP code after the <?php line:
add_filter('the_content','wfblike');

function wfblike($incontent){

  $FbLike = '<div style="margin-top:5px;width:500px;height:25px;background-color:#CACACA;"><iframe src="http://www.facebook.com/plugins/like.php?href=' . rawurlencode(get_permalink()) . '&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=25" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:450px;height:25px;" allowTransparency="true"></iframe></div>';

  if ($post->post_parent || is_single())
    $incontent = $incontent . $FbLike;
  return $incontent;
}
  • The red color block of code is getting from the official Facebook social plugin page. Please refer there for the updated code, if there is one.
     
  • The blue color code is a standard PHP function called to convert or encode the current page URL to RFC 1738 format that is required by Facebook social plugin.

That block of code (above) will append the Facebook Like Button to each of the post content as well as the zoom-in image rendered by image.php (redirected from Image Gallery).

Now, where is the Facebook Like Button for this page? Well, at this time of writing, I don’t use it here, except the Share This Link on Facebook (bottom of page) and WalkerNews.net Fan page (right pane).

UPDATE:
Just added the FB Like Button to bottom of page as matter of personal preference (not because of this trick doesn’t work for this WordPress theme of WalkerNews.net – I assure you the trick does work!).

Additional notes:

1) Please change the CSS properties of DIV tag used in the block of code (above) to suit your theme, or just drop the DIV tag entirely if you want to.

2) Please refer to FB social plugin page (link at above) to update the red color block of code. FYI, the Iframe version of FB Like Button using “standard” layout with a width of at least 400 pixels allows visitor to add comments after click the Like button.
]]> http://www.walkernews.net/2010/11/07/how-to-add-facebook-like-button-on-wordpress-post-page/feed/ 0 Firefox Hotkey Causes Right-To-Left Display In WordPress Post Editor http://www.walkernews.net/2010/06/06/firefox-hotkey-causes-right-to-left-display-in-wordpress-post-editor/ http://www.walkernews.net/2010/06/06/firefox-hotkey-causes-right-to-left-display-in-wordpress-post-editor/#comments Sun, 06 Jun 2010 06:36:13 +0000 Walker http://www.walkernews.net/?p=4743
I don’t know how many (WordPress users) experienced this before, but I have certainly triggered the right alignment for a number of times.

How to change between LTR and RTL text alignment in Firefox?

Firefox hotkey changes the WordPress post editor text align from LTR to RTL mode.

Note, this Firefox hotkey (thus NOT working on IE8 and maybe other web browsers too) is only tested on Firefox 3.6.3:

press CTRL+SHIFT+X together to switch between left and right text alignment, as shown in the animated GIF.
]]> http://www.walkernews.net/2010/06/06/firefox-hotkey-causes-right-to-left-display-in-wordpress-post-editor/feed/ 0 Simple WordPress QR Code Plugin To Create 2D Barcode Of Each Post Page http://www.walkernews.net/2010/02/27/simple-wordpress-qr-code-plugin-to-create-2d-barcode-of-each-post-page/ http://www.walkernews.net/2010/02/27/simple-wordpress-qr-code-plugin-to-create-2d-barcode-of-each-post-page/#comments Sat, 27 Feb 2010 15:16:12 +0000 Walker http://www.walkernews.net/?p=4169 individual QR Code of each post and page on a self-hosting, WordPress-powered blog.

There is no PHP file to “install” in the plugins directory. You neither have option to configure nor to activate or deactivate the said plugin in Manage Plugins page of dashboard.

All you have to do is edit the functions.php file of the active WordPress theme and append the following PHP code at the end of file content (create the functions.php file, in case it is not exist in your active WordPress theme):
<?php
add_filter('the_content', 'wn_add_qr_code');

function wn_add_qr_code ($rawcontin){

        global $id;
        $wn_postlink = get_permalink($id);

        $rawcontin = '<img style="float:left;margin:0px 0px 0px 0px;" src="http://chart.apis.google.com/chart?cht=qr&chs=60x60&chl=' . $wn_postlink . '" alt="" width="60" height="60" />' . $rawcontin;

        return $rawcontin;
}
?>

The said plugin is activated automatically after saving the change in functions.php file. To deactivate this simple WordPress QR Code plugin (in my view), just delete the appended block of code will do.

WordPress QR Code plugin that can create and display QR Code of each post on the fly while the page is loading.

If you would like to further customize the appearance of QR Code appears in the post page, you can do so by tweaking CSS properties of IMG tag or change the text in red (60×60, value of width and height respectively) should you prefer a different QR Code image size.
I can’t figure out how to precisely display the QR Code next to post title. If you would like the 2D barcode appears in such a way, please refer to previous post.

The plugin, as shown, make use of Google Chart API to create and display individual QR Code of each blog post URL, on the fly while the page is loading. Hence, there is no need to pre-create the QR code and host it at web server for display.

It will work until the Google Chart API stops to allow free access by public. Since the displayed QR Code is fixed size, with respect to the width and height properties of IMG tag, there should be no much interruption to the layout of post page should the Google Chart API stops working. By then, just “deactivate” the plugin :-)
]]> http://www.walkernews.net/2010/02/27/simple-wordpress-qr-code-plugin-to-create-2d-barcode-of-each-post-page/feed/ 2