Дичев Уеблог  

How to create Social bookmarks buttons plugin for WordPress

Български

In this article I will try to give you a short tutorial on how create your own WordPress plugin.

Because the topic of the Social bookmarks networks is very popular, I have chosen to write a plugin, which automatic generates bookmarks buttons after the post body.

After I have collected a long list of social bookmarks websites, I have decided to explain you how to customize it yourself for your blog. Most of the bloggers do not want all of the bookmark buttons to appear after their posts, thats why I will teach you how to remove any of the buttons listed in my plugin or add a new one I have forgotten to add. If you are enough close to PHP, feel free to customize the social bookmarks lists included in the plugin source.

First of all is a 3-step guide on how to install the plugin directly without modifying it. This is for people who want to use all social networks buttons and will not be able to modify the script inside the source of the plugin. To install the plugin in 3 easy steps you need not more than 10 minutes and no PHP experience.

1. Download the source of the WordPress plugin here:
   Add Me Dichev (Download .ZIP)

2. Extract the contents of the archive in the plugins folder of your WordPress blog installation:
   /wp-content/plugins/

3. In the admin of your WordPress blog activate the plugin:
   Plugins » Add Me Dichev » Activate

List of the supported social networks:
addthis.com, blinkbits.com, blinklist.com, blogmarks.net, blogmemes.net, bluedot.us, bloglines.com, co.mments.com, connotea.org, del.icio.us, de.lirio.us, digg.com, diigo.com, dzone.com, facebook.com, feedmelinks.com, folkd.com, fleck.com, google.com, icio.de, indianpad.com, leonaut.com, linkagogo.com, linkarena.com, linkter.hu, ma.gnolia.com, mister-wong.de, url.com.tw, ask.com, yahoo.com, netscape.com, netvouz.com, newsgator.com, newsvine.com, oneview.de, rawsugar.com, reddit.com, rojo.com, segnalo.alice.it, shadows.com, simpy.com, slashdot.org, smarking.com, sphere.com, spurl.net, startaid.com, stumbleupon.com, tailrank.com, technorati.com, thisnext.com, yigg.de, webnews.de, readme.ru.

Bulgarian social networks:
svejo.net, dao.bg, ping.bg, pipe.bg, web-bg.com, dobavi.com, lubimi.com.

For those of you, which want to make any customization of Add Me Dichev WordPress social bookmarks buttons plugin, read the next lines, follow the steps in the tutorial and learn the structure of the source. It is very simple to understand how it works and to modify it. You do not need to be a PHP guru to add or remove any buttons to you blog post body.

• Download plugin and extract it.

• The archive contains README.txt, the folder /images/ with the icons of the buttons and the file addme_dichev.php, who does the most of the job.

• Open addme_dichev.php in a text editor.

In the beginning of the file you can see the function add_me($content), which the plugin calls on the end of the post body to generate the bookmarks buttons. The idea of this function is to add the URL (the address) and the title of the post to the addresses for submission of a post to the different social bookmarking networks. There are two specific things in this task. The address and the title of every post are different and the same is with the addresses for the submission to the social bookmarks websites. Below you will learn how to handle with this.

First we define the global WordPress variable global $post;, it contains the data of every single post. Few lines below we will load from it the current post address and title.

Next there are some settings variables, you can use to make basic changes to the position of the buttons. It is not necessary to edit them. If you do not want making any change, leave them the same or experiment with their values to best suite your design needs.

$my_width is the width in pixels of the block containing the buttons. Its goal is to fix the width of the buttons group, which is located in a <DIV>, if it does not pass to the design of your blog template. It may be in pixels or percents. For example:

$my_width = ´100%´;
or
$my_width = ´450px´;

$my_align is the align of the bookmarks buttons block. It may be left, right or center. For example:

$my_align = ´left´; (for left align)
or
$my_align = ´right´; (for right align)
or
$my_align = ´center´; (for centered align)

There is one option variable available $my_images_folder, it contains the path to the bookmarks icons folder.

$my_images_folder = get_settings(´home´)
. ´/wp-content/plugins/add-me-dichev/images/´;

The specific here is that we use the WordPress get_settings(´home´) to check, where the blog is installed. It returns the path to the blog installation folder (for example: http://dichev.com/blog/) and this case we add it to the icons folder path in the default WordPress plugins folder.

You do not need to change it unless you want to use another location for storing the images of the bookmarks buttons.

With the help of the WordPress functions get_permalink() and get_the_title() we load from the global variable $post the address and the title of the current post, which the visitor is reading and we save the data in our local variables $my_link and $my_title.

$my_link = get_permalink($post->ID); (the address)
$my_title = get_the_title($post->ID); (the title)

As you probably guess $post->ID is the ID of the current post.

And so we are at the main part…
We do a simple check to see, that visitor is really reading a post and not a page or RSS-feed:

if ( !is_feed() && !is_page() ) {

The WordPress functions is_feed() and is_page() return TRUE, if is opened a feed or a post..

If is really a post, finally we begin to save in the variable $content the content, we want to show after the post. In our case this is the source we will generate to display the social bookmarks networks buttons.

Every single line represents the source code for a single button. The syntax is very important, so if you add a new buttons, please be sure, that you have copied the code of already working button from the file and modify it according to the other buttons example.

If you like to hide any of the bookmark buttons and not to show it after the post, just comment the line of code for the given button with // before it.

To add a new button to the group, create a line for it following the example of a already working button. Every social bookmarks network has its own convention for submitting an address. In most of the cases it looks like this:

http://domain.com/addpost?url=ADDRESS&title=TITLE

You have to replace the ADDRESS and the TITLE with the address and the title of your current post.

In the beginning of our function we have already load the current post address and title in our local variables $my_link and $my_title, so we can use them on the places of ADDRESS and TITLE in the creation of the submission URL.

http://domain.com/addpost?url=´.$my_link.´&title=´.$my_title.´

We accept that you have written the address (HREF=...) of the network correct. For every new button you have to upload its new image in the icons folder and fill its name (for example: new_button.gif), the TITLE of the link, the ALT and the TITLE of the button image.

The picture below shows what will you get if commenting all the button source lines except the Bulgarian:

This is all. Hope this article was helpful for you…
Wish you good luck!

If you find the plugin and the tutorial useful, please Digg this page!

Тагове: php, plugin, public, social, software, tutorials, wordpress