[SMF Trick] Embedding Google +1 Button in Posts

[PLAYBOY]

I dont have this

Code Select Expand

<hr class="post_separator" />
In my display.template.php

Also what is my forum name? Is it the name on the top left corner of the page? Like a slogan? or is it my Forum USERNAME?

Code Select Expand

echo '<div id="plusone_MYFORUMNAME"></div>';

[ascaland]

Provide me a download link from uppit or something with your Display.template.php. If you cant provide that then your on your own.

As for the name, it can be whatever you want it to be really.

[PLAYBOY]

https://rapidshare.com/files/3192912821/Display.template.zip

Delete Link
https://rapidshare.com/#!index|deletefiles|6886498018672731577|3192912821|Display.template.zip

[ascaland]

Hmm its hard to say where it goes since I cant find a descriptive piece of code for the seperator.
I think its around here though,

Code Select Expand

echo '

</td></tr>';

[PLAYBOY]

Before? After? Between?

[ascaland]

Before? After? Between?

Should definitely play around with it. However dont delete the tags already there (of course ).

[PLAYBOY]

Putting this code

Code Select Expand

<script type="text/javascript">
gapi.plusone.render("plusone_msg_' . $message['id'] . '", {"size": "standard", "count": "true", "href" : "' . $message['href'] . '"});
</script>

After or before

Code Select Expand

echo '

</td></tr>';
Gives template error.

But between doesnt give any error nor make any change on the message.

I think i should just wait for a mod to come out so i can just install.

[ascaland]

Good idea.

[eswari]

Its really great tips.. .Thanks you so much for this information..

[Antes]

you can add href="http://www.sitename.com" part if you want to +1 just one page (or home page )

<g:plusone href="http://www.sitename.com"></g:plusone>

[Kolya]

The instructions in the first post seem overly complicated.
Just add the script in index.template.php and in display.template.php somewhere in the postarea add:

Code Select Expand

echo'<g:plusone size="small" href="', $message['href'], '"></g:plusone>';

Done.

[ascaland]

The instructions in the first post seem overly complicated.
Just add the script in index.template.php and in display.template.php somewhere in the postarea add:

Code Select Expand

echo'<g:plusone size="small" href="', $message['href'], '"></g:plusone>';

Done.

Check your page validation.

[Kolya]

Well it's valid HTML5, thank you. And it works in every browser.

[ascaland]

Well it's valid HTML5, thank you. And it works in every browser.

I guarantee you most people wont be using HTML5 as their doctype, especially in this case considering SMF is using XHTML. Im only following the recommended guidelines when creating modifications,
http://wiki.simplemachines.org/smf/Customization_approval_guidelines#W3C_Validation

If you dont like this method, then dont use it. Simple as that.

[sheilah]

This SMF Trick will show you how to add the new Google +1 button to your topic posts! What is this button I speak of?
http://www.youtube.com/watch?v=4RyY2-ofP4g

First off, you can find its API reference here,
http://code.google.com/apis/+1button

Lets get started. The +1 button uses Javascript to render the button on the page. There are a variety of ways to include the button in your webpage, using a custom tag (g:plusone), Javascript, and so on as you can see in the reference. This tutorial will use Javascript inclusion.

Begin by entering your theme's index.template.php file, this is where the API will be retrieved. Of course, there are other ways to retrieve this page in SMF without even needing a template edit, but for simplicity it will be retrieved here. Below,

Code Select Expand

<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?rc5"></script>
Add,

Code Select Expand

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

Now in your theme's Display.template.php, we will be rendering each button here. The div used to render the button will be,

Code Select Expand

<div id="plusone_msg_' . $message['id'] . '"></div>
This will enable the button for each specific message, this is will be of use for each button's href attribute.

Under,

Code Select Expand

<hr class="post_separator" />
Add,

Code Select Expand

<script type="text/javascript">
gapi.plusone.render("plusone_msg_' . $message['id'] . '", {"size": "standard", "count": "true", "href" : "' . $message['href'] . '"});
</script>

This will invoke the button for each message. If the code cannot be found, then echo the script right before the following while loop ends,

Code Select Expand

// Get all the messages...
while ($message = $context['get_message']())

Now to get the button displaying! There are a variety of places you can place this button. Make sure if your placing the button anywhere else other than posts you include the above script into the page, that is responsible for rendering the button!

Under every signature

Code (After) Select Expand

// Show the member's signature?
if (!empty($message['member']['signature']) && empty($options['show_no_signatures']) && $context['signature_enabled'])
echo '
<div class="signature" id="msg_', $message['id'], '_signature">', $message['member']['signature'], '</div>';

Code (Add) Select Expand

echo '<div id="plusone_msg_' . $message['id'] . '"></div>';

Beside each subject

Code (Replace) Select Expand

<a href="', $message['href'], '" rel="nofollow">', $message['subject'], '</a>

Code (With) Select Expand

<a href="', $message['href'], '" rel="nofollow">', $message['subject'], '</a> <div id="plusone_msg_' . $message['id'] . '"></div>

Under custom fields

Code (Before) Select Expand

// Done with the information about the poster... on to the post itself.

Code (Add) Select Expand

echo '<li><div id="plusone_msg_' . $message['id'] . '"></div></li>';

And there you have it! Of course there are many places to have this button dispalyed, but thats only the tip of the iceberg. Dont forget to visit the reference to check out some of the nifty features it has including button size, language, callbacks, etc.

One extra thing I will include is how to use the callback that will display a message when the user clocks the button. In index.template.php, below,

Code Select Expand

<script type="text/javascript"><!-- // --><![CDATA[
Add,

Code Select Expand

function plusoneCallback(data) {
var buttonData = data;
if (buttonData["state"] == "on")
alert("+1\'d post!");
else
alert("-1\'d post.. :(");
}

Enjoy!

If I understand the new +1 button, a person can only vote if they already have a google account AND they are logged into it. It might be nice to add a disclaimer at the top of the original post saying "note: only users with google accounts will be able to use this feature".
And does anyone know what percentage of forum users typically have a google account, and could use this feature? If it's a small amount, it might not be worth the hassle... but if a lot of people do, that might motivate people to add it.
Just a thought...

[Kolya]

Well it wasn't too likely anyway that I'd be placing 50 iframes on every page of my forum, standards compliant or otherwise.

[sheilah]

I'm not really sure what an iframe is, but it sounds bad to me, and I don't like when I get the warning box about an iframe loading (happens on a news site I go to, like abc news or something major like that)...

[Kolya]

While iframes can be used for malicious purposes that's not the problem here. (Unless you count Google's intentions as malicious.)
The point is that iframes slow down the page rendering process significantly.
https://encrypted.google.com/search?q=iframes+performance

[sheilah]

While iframes can be used for malicious purposes that's not the problem here. (Unless you count Google's intentions as malicious.)
The point is that iframes slow down the page rendering process significantly.
https://encrypted.google.com/search?q=iframes+performance

That makes sense...
Like a lot of warnings, the warning is "we don't know if this is legit or malicious, and you have to decide and ok it".
But even if it's safe, if is slows down things, users usually don't like SLOW. I know I don't!

[lextalionis]

Begin by entering your theme's index.template.php file, this is where the API will be retrieved. Of course, there are other ways to retrieve this page in SMF without even needing a template edit, but for simplicity it will be retrieved here. Below,

Code Select Expand

<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?rc5"></script>
Add,

Code Select Expand

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

Okay, so for this just input the "Add" code right?  I don't need to ad the "code" snipit you mention first?

Now in your theme's Display.template.php, we will be rendering each button here. The div used to render the button will be,

Code Select Expand

<div id="plusone_msg_' . $message['id'] . '"></div>
This will enable the button for each specific message, this is will be of use for each button's href attribute.

What do I do with this code snipit above?  Usually the convention for updates is "find" code, then either "replace" or "add" below or above the "find".

Under,

Code Select Expand

<hr class="post_separator" />

I'm using smf 1.1.14 with a theme that leverages the default's index templates and I can't find this "post_separator" in my default theme Display.template.php

Add,

Code Select Expand

<script type="text/javascript">
gapi.plusone.render("plusone_msg_' . $message['id'] . '", {"size": "standard", "count": "true", "href" : "' . $message['href'] . '"});
</script>

This will invoke the button for each message. If the code cannot be found, then echo the script right before the following while loop ends,

Code Select Expand

// Get all the messages...
while ($message = $context['get_message']())
   
you lost me here
   

Now to get the button displaying! There are a variety of places you can place this button. Make sure if your placing the button anywhere else other than posts you include the above script into the page, that is responsible for rendering the button!

Beside each subject

Code (Replace) Select Expand

<a href="', $message['href'], '" rel="nofollow">', $message['subject'], '</a>

Code (With) Select Expand

<a href="', $message['href'], '" rel="nofollow">', $message['subject'], '</a> <div id="plusone_msg_' . $message['id'] . '"></div>

This is where I think I want the +1 button, just need clarification...when you say beside each subject, do you mean at the post level aka w/in the post only?