• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Add Googles' +1 Buttons to your forum

#1
Hey guys,

When using my adsense account google kept nagging me to use their +1 button eventually I thought, why not?

I wanted it in the same place as the other social network-y type things under the "Share this page" section near the bottom of a view-thread page.

So I got what i wanted (http://www.hummy.tv/) click through on to a discussion/thread and you'll see at the bottom.

This is what I did.

First of all get your google +1 code:

http://www.google.com/webmasters/+1/button/

Once you have your code, you need to put the javascript in either in the <head> section or just above the </body>.

I used "footer" template and put it right at the bottom of the template after all code. It appears just above 2 jquery scripts then its </body> .. close enough I recon! :)

Save this change then go back to Templates and look for: "share_page".

This one is more awkward.. and a bit hacky! I didn't have time to add to any stylesheets so I cheated and used the class from the FacebookLike feature to give it the correct position and layout, otherwise the +1 button floats to the right.

You can put the button where you like, but I put it between the Twitter and Facebook icons this is the code you need:
HTML:
<div class="facebookLike shareControl"><g:plusone size="medium"></g:plusone></div>
Make sure you change the "size" to the size you want, but I believe the medium one matches the other social network plugin things..

Your code for the share_page should now look like this:

HTML:
<xen:if hascontent="true">

    <xen:require css="share_page.css" />

    <div class="sharePage">

        <h3 class="textHeading larger">{xen:phrase share_this_page}</h3>

        <xen:contentcheck>

            <xen:if is="{$xenOptions.tweet.enabled}">
                <div class="tweet shareControl">
                    <a href="http://twitter.com/share" class="twitter-share-button"
                        data-count="horizontal"
                        data-lang="{xen:helper twitterLang, $visitorLanguage.language_code}"
                        data-url="{$url}"
                        {xen:if {$thread.title}, 'data-text="{$thread.title}"'}
                        {xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'}
                        {xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:phrase tweet}</a>
                </div>
            </xen:if>
<div class="facebookLike shareControl"><g:plusone size="medium"></g:plusone></div>
            <xen:if is="{$xenOptions.facebookLike}">
                <div class="facebookLike shareControl">
                    <xen:container var="$facebookSdk">1</xen:container>
                    <fb:like href="{$url}" show_faces="true" width="500" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
                </div>
            </xen:if>
        </xen:contentcheck>

    </div>
</xen:if>
Now Save! That should be it! Hope this all makes sense!

Any questions hit reply and I'll try my best.

Regards,

Micahael
 

Kier

XenForo Developer
Staff member
#7
For what it's worth, I have not used Google's recommended JS code to integrate the button, as it is loaded synchronously and blocks the rest of the page. Instead, it is loaded asynchronously with custom code in a similar manner to the way in which we initialise the Tweet button.
 

Rudy

Well-known member
#8
I just added it to another site via AddThis. The Google +1 button and balloon are the last to load in the block (where we also have likes and tweets) by at least a second or two. At least the AddThis JS on this client's page does not delay loading of the rest of the page content.