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 https://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(‘https://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(‘https://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!

 

Tags: , ,