In this post I’ll explain in detail how to use a Rating-Widget’s ratings system for SMF’s forums.

What is SMF?

Simple Machines Forum is a free PHP + MySql based web software that allows you to set up your own forum and online community in minutes. It’s like WordPress for forums. SMF is very powerful and customizable and includes a great template engine which provides full control of the message  board’s layout. My conclusion, if you want to set up your own forum and you have some basic PHP skills – SMF is the right platform for you and set up is a lot easier than you may think.

Why SMF must have a Rating-System?

My goal was to add a ratings system for my forum’s posts, to provide my readers an easy way to vote for content. For me, adding a rating system was mandatory considering that in order to build a good community members must have the ability to easily and quickly provide feedback.

For me, adding a rating system was mandatory considering that in order to build a good community members must have the ability to easily and quickly provide feedback. Tweet

But why choose Rating-Widget?

I searched Google to find a system that would accomplish everything I wanted to provide my readers. After checking several rating systems, I found Rating-Widget.com which was exactly what I was looking for.

I chose it  for several reasons:

1. Beautiful ratings: Rating-Widget has an amazing collection of themes, both star & thumb styles are included. No other system has so many original icons. Furthermore, every element of the rating is highly customizable.
2. Ease of installation: This is my favorite part. The system is very user-friendly. They’ve just nailed that part. Just in couple of minutes, with the help of the support, I had the system live in my SMF forum.
3. Outstanding support: One of the things that blew my mind was the swift and excellent support I received. Even though I am using the free version of Rating-Widget, that did not affect the type of customer service I received from Vova and his team. The support connected me via skype and together we managed to figure out how to set up the ratings in SMF.

Rating-Widget has an amazing collection of themes, both star & thumb styles are included. No other system has so many original icons. Tweet

How to add the ratings to SMF?

Enough with the praise, let me show you, step by step, how to implement the ratings into SMF.

1. First of all, go to Rating-Widget.com
2. In the main page, you can customize the ratings as you like by using the simple editor. You can modify the theme, the language, colors and more. All changes are updated live in the preview section so you can see the UI and feel the UX before you add it to your site.
3. Once you’ve finished with the styling, click the big green Get Widget button.
4. If it’s your first time using the system, you’ll have to generate a unique user-key for your site, so Rating-Widget would be able to uniquely identify your SMF forum.
5. Once the key is generated, all the required code can be found in the box.

Now when we have the auto-generated code ready, let’s modify SMF PHP templates to embed the code in your SMF forum. The relevant SMF template files are located in your active theme’s directory (by default it’s /forum-root/Themes/default).

6. The first modification would be in post’s main template. Open the Display.template.php file and search for the location of the html template exactly where you would like to add the ratings. In my forum, I’ve added the ratings at the top of the posts. Just below <div class=”post”> 
   Now copy and paste the highlighted code at the selected location:

// Show the post itself, finally!
echo '</pre>
<div class="post">
';

// Star Rating
echo '
<div class="rw-ui-container rw-urid-' . $message['id'] . '"></div>
';

7. The second, and final change must be done in the html’s main layout. Open index.template.php and search for template_body_below() function. Before the end of the function, copy and paste the auto-generated code from Rating-Widget’s code box, the same code we generated earlier. Note, add only the code within <div class=”rw-js-container”> container:

echo '
        <!-- Add this javascript code immediately before the </body> tag -->
        <div class="rw-js-container">
            <script type="text/javascript">
                // Async Rating-Widget initialization.
                function RW_Async_Init(){
                    RW.init({
                        uid: "--------********--------********",
                        huid: "******",
                        options: {
                    size: "large",
                    lng: "es",
                    theme: "star_oxygen1"
                        }
                    });
                    RW.render();
                }

                // Append Rating-Widget JavaScript library.
                if (typeof(RW) == "undefined"){
                    (function(){
                        var rw = document.createElement("script");
                        rw.type = "text/javascript"; rw.async = true;
                        rw.src = "http://js.rating-widget.com/external.min.js";
                        var s = document.getElementsByTagName("script")[0];
                        s.parentNode.insertBefore(rw, s);
                    })();
                }
            </script>
        </div>';

Save the files and you are ready to rock n’ roll!

Finally, I would like to personally thank Vova and his awesome team who helped me implement the code into my SMF forum. I’m really grateful for all of your quick, kind and helpful words.

This is a guest blog written by Sofia Antontela. Sofia is a young and enthusiastic tech blogger from Rosario, Argentina.