1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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.
    Dismiss Notice
  3. 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

Discussion in 'Template Modifications [Archive]' started by Michael Eaton, Jun 8, 2011.

  1. Michael Eaton

    Michael Eaton Member

    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
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. Michael Eaton

    Michael Eaton Member

    Aw, after all my hard work! I did do a quick search for it..

    oh well! it works if anyone wants it...

    /me goes to find something to do...

    -Michael
     
  4. Wuebit

    Wuebit Well-Known Member

    You and me both :D
     
  5. Kier

    Kier XenForo Developer Staff Member

  6. el canadiano

    el canadiano Active Member

  7. Kier

    Kier XenForo Developer Staff Member

    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.
     
  8. Rudy

    Rudy Well-Known Member

    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.
     
  9. FredC

    FredC Well-Known Member

  10. Brogan

    Brogan XenForo Moderator Staff Member

    ACP Search: Google +1
     

Share This Page