Home » Squidoo Community » Traffic & Promotion » Social networking for lenses

Build a "Shameless Plug" Widget

Ranked #678 in Squidoo Community, #87,948 overall

Codes For Social Media Buttons / Bookmarks

A lot of people have asked for the HTML/CSS Codes for my "Shameless Plug Widget": a bit of CSS code and small buttons for Facebook, Twitter, etc.

Recently, I created a new, simpler social media buttons strip that includes different services. (See example below the "Shameless Plug Widget").

Scroll down to get the HTML/CSS codes for both Shameless Plug Widgets: Classic or New. Or learn how to customize them for different social media sites.

Twitter Share on Facebook Digg
Stumbleupon Delicious Email It

Rules for using my Shameless Plug Templates: Simple! Shamelessly plug this page by Liking it or clicking a button:

Shameless Plug Widget Classic

When I made this in 2007, Facebook wasn't so danged popular...

Shameless Plug Widget Tweet it!   Stumble it!
Mail it!     Favorite it!

I hope you've found this tutorial useful. Feel free to drop a note! If it was really useful, then please consider clicking the magic widget!

Code For Shameless Plug Widget Classic

It looks scary, but I've done the work for you!

Here's the code. Copy it to a text window, then use find/replace to change "squidurl" to the URL of your lens.



<span style="display: block;"><p style="text-align: center; font-size: 9pt; color: #f90; font-family: Arial; font-weight: bold; float: right; margin: 0px 0px 15px 30px; line-height: 14pt; background-color: #f7f7f7; border: solid 2px #999; -moz-border-radius: 10px; -webkit-border-radius: 10px; text-align: right; width: 14em; padding: 0px;"><i style="text-align: center; display: block; background-color: #005087; color: white; font-family: Trebuchet MS; font-size: 10pt; padding: 2px; -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-bottom: solid 2px #999;">Shameless Plug Widget</i><b style="display: block; padding: 3px; text-align: center; margin: 0px;"><a href="http://twitter.com/home?status=Reading%20this:+http://www.squidoo.com/squidurl" title="Twitter" style="text-decoration: none;" rel="nofollow"><img style="border: 0px; vertical-align: middle;" src="http://tinyurl.com/27s7ak9"> Tweet it!</a> &nbsp; <a href="http://www.stumbleupon.com/submit?url=http://www.squidoo.com/squidurl" title="StumbleUpon" style="text-decoration: none; rel="nofollow"><img style="border: 0px; vertical-align: middle;" src="http://tinyurl.com/2e9lcfa"> Stumble it!</a><br><a href="mailto:someone@somewhere.com?body=Check out this great page: http://www.squidoo.com/squidurl" title="Mail It!" style="text-decoration: none;" rel="nofollow"><img style="border: 0px; vertical-align: middle;" src="http://tinyurl.com/sqdmail" > Mail it!</a> &nbsp; &nbsp;<a href="http://www.squidoo.com/member/add_favorite/squidurl" title="Favorite It!" style="text-decoration: none;" rel="nofollow"><img style="border: 0px; vertical-align: middle;" src="http://tinyurl.com/26b53z6"> Favorite it!</a></b></p><p style="margin-top: 3px;">I hope you've found this tutorial useful. Feel free to drop a note! If it was <i>really</i> useful, then please consider clicking the magic widget!</p></span>

Customizing / Changing Shameless Plug Widget

You can replace my buttons with different ones

If you look closely, the code for each button consists of...

<a href="submit-to-social-network" style="text-decoration: none;" rel="nofollow"><img style="border: 0px; vertical-align: middle;" src="graphic-goes-here"> Text Blurb!</a>

In other words:

1. A link that will submit url X to social network Y. The format of this link is unique to each social media site. Here is a great page on custom "share it" urls for many popular social media services, including ones I skipped such as Digg and Technorati.

2. A social media graphic. Mine are 16x16pixels. So you can replace any graphic with a different 16x16 graphic.

3. A two-word command like "Tweet it!" or "Blog it!"

For example, I could replace one of the buttons with this code to make a Facebook Share button:

<a href="http://www.facebook.com/share.php?u=http://www.squidoo.com/shameless-plug-widget-social-media-buttons&t=Build a Shameless Plug Widget" style="text-decoration: none;" rel="nofollow"><img style="border: 0px; vertical-align: middle;" src="http://tinyurl.com/sqdface"> Share It!</a>

(Note that http://tinyurl.com/sqdface is actually the URL for an image.... it was a long URL, so I created a shortcut for it).

If you use my codes elsewhere, host the images

Let's not steal Squidoo's bandwidth off-site

New Shameless Plug Widget

Mix-and-Match Social Media Icons

Twitter Share on Facebook Digg Stumbleupon Delicious Email It

This is a cleaner, meaner social media buttons widget. In addition to submitting the lens URL (where you want the link to point), it also lets you submit the TITLE of the link, which becomes the words people click on to visit the link.

Code For New Shameless Plug Widget

Copy this code into a blank text document, then Find/Replace All...

Here's the code. To customize it for YOUR  lens...

     1. Find/replace "squidurl" with the URL of your lens.
    2. Find/replace "lenstitle" with the TITLE of your lens.

For mine, I put "shameless-plug-widget-social-media-buttons" as the URL and "Build a Shameless Plug Widget" as the lenstitle.



<p style="padding: 0px; margin: 0px 0px 5px 5px; float: right; width: 120px;"><a href="http://twitter.com/home?status=Reading this: http://www.squidoo.com/squidurl / lenstitle" title="Tweet This!" rel="nofollow"><img src="http://tinyurl.com/sqdtwit" style="vertical-align: middle;" alt="Twitter"></a> <a href="http://www.facebook.com/share.php?u=http://www.squidoo.com/squidurl&t=lenstitle" rel="nofollow"><img src="http://tinyurl.com/sqdface" style="vertical-align: middle;" alt="Share on Facebook"></a> <a href="http://digg.com/submit?phase=2&url=http://www.squidoo.com/squidurl&title=lenstitle" rel="nofollow" title="Digg It!"><img src="http://tinyurl.com/sqddig" style="vertical-align: middle;" alt="Digg"></a> <a href="http://www.stumbleupon.com/submit?url=http://www.squidoo.com/squidurl&title=lenstitle" rel="nofollow" title="Stumble It!"><img src="http://tinyurl.com/sqdstum" style="vertical-align: middle;" alt="Stumbleupon"></a> <a href="http://del.icio.us/post?url=http://www.squidoo.com/squidurl&title=lenstitle" rel="nofollow" title="Delicious"><img src="http://tinyurl.com/sqddeli" style="vertical-align: middle;" alt="Delicious"></a> <a href="mailto:someone@somewhere.com?body=Check out this great page: http://www.squidoo.com/squidurl" rel="nofollow" title="Email This Page"><img src="http://tinyurl.com/sqdmail" style="vertical-align: middle;" alt="Email It"></a></p> Start typing whatever you like here; the widget will float to the right of this text.

Customize the New Shameless Plug Widget

If You Want to Tinker With It and Add Your Own Buttons...

This widget consists of a paragraph which is an outer "wrapper," like the bun of the sandwich...
... then the "innards" of the sandwich consist of a series of clickable graphics, each of which is a link to a social media site...
...then the close-paragraph to finish off the outer wrapper.

<p style="padding: 0px; margin: 0px 0px 5px 5px; float: right; width: 120px;"><a href="http://twitter.com/home?status=Reading this: http://www.squidoo.com/squidurl / lenstitle" title="Tweet This!" rel="nofollow"><img src="http://tinyurl.com/sqdtwit" style="vertical-align: middle;" alt="Twitter"></a> [... put more social media buttons here... ] </p>

1. You can change the URLs to submit links to different social media services.

2. You can change the graphics to different graphics. I'm using 16x16 pixel graphics.

3. If you change the number of graphics, you need to change the width of the paragraph to match. The width must be >= the width of one graphic times the number of graphics. I'm lazy, so I rounded 16 up to 20.

4. If you want different-sized graphics, it works the same way! Just make sure they're all the same size.

Twitter Share on Facebook Digg Stumbleupon Delicious Email It

5. Here's another clever trick. If you set the width of the "wrapper" paragraph to only 60 pixels wide, it forces the buttons to wrap around onto two lines.

What About Google+1?

It looks easy, doesn't it?



Unfortunately, the only way to get a +1 button is with Javascript, which we can't add to a Squidoo page ourselves.

There's +1 buttons at the top of Squidoo Giant lenses. Let's suggest that SquidHQ add it to the bottom, too!

Squidoo's Built-In "Lens Love Widget"

Or you could just add THIS!

Did you know about this module? Use "Browse All Modules" and search for "Lens Love." It was originally created by Fluffanutta, and SquidooHQ turned it into a real module. It mimics the buttons at the very top or bottom of the lens, in case people don't bother to scroll.

I can't add a SquidLike button to MY widget, because it requires javascript, which text modules don't allow. Wah.

This module only appears with actual data when viewed on a live lens. The favorite and lensroll options will appear on a live lens if the viewer is a member of Squidoo and logged in.

Add this to your lens »

Squidoo's Built-in Bookmarks Widget

This Does What My Shameless Plug Widget Does

Here's another Fluffanutta special that got integrated into Squidoo. You can get it by browsing Squidoo modules and searching for "Bookmark Widget". It doesn't provide bookmarks to all the social media sites, though, so if you want more, use my template.

Add this to your lens »

Bookmark and Share

Graphics Tip

Rather than letting you hotlink to my website, I've uploaded the graphics to this lens and created a TinyURL for each of them. Using TinyURL may slow page loading very slightly, since there's some kind of, "Hey, TinyURL? Where's this graphic?" "It's over on Squidoo..." redirect going on. You may wish to upload these images to your own image host and use direct image URLs instead.

Poll: Which Widget Would You Use?

Just Curious

Loading poll. Please Wait...

Some of my other Squidoo Tutorials

While I'm on the subject of shameless plugs...

Loading

Guestbook and Feedback

Now you know just how much code goes into this...

Twitter Share on Facebook Digg Stumbleupon Delicious Email It

Did you remember to plug this lens? ;)

  • BiminiBahamas May 3, 2012 @ 5:16 am | delete
    YIKES! Thanks for all your help
  • Staceysk Nov 5, 2011 @ 11:34 pm | delete
    Great help! Tweeted it :)
  • kar351 Aug 29, 2011 @ 6:52 am | delete
    Very cool indeed. You have too much time on your hands. :P
    Gonna adapt it to my lenses soon. Since this was your creation, can I ask if I can change the title of the text (shamless plug widget) to something more related with the my lenses?
    p.s.
    You got "liked" and you got "digged" ;)
  • phoenix-arizona-friends Jul 15, 2011 @ 6:53 pm | delete
    Great lens.
  • Jaydoo May 2, 2011 @ 8:29 pm | delete
    excellent info, thank you. I got it to work...
  • Load More
Show All

Original Plug Widget

You may have noticed that the Shamleless Plug Widget I posted on page 1 of this tutorial doesn't look quite the ones you'll see elsewhere on Squidoo. That's because I've updated it. Here is the old 2007 version.

Original Shameless Plug Widget

This is the one you've seen everyone borrowing...

Shameless Plug Widget Tweet it!   Stumble it!
Rate it!     Favorite it!

I hope you've found this css codes tutorial useful. Feel free to drop a note! If it was really useful, then please consider clicking the magic widget!



 

Back in 2007, StumbleUpon was more popular, and Facebook wasn't.
Also, the SquidLike system (thumbs) was then a bunch of easy-to-miss stars at the top. So I created this Shameless Plug widget for my favorite social media services, and reminded people to give the lens some Squidlove.

PROBLEM: The Like/Rating button on Squidoo (now a thumb) can only be activated via javascript, which we aren't allowed to embed in a lens. So all I could do is have my "Rate It!" button pop back to the top of the lens and hope people saw where to rate it.

Also I was dumb and didn't realize that I should also include the icon for the link. As you see, only the text works.

But just in case anyone finds the original version useful, here's the code.

Code For Classic Shameless Plug Widget

2007-era Social Media Buttons

<span style="display: block; margin-top: -1em; text-decoration: none;"><p style="text-align: center; font-size: 9pt; color: #f90; font-family: Arial; font-weight: bold; float: right; margin: 0px 0px 15px 30px; line-height: 14pt; background-color: #f7f7f7; border: solid 2px #999; -moz-border-radius: 10px; -webkit-border-radius: 10px; text-align: right; width: 14em; padding: 0px;"><i style="text-align: center; display: block; background-color: #005087; color: white; font-family: Trebuchet MS; font-size: 10pt; padding: 2px; -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-bottom: solid 2px #999;">Shameless Plug Widget</i><b style="display: block; padding: 3px; text-align: center; margin: 0px;"><img align="top" src="http://tinyurl.com/2e9lcfa" /> <a href="http://twitter.com/home?status=Reading%20this:+http://www.squidoo.com/css-codes" target="_blank" title="Twitter" rel="nofollow">Tweet it!</a>  <img align="top" src="http://tinyurl.com/27s7ak9" /> <a href="http://www.stumbleupon.com/submit?url=http://www.squidoo.com/css-codes" target="_blank" title="StumbleUpon" rel="nofollow">Stumble it!</a><br /><img align="top" src="http://tinyurl.com/26b53z6" /> <a href="#">Rate it!</a>    <img align="top" src="http://tinyurl.com/28xdohj" /> <a href="http://www.squidoo.com/member/add_favorite/css-codes" rel="nofollow">Favorite it!</a></b></p><p style="padding: 10px;">I hope you've found this css codes tutorial useful. Feel free to drop a note! If it was <i>really</i> useful, then please consider clicking the magic widget!</p></span>

Social Media Graphics

I didn't want people hotlinking to my website, because you could eat up my bandwidth -- which I pay for -- if you all started using my shameless plug icons hosted on my own site. So I've uploaded the graphics for my Shameless Plug Widget right onto this lens.

That way you can all copy my code, and Squidoo will act as our image host. NOTE: Do NOT Hotlink these graphics on a non-Squidoo page. That wouldn't be fair, would it? If you're using these on another website, download them and upload them onto your own image host.

New Social Media Buttons

What a boring image gallery...

Old Social Media Buttons

Also boring...

Featured Lenses

Loading

by

Greekgeek

Storyteller, former Latin teacher, student of mythology and the ancient world: I've worn many hats, but always I've dabbled in computers and the web.

Until... more »

Feeling creative? Create a Lens!

Explore related pages

My Squidoo Blog 

Squidoo Tips and SEO

Loading

My Squidoo Tutorials 

Some of em, anyway

Loading

Related Tags