Continuing our series of Drigg for Drupal Tutorials today’s tutorial will show you how to install and configure the External Vote Button Widget Module into your Drigg based social news web site that has been based on the Drupal 5 code base. This particular module for Drigg will allow your readers to display your sites voting buttons within articles and posts on their own website much like the Digg external vote button works.

What The Module Achieves
This modules provides a single javascript button to include in a page that will display either a vote button or an “add to” button. This module builds upon the Drigg set of modules and is meant to work as an external vote button for scoops available inside a Drigg system.

The script to call to display the button is optimized not to hit the server too hard when a button is displayed multiple times on a site: each call to get the button is delayed by 1 second. So if you have 10 buttons to display, the last one will be displayed after 10 seconds.

Download The Drigg External Vote Button For Drupal 5

The module from the project homepage below has an install error which we fixed in our version along with a few other little errors. Always keep an eye on this project homepage hough for official updates in the future.
Project Homepage:
Drigg External Vote Button For Drupal 5

Below is a fixed and working version of the EVB for Version 5 of Drupal we recommend you grab this version for the time being.
Our Fixed Package:

Installation and Configuration Of The Drigg External Vote Button

1. Unzip the package drigg_external-5.x-1.x-dev-fixed.zip to your hard drive.

2. Open drigg_externaljsbutton.js with notepad or a similar text editor. We recommend you use PSPad or similar for MAC users to edit this file and any others.

3. look for the code shown below within the button.js file.

var base_url="http://www.YOUR-DRIGG-SITE.com/";

Instead of http://www.YOUR-DRIGG-SITE.com/ place the url of you Drigg site here remember to include a trailing slash.

4. Close and save the button.js overwriting the existing one.

5. Upload the folder drigg_external and all of it’s contents to your sites/all/modules folder within your Drupal installation.

6. Now open the folder drigg_external on your hard drive again and look for the two files below.

drigg-external-button-vote.tpl.php
drigg-external-button-add.tpl.php

7. Upload these two files to your sites/all/themes/drigg_theme folder of your Drupal installation.

8. In the folder sites/all/themes/drigg_theme you will see a file titled template.php, download this file to your harddrive.

9. Open template.php and add the code below at the very end of the template.php then save it.

function phptemplate_drigg_external_button_vote($node = NULL, $widget_html = NULL) {
  // Pass to phptemplate, including translating the parameters to an associative array.
  // The element names are the names that the variables
  // will be assigned within your template.
  return _phptemplate_callback('drigg-external-button-vote', array('node' => $node, 'widget_html' => $widget_html));
}

function phptemplate_drigg_external_button_add($link = NULL) {
  // Pass to phptemplate, including translating the parameters to an associative array.
  // The element names are the names that the variables
  // will be assigned within your template.
  return _phptemplate_callback('drigg-external-button-add', array('link' => $link));

}

10. Upload the template.php file to sites/all/themes/drigg_theme overwriting the existing file.

11. goto you h**p://yoursite.com/admin/build/modules and activate the Drigg External Utilities Module.

12. goto the settings screen for your Drigg module and the section Drigg Users, the section you are looking for is titled “Code to get the voting forms”. In the image below is the default settings for this section, to get the voting forms to show on external sites we need to change these three lines below.

Originally the code within the section is.

extra_voting_forms_show_form($node,'n',3);

Overwrite those the instances with this code below otherwise your voting buttons will not show on external websites.

return extra_voting_forms_show_form($node,'n',3);

Below is what the changed section should look like after you have made the edits and saved the settings.

Thats all it takes to get the button working within a Druapl 5 based Drigg web site.

The Code To Display Your EVB On Other Websites And Blogs

To display your external button on websites you will need to give users the code below. I have made a standard example and provided some code for use on wordpress blogs.

Standard EVB Website Code

<script type="text/javascript">
url_site = 'http://www.example.com/External_Blog_Article_Url'; </script>
<script src="http://YOUR_DRIGG_SITE/sites/all/modules/drigg_external/js/button.js" type="text/javascript"></script>

With the code above users must replace url_site = ‘http://www.example.com/External_Blog_Article_Url’; with the url of thae article on the page they would like your button to display. http://YOUR_DRIGG_SITE should be the homepage url of you Drigg site.

Wordpress Compatible Drigg EVB Code Snippet

<script type="text/javascript">
url_site = '< ?php the_permalink() ?>'; </script>
<script src="http://YOUR_DRIGG_SITE/sites/all/modules/drigg_external/js/button.js" type="text/javascript"></script> 

The code above when placed in a wordpress blog template will automatically grab the article URL.

You should now be able to offer your readers. members and visitors the option of allowing users to submit and see the vote count on articles directly from the authors website. A cool feature of this voting widget is that if the user visiting an external blog that is displaying your button is logged into your drigg site and votes from that external button the vote refreshes on the external site without visiting your drigg site. If the user is not logged into your drigg site or has no registered account they are taken to the registration/login page of your drigg based website.

We will follow up this post with a tutorial for the Drupal 6 of this module soon!

If you enjoyed this post, make sure you subscribe to our RSS feed!