wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes Google +1 – How to add Google +1 button in WordPress Twenty Ten

WordPress themes

Google +1 – How to add Google +1 button in WordPress Twenty Ten

Last updated on February 18, 2017
Posted on June 6, 2011

Google +1 Button – One of those “Sharing” Button

In my old post, titled, floating social media button video post, I posted how to add floating social media buttons, such as Digg, Stumble Upon, Google Buzz, Twitter and Facebook share button.

And surely, not to forget add a new service in ShareDaddy with Jetpack plugin. (related: jetpack plugin wordpress).

Last few months there was a hot news about Google +1 button, which will represent like “a stamp” for an authority or useful page in your website or blog, which is very nice in my opinion, but like another social media or network website, it just requires more of your time.

If you have time, you can generate traffic through this button or make your blog popular, or even using Yahoo Answers, that I have personally also tried them all, but again, as I mentioned above, it needs your spare time.

Google +1 Button – How to add this button using Twenty Ten theme and Twenty Eleven

I have created a video on how to add this button using WordPress 3.2 Beta 2’s default theme, Twenty Eleven, and also Twenty Ten theme.

Although in the video, I mentioned, “Twenty Ten Eleven” theme lol..but I meant Twenty Eleven.

I still care about Twenty Ten, because I notice alot of wordpress bloggers still use this theme as their website’s template. This is why, I created two version of tutorials, first using Twenty Ten theme, and then Twenty Eleven theme.

So in case you are using Twenty Ten theme, you can watch the first minutes of the video below, but if you use Twenty Eleven theme, you can watch almost at the end of the video.

But generally, the result of the tutorial is the same, which will embed its  Javascript in the footer, and then render the button in post pages (or single post page) file in Twenty Ten theme file, as well as Twenty Eleven theme single post file.

That single post files are named differently, which is called loop-single.php in Twenty Ten theme, and content-single.php in the Twenty Eleven file.

Another note, if you want to add it in your index or home page, then you should add the render code in index.php.

Google +1 Button in Twenty Ten and Twenty Eleven video tutorial

For me personally, adding plugins to add this little button is just not making sense because we can easily add those functionality without adding extra plugin. More plugin = more loading time in your blog, so if you want to use plugin, you can add or install a plugin, but if you want to add manually, you can follow this tutorial.

Video:

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

Twenty Ten theme steps:

1. Visit this Google +1 button official website page.

2. Choose how big you want to display your button, is it small, standard, big or tall. Once you are sure which size you want to have, go back to your admin dashboard.

3. In your dashboard, go to “Appearance” and then “Editor”.

4. Navigate to “footer.php” in the right sidebar, click that link.

5. You will want to copy this code and paste it in your footer. (see screenshot)

Code that you will copy and paste:<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

google +1
Place to paste in the footer.php

Here is where we going to paste: (before /body)

Click “Update file” to save.

6. Now if you refresh your post page, it won’t show, because we need to add the code to display the button image. To do that, you have to open loop-single.php file, so again to “Appearance” → “Editor”→ “loop-single.php”

google +1
Loop-single.php

Right below the title tag, we add this code:

<g:plusone></g:plusone>

google +1
Place to paste the code in loop-single.php

Click “Update File”.

Now for Twenty Eleven steps:

Follow the step 1 until 5 above to find “footer.php” of Twenty Eleven theme, and paste the code (from step 5) exactly the same before the /body tag as well.

1. After we pasted the code in footer.php, we now look again in “Appearance” → “Editor”→ “content-single.php”

2. Paste the code <g:plusone></g:plusone> in this content-single.php right after the title.

Screenshot:

google +1
Where to paste code in Twenty Eleven's content-single.php

3. Click “Update File”.

That’s how I would insert Google +1 button if I would use Twenty Ten theme or Twenty Eleven theme.

button

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Layout and Structure of a WordPress theme
→ How to add a Logo in TwentyEleven theme

Comments

  1. Aileen | Kaizen Vision says

    June 7, 2011 at 7:25 pm

    You always have the best instructional videos! Thank you 🙂
    I was helping a friend who has the Twenty Eleven theme and it’s not a theme I’m familiar with yet.

    • Kimi says

      June 7, 2011 at 8:13 pm

      Hi Aileen | Kaizen Vision!

      It is so nice of you helping a friend! Thanks for the nice words and have a nice week 🙂

      Best wishes!

  2. Suresh Khanal@bivori says

    June 8, 2011 at 4:00 am

    Hey! I never knew twenty eleven theme is there. Twenty ten is the default theme, is twenty eleven the updated version of twenty ten?

    Adding these buttons, I find is much easier if you use ShareBar plugin. It lets you add and configure buttons so that I don’t need to access the code.

    • Kimi says

      June 10, 2011 at 6:39 pm

      Hey!

      Twenty eleven is an updated version of duster theme. Users in wordpress.com can enjoy the duster. Maybe Twenty eleven too, havent checked it yet.

      As far as I know in wp 3.2 there will be two themes, Twenty Ten and Twenty Eleven..

      Thanks

      Kimi.

      • Suresh Khanal@bivori says

        June 11, 2011 at 2:21 am

        OK. Thank you Kimi for the info.

        • Kimi says

          June 11, 2011 at 8:03 pm

          Most welcome! 😀

  3. Ewien says

    August 5, 2011 at 8:46 pm

    Thanks for the tutorial…would like to add the +1 button on my home page…where exactly should the code be placed in the index.php file?

    Thanks!

  4. Ewien says

    September 20, 2011 at 6:10 pm

    Hey Kimi, awhile back you responded to my question of August 5th…but I am not able to see it any more?! Would you mind sending it again, thanks! Ewien

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept