Add a help button next to "Share this Page Now"

This tip is related to the tip that adds the social links that are here above the sign-in box in JenSocial.  The full tip is in VIP...so sign up :).  You could probably adapt this for other locations and uses.

 

I wasn't sure that the average member of my network would be familiar with all the social links and their purpose on our site, so I wanted to add an unobtrusive help menu.

 

This is what the link looks like (the blue and white question mark):

When you hover it, it says "Share Buttons Explained". When you click it, this screen pops up: 

 

Here is how to make this happen:

1.  Find an icon you like.  I found this question mark for free and sized it to 20x20 pixels. A .png work best because of their transparent background.

2. Save that icon somewhere you can reference online, like Ning or your file server.

3. Write your help text in an html editor (I use Coffee Cup) or in Notepad.  You can use mine as inspiration, only, thanks.

Here is a template:

<HTML>
<HEAD>
<TITLE>Share Button Help</TITLE>
</HEAD>
<BODY>
<div align="center"><u>How and Why Should I Share this Page?</u><br />
Some text about your site here.
</div>
<p><b>Button 1</b> explain</p>
<p><b>Button 2</b> explain</p>
<p><b>Button 3</b> explain</p>
<p><b>Button 4</b> explain</p>

<p>Sum it up or add more </p>
</BODY>
</HTML>

 

4. Now also upload that .html file to your server.

5. Go to your custom code box.

Find this code you inserted for the original tip:

<div style="padding: 3px; background-color: #000000; font-size: 0.9em; color: #FFFFFF; margin-bottom: 6px;"><strong>Share This Page Now</strong></div>

 

Change to:

<div style="padding: 3px; background-color: #000000; font-size: 0.9em; color: #FFFFFF; margin-bottom: 6px;"><strong>Share This Page Now <a href="javascript:void(0)" onclick="window.open('http://yourpage.html','linkname','height=600, width=550,scrollbars=yes, resizable=yes')"><img src="your_image.png" title="Share Buttons Explained" alt="Share help" align=absmiddle></a></strong></div>

Now change the colors for your site. Add your file locations. Adjust the height and width of the pop-up window if needed. Edit the title and alt text.

 

There you go!!  Another way to get people to share your site!

Tags: help, links, social

Views: 82

Replies to This Discussion

Permalink Reply by Tips by Alex/JenSocial on June 28, 2011 at 9:36pm
Very sweet to explain why to share it. I don't know how to explain all these in Chinese is better yet.
Permalink Reply by GirlRiders on June 30, 2011 at 8:06pm

I changed the font and added some color on the help screen, I think its easier to read.

Permalink Reply by Daisy Lois on July 20, 2011 at 9:52am
Hello!
could share the example code samples. For people like me do not understand much ofcodes and at the same time we are interested. thanks
Permalink Reply by JenSocial on July 20, 2011 at 10:46am

Vanesa,

Not sure what you are requesting. The 4 button layout with the Like, Google +, Twitter, etc... comes from the VIP Group.

Best Regards,

Jen

Permalink Reply by GirlRiders on July 20, 2011 at 4:52pm
Vanesa, I'm also not sure what you are asking for, can you explain?
Permalink Reply by Daisy Lois on July 20, 2011 at 9:51am
Hello!
could share the example code samples. For people like me do not understand much ofcodes and at the same time we are interested. thanks
Permalink Reply by JenSocial on July 20, 2011 at 11:09am

Wow GirlRiders! You have such unique and helpful ideas. Great stuff!

Thank you for sharing,

Jen

Permalink Reply by GirlRiders on July 20, 2011 at 4:51pm
Thanks and you're welcome!

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips