Add a "Circle me on Google Plus" widget to my blog?
I already have a nice widget from Facebook on my blog that lets people friend me but I don't see anything equivalent from Google Plus as of yet. I'm wondering if there's anything like that available and if not, whether it'd be hard to create for my blog?
If you're reading this article on my blog, you can look on the right and you'll see that I too have a similar widget from Facebook that not only offers an easy way to become a fan of the site (or just go to The Ask Dave Taylor Fan Club and join us there!) but also shows a few thumbnails of your friends who have already done so, or other folk who are savvy enough to "like" it.
Move to Google Plus, however, and it's a whole new ballgame and there is no official Google widget available that offers similar functionality. Yet.
Fortunately, there are some third party developers who have created pretty nice alternatives if you want to try them out, notably including Scriptrr.com.
My friend Tara has the Scriptrr widget on her blog, and as you can see, the results are very attractive:
Let's say you don't want to use a third party widget but instead want to build your own, however. I like to build things myself, personally, so this is right up my alley anyway...
The first step will be to figure out the link to your Google Plus page. That's most easily done by going to your Google Plus home page, then copying your name link with a right-click, like this:
The result is a URL similar to mine:
What we'll want is a slight variation of that URL because we don't need the "/u/0" part and we'll want to replace "plus" with "profiles", so the URL we'll use is the trimmed down:
Now click on that link and you should see a larger version of your profile picture:
Notice that in addition to the image, it also shows you the slogan or tag line you've set. Mine is "Blogger, speaker, film critic, proud dad and all around fun dude!". We'll want to use that in a bit too, but the key thing is to grab the thumbnail image. Easily done with another right-click (Cmd-Click for you Mac users):
If you're obsessive about it, here's where you could resize the image to reduce it about 30% or so, but it's not a big deal. Upload it to your server, however, so you can reference it as a Web-accessible image. For me, that produces the URL:
That's about it. We have a nice image, we have the URL for the Google Plus profile, all we need is some HTML and for that, let's just produce something nice and open, like what Tara has on her page.
Beware, it's a lot of HTML, but you don't need to necessarily understand it, just know how to tweak it.
Here's what I wrote:
<div style="border:1px solid #999;border-radius:8px;width:200px;font-family:sans-serif;color:#666;">
<div style="background: #999;padding:2px;font-size:85%;color:#fff;">
<center>Circle me on Google Plus!</center>
<div style="font-weight:bold;padding:5px;">Dave Taylor</div>
alt="Dave Taylor on Google Plus" width="140" height="140" border="0" /></a>
Blogger, speaker, film critic...
<div style="background: #DB4A38;padding:8px;width:80px;font-size:80%;color:#fff;margin:4px;">
Add to circles</a>
The most important elements are those that I have highlighted with bold text. Those you'll definitely need to change!
I can already hear you saying "o.m.g. this is crazy complicated!" but look at the result of adding this code block to your page once you've grabbed your photo and made the few tweaks necessary:
Very nice, if I say so myself!
Since you can just copy and paste the HTML above into your blog template or similar, the hardest piece of the puzzle is saving your profile picture from Google Plus and then uploading it to a Web-accessible server like Flickr. If you have Wordpress, though, you can also just drop it into your Wordpress gallery and let it tell you the URL of the image.
Otherwise, it's copy, paste, substitute elements as highlighted above, and enjoy more people circling you on Google Plus. Sweet!
And while you're at it, why not circle me on Google Plus too!
More Useful Facebook Help Articles:
✔ How can I block event invites on Facebook?
I have a friend who keeps inviting me to webinars where he pitches his make-money programs. I really like the guy, but hate...✔ Shortcut for blocking games on Facebook?
I saw your article from a while back about blocking Coasterville notifications on Facebook and was wondering if you had a shortcut or...✔ Update Facebook profile picture without notifying friends?
Hey Dave! Whenever I change my profile picture on Facebook all my friends are notified of this change. Not good. How do I...✔ How do I permanently block CoasterVille on Facebook?
My brother is really into Facebook games and the latest that he seems obsessed with is called CoasterVille. I think it's all about...✔ Disable audio notification sound in Facebook?
This is something new: When I'm logged in to Facebook I now get an annoying audio beep every time someone posts something new...
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
I do have a comment, now that you mention it!
Check This Out Too...
Look for Answers
All Our Categories
Apple iPad Help
Articles and Reviews
Auctions and Online Shopping
Blogs and Blogging
Building Web Site Traffic
Business and Management
Computer and Internet Basics
d) None of the Above
Google Gmail Help
Google Plus Help
Industry News and Trade Shows
iPhone and Cell Phone Help
iPod, Sony PSP and MP3 Player Help
Kindle Fire Help
Mac OS X Help
Pay Per Click (PPC) Advertising
Search Engine Optimization (SEO)
Shell Script Programming
Tech Support Video Help
The Writing Business
Twitter, LinkedIn and Social Network Help
Unix and Linux Help
Video Game Tips and Help
Windows PC Help
Find Me on Google+
ADT on G+