Create Google Plus Add Profile Button

This quick tutorial will show you how to make an add profile button on your website, much like the one you see in the header on the top right corner of our site.   This method involves placing a small JavaScript within the template structure of your site. (both in the header, then in the template OR the easiest, within a WordPress widget…if you are using WordPress).  Variations of this method can be used for any website platform.

Requirements

  • User Must be Logged Into Google
  • User Has to be Using Google+

We have some Google+ invites left for those who need one, just contact us.

If user doesn’t have Google+, they will get your profile page without the add to circles option.

Suggestion

Create a redirect in your .htaccess file to Customize Your Google Plus Profile URL, so that you can take an address on your site and redirect it to the Google+ profile (currently, there are not custom urls, so the Google+ URL consists of numbers which is not so friendly.

  • Place the Following in Your .htaccess (without the code tags)
  • You Can Use Any Page Matched With Your Plus ID (see ours below)
  • This Sample Below Links a Page on Our Site Named + to Our Profile About Section
  • We Are Using This Page in The Coding Sample
  • You Can Always Use Your Google Plus Page in the Button Code Below

<code>Redirect /+ https://plus.google.com/116772708792764352748/about</code>

If the user puts in http://wpcommunity.com/+, they will go to our profile

Methods of Creating Button

We’ll Cover Two Methods

  • Using an Image Button
  • Using a Javascript Form Button

The image button is more exciting!

Code

  • The code is pretty simple, part of it goes in your header file before the close of the <code></head></code>
  • The code is based on the popup window generator by Nic Wolfe found here
  • Tested on new versions of Opera, Google Chrome, Firefox, Safari and Internet Explorer
  • You Can Adjust Variables (zero for off, 1 for on) for scrollbars and other items
  • You can Size the Window to Your Liking

Place This in Header (without the code tags)

<code><SCRIPT LANGUAGE=”JavaScript”>

<!– Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval(“page” + id + ” = window.open(URL, ‘” + id + “‘, ‘toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=1060,height=1200’);”);
}
// End –>
</script></code>

This is the same whether you are using the image button or form button

If You Want an Image Button

  • Place This in Your PHP Template or Within a Text Widget (recommended)
  • You Can Position With CSS if in Template (or with widget issue)
  • Size and Upload a Google Plus Button Image
  • Use Below Code Without the Code Tags

<code><form>
<input type=”image” src=”http://yoursite.com/button-image.png” alt=”Add Us on Google Plus” onClick=”javascript:popUp(‘http://wpcommunity.com/+’)”>
</form></code>

If You Want a Form Button With No Image

  • Place This in Your PHP Template or Within a Text Widget (recommended)
  • You Can Position With CSS if in Template (or with widget issue)
  • We Have Used Our Plus URL Redirection in the Sample
  • You Can Also Use the Google+ Profile URL
  • Use Below Code Without the Code Tags

<code><form>
<input type=button value=”Open the Popup Window” onClick=”javascript:popUp(‘http://wpcommunity.com/+’)”>
</form></code>

Same Example With the Actual Profile URL on Google Plus

<code><form>
<input type=button value=”Open the Popup Window” onClick=”javascript:popUp(‘https://plus.google.com/116772708792764352748/about’)”>
</form></code>

 

That’s It!  You’re Done!

 

3 thoughts on “Create Google Plus Add Profile Button

  1. One interesting comment I’ve received on website feedback a few times is that non-techies may not know the non-standard Google Plus icons or images.

    To me, those are very interesting comments as it really makes me wonder exactly what the public recognition of Google Plus is at this point in time…and also, if non-users do at least understand what Google Plus is in general, what specifically they think it is or what it does.

    With added media coverage and the evolution of this service/product, this will undoubtedly change, just the thought though is interesting.

Leave a Reply

  • (will not be published)

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>