Sunday, October 9, 2011

Create a Follow Me on Google Plus, Twitter, or Facebook Button


Follow me on Twitter, Google +, and Facebook buttons are highly popular ways to gain a following on your favorite social networks. By creating a button, you can leverage traffic to your social accounts. In today’s tutorial, we will guide you through the process of creating a button for Google Plus, Twitter, Facebook, or any other website.
Google   Logo
The process of creating a follow me button is similar, but also a bit different, depending on which social network you are referencing. Here are some guides to creating a follow me button on three of the web’s most popular social networks: Google Plus, Twitter, and Facebook.

Twitter

To get started, jump to the official Twitter resources page for creating follow buttons.
Follow Button - Twitter
From here, the process is fairly self explanatory, but we will still guide you through the process. The first step is to enter your Twitter user name.
Follow Twitter Button - Username
Next up, you will need to choose from either a light or dark background for your follow button.
Note: The preview pane, located on the right side of the screen, will provide a live preview of your follow me button, as it is being created.
Twitter Follow Button - BG Color
The final step for creating a follow me on Twitter button is to select Yes or No to Show Follower Count, and select a language for the Follow button.
Twitter Follow Tutorial
Once you have completed the simple three step process, the HTML code to the right of the screen will render a follow button, whenever you paste it into a HTML enabled web page, form, or other document.
Now, for a quick HTML lesson. If you want to center your Twitter button, it can be done using some very basic HTML coding:
Center
<div align=”center”>
YOUR GENERATED TWITTER CODE HERE
</div>
Left
<div align=”left”>
YOUR GENERATED TWITTER CODE HERE
</div>
Right
<div align=”center”>
YOUR GENERATED TWITTER CODE HERE
</div>

Facebook

To get started, open a web browser and navigate to Facebook.com. Login to your Facebook account. Once you are logged in to the site, open this url:
http://www.facebook.com/badges/
You will notice that there are several types of badges that you can create using Facebook. Select the option Profile Badge.
Facebook Badges
On the next screen, click the Edit this badge link.
Profile Badges Edit - Facebook
This page allows you to customize the layout and items to be included on the badge. You can customize the badge anyway that you’d like, but for a simple Facebook badge, select Layout: Vertical and only check Name: for Items:. Once you have finished creating your Facebook badge, click the Save button.
Facebook Badge Editing
This will return you to the previous screen. Now, select a website that you would like to add your follow me on Facebook button to. If you don’t use Blogger or TypePad, click the Other button.
Choose where to add the badge - Facebook
A HTML code for your Facebook profile will be instantly generated once you click on one of the Choose where to add the badge: buttons.
Facebook Badge HTML Code
From here, simply copy and paste the generated HTML into the webpage or other HTML compatible web form. If you want to align the button left, center, or right on the page, refer to the above HTML guide in this article.

Google Plus + and Other Websites

Google Plus has several options for creating +1 buttons. To create those, refer to this guide.
The previous link provides an excellent guide for creating +1 buttons. However, you may want to create a Follow Me on Google + button instead, which is a bit different. Creating a follow me on Google button, or a button for any social network, can be achieved by using basic HTML that you would use to link any image to a website.
The following, is the method that most professional websites use to create follow me buttons; which is why, you see all of those cool, customized buttons on different websites.
First, you need to either design or find a Follow Me on Google + image and save it to your computer. Tony Gines designed a nice button that you can find here. Alternatively, a Google Image Search with the term “follow me on Google button” will likely turn up some images that you can use too.
Follow Me on G  - By Tony Gines
Once you have found a button image, save it to your computer. Next, you need to upload the image to the web so that it has its own URL. This can be done using a quick uploading service such as Imgur, or even a Photo hosting service such as Picasa or Photobucket.
You now need to get the URL for your Google + account and copy and paste it into Notepad or Text Edit.
From here, you can use the image URL (hosted at Imgur, Picasa, etc…), your Google + profile URL, and some HTML to create the button.
<a href = “putyourGoogle+profileURLhere.com”><img src = “yourimageURLgoeshere.png” border = “0″></a>
Once you have completed the above HTML, you can simply paste the edited code into any HTML enabled web forms or webpages.
That concludes our guide to creating follow me buttons. If you are having any troubles with the HTML, leave a comment and I will try to help. Enjoy!

No comments:

Post a Comment