URL shortening is a technique in which a URL is made substantially shorter in length and still links to the required page. This is achieved by using a redirect on a domain name that is short, which links to the web page that has the longer URL.
In this tutorial, I’ll show you how to create a URL shortening plugin for WordPress using Google’s URL Shortener API.
Before we start building a URL shortening plugin let’s see a few examples as to why we may need this plugin:
To use the Google URL Shortener API you’ll need to acquire an API Key. This API key is used by Google to keep track of your application.
Here are the steps to acquire your API key:
Our plugin will contain one directory and one file. Here is the structure:
--url-shortener -url-shortener.php
To make the plugin installable, we put this code in the url-shortener.php file:
--url-shortener -url-shortener.php
We need to create a settings page for our plugin where administrator’s can enter the URL Shortener API key. Here is the code to create a settings page using the WordPress Settings API:
<span><span><?php </span></span><span> </span><span><span>/* </span></span><span><span>Plugin Name: URL Shortener </span></span><span><span>Plugin URI: http://www.sitepoint.com </span></span><span><span>Description: Create's a Shortened URL of every post. </span></span><span><span>Version: 1.0 </span></span><span><span>Author: Narayan Prusty </span></span><span><span>*/</span></span>
We are storing the API key as a WordPress option with the name url-shortener-input-field.
This is what the settings page should look like:
To shorten a long URL you need to send a POST request to the https://www.googleapis.com/urlshortener/v1/url URL with your API key and long URL.
Here’s what a sample request looks like:
<span><span><?php </span></span><span> </span><span><span>function url_shortener_settings_page() </span></span><span><span>{ </span></span><span> <span>add_settings_section("section", "Enter Key Details", null, "url-shortener"); </span></span><span> <span>add_settings_field("url-shortener-input-field", "API Key", "url_shortener_input_field_display", "url-shortener", "section"); </span></span><span> <span>register_setting("section", "url-shortener-input-field"); </span></span><span><span>} </span></span><span> </span><span><span>function url_shortener_input_field_display() </span></span><span><span>{ </span></span><span> <span>?></span> </span> <span><span><span><input</span> type<span>="text"</span> name<span>="url-shortener-input-field"</span> value<span>="<span><?php echo get_option('url-shortener-input-field'); ?></span>"</span> /></span> </span> <span><span><?php </span></span><span><span>} </span></span><span> </span><span><span>add_action("admin_init", "url_shortener_settings_page"); </span></span><span> </span><span><span>function url_shortener_page() </span></span><span><span>{ </span></span><span> <span>?></span> </span> <span><span><span><div</span> class<span>="wrap"</span>></span> </span> <span><span><span><h1</span>></span>URL Shortener Setting<span><span></h1</span>></span> </span> <span><span><span><form</span> method<span>="post"</span> action<span>="options.php"</span>></span> </span> <span><span><?php </span></span><span> <span>settings_fields("section"); </span></span><span> <span>do_settings_sections("url-shortener"); </span></span><span> <span>submit_button(); </span></span><span> <span>?></span> </span> <span><span><span></form</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><?php </span></span><span><span>} </span></span><span> </span><span><span>function menu_item() </span></span><span><span>{ </span></span><span> <span>add_submenu_page("options-general.php", "URL Shortener", "URL Shortener", "manage_options", "url-shortener", "url_shortener_page"); </span></span><span><span>} </span></span><span> </span><span><span>add_action("admin_menu", "menu_item");</span></span>
Here is the sample response looks like:
<span>POST https://www.googleapis.com/urlshortener/v1/url </span><span>Content-Type: application/json </span> <span>{"longUrl": "https://www.sitepoint.com/"}</span>
Note: You cannot send more than 1 million requests using the same API key in a day.
We want to display the shortened URL in a meta box in the post edit screen. For creating a meta box, we’ll use the Meta Box API and for the URL shortening we’ll use the WordPress HTTP API.
Here’s the code to display our shortened URL in a meta box:
<span>{ </span> <span>"kind": "urlshortener#url", </span> <span>"id": "http://goo.gl/fqsT", </span> <span>"longUrl": "https://www.sitepoint.com/" </span><span>}</span>
Here’s how this code works:
This is what the meta box looks like in post edit screen:
We also want to display the shortened URL below every post. Here’s the code to do just that:
<span>function url_shortener_meta_box_markup($object) </span><span>{ </span> <span>$key = get_permalink($object->ID); </span> <span>if(get_option('url-shortener-input-field', '') != "") </span> <span>{ </span> <span>if(get_option($key, "") != "") </span> <span>{ </span> <span>echo get_option($key, ""); </span> <span>return; </span> <span>} </span> <span>$url = 'https://www.googleapis.com/urlshortener/v1/url'; </span> <span>$result = wp_remote_post( </span> <span>add_query_arg( </span> <span>'key', </span> <span>get_option('url-shortener-input-field'), </span> <span>'https://www.googleapis.com/urlshortener/v1/url' </span> <span>), </span> <span>array( </span> <span>'body' => json_encode(array('longUrl' => esc_url_raw($key))), </span> <span>'headers' => array( 'Content-Type' => 'application/json') </span> <span>) </span> <span>); </span> <span>if(is_wp_error($result)){echo "Error"; return;} </span> <span>$result = json_decode($result['body']); </span> <span>$shortlink = $result->id; </span> <span>update_option($key, $shortlink); </span> <span>echo $shortlink; </span> <span>} </span><span>} </span> <span>function url_shortener_meta_box() </span><span>{ </span> <span>add_meta_box("url-shortener-meta-box", "Shorten URL", "url_shortener_meta_box_markup", "post", "side", "default", null); </span><span>} </span> <span>add_action("add_meta_boxes", "url_shortener_meta_box");</span>
This is how this code works:
Here is how it looks on front end:
Now we’re done with building a awesome URL shortener plugin for WordPress!
If you’d like to check out existing plugins, two of the most popular URL Shortener plugins in the WordPress.org Plugin Directory are URL Shortener and WP URL Shorten.
WP URL Shorten uses ref.li to shorten URLs. Ref.li provides real time stats and other traffic information of people visiting your site via their shortened URL.
URL Shortener plugin lets you choose between Bit.ly, Su.pr, YOURLS, Goo.gl and many other services. This plugin can also generate QR Codes.
In this tutorial, I’ve shown you how to easily build your own URL shortening plugin. You can now go ahead and expand on this to add more features such as QR code support and use other URL shortening services. Please share your experience with your own plugins below.
A URL shortener plugin is a tool that helps you create shorter, more manageable URLs for your WordPress posts and pages. These shortened URLs are easier to share on social media, in emails, and other platforms. They also make your links look cleaner and more professional. If you have a WordPress site with long and complex URLs, a URL shortener plugin can greatly improve your user experience and SEO.
A URL shortener plugin works by creating a unique, shorter version of your original URL. When a user clicks on the shortened URL, they are redirected to the original long URL. This process is seamless and does not affect the user’s browsing experience. The plugin also tracks the number of clicks on the shortened URL, providing valuable data for your marketing efforts.
Yes, most URL shortener plugins allow you to customize your shortened URLs. You can add your own keywords to make the URLs more meaningful and relevant. This not only makes your URLs easier to remember but also improves your SEO.
Yes, it is possible to restore the ‘Get Shortlink’ button in WordPress. This button was removed in WordPress 4.4 but you can bring it back by using a plugin or adding a code snippet to your theme’s functions.php file.
Yes, there are several free URL shortening plugins available for WordPress. Some of the popular ones include URL Shortify, Pretty Links, and Bitly. These plugins offer basic URL shortening features and are a good starting point if you are new to URL shortening.
Most URL shortener plugins provide analytics features that allow you to track the performance of your shortened URLs. You can see how many times a URL has been clicked, the geographical location of the users, the referral sources, and more. This data can help you understand your audience better and optimize your marketing strategies.
Absolutely! Most URL shortener plugins are designed to be user-friendly and do not require any technical knowledge. They come with easy-to-use interfaces and detailed instructions. If you can navigate your WordPress dashboard, you can use a URL shortener plugin.
Yes, a URL shortener plugin can improve your SEO. Shortened URLs are easier for search engines to crawl and index. They also improve user experience by making your links more manageable and shareable, which can boost your site’s ranking in search engine results.
Yes, you can use a URL shortener plugin for your affiliate links. In fact, it’s highly recommended. Shortened URLs look cleaner and more professional, which can increase click-through rates and conversions. Some plugins also allow you to add a nofollow attribute to your affiliate links, which is good for SEO.
While URL shortener plugins offer many benefits, there are also some risks. For example, if the plugin’s server goes down, your shortened URLs may stop working. Also, some users may be wary of clicking on shortened URLs because they can’t see the destination URL. Therefore, it’s important to choose a reliable plugin and use shortened URLs judiciously.
The above is the detailed content of Create a URL Shortener Plugin for WordPress. For more information, please follow other related articles on the PHP Chinese website!