Help with share button code box ...

[wahmsuzanne]

Hey gang ... I want to have a "I Voted for Suzanne Franco" button on my blog that my supporters can use to put on their site. On this blog http://oikology101.blogspot.com/2008/09/make-your-own-button-for-your-blogger.html the gal explains how to add the button and the code box ... but it's for Blogger ... would that make a difference? I want to add the code box in a Wordpress post ... so that all my readers need to do is copy the code out of the box and add the code to their side bar (or wherever they want to put it) ... it will be part of a contest I doing ... Thanks!!!!!! *SmiLes* Suzanne

[akira07]

do you already make code for blogger? If yes, just send PM or write it here, i will help you to share that button. I'll also place it in my blog, well my blog is not popular blog but at least i wanna help you :D

[wahmsuzanne]

Thanks! No, I haven't done it ... I don't have blogger ... Are those directions JUST for blogger? I didn't follow it ... But I only got a couple hours sleep so I'm not very sharp right now. What do I need to do? The image is an animated gif.

[akira07]

ok, if you already make it (both for blogger or wordpress) post the code here. Anyway, it's better on the animated gif is contain interesting thing like contest information or share e-book away.

[navjotjsingh]

First 3 steps remain same for Wordpress. Now for step 4, since you want to insert the code into your post, switch to HTML View in your write post box, now add the button html generated in step 3 in your post box in HTML View. Now switch to Visual View and see that button should show up in Visual View.

Now for step 5, make the text box code as directed in above post. Now paste this complete form code made in button 5 again in your post but switch to HTML View before you paste this code. Then again after pasting switch to Visual View just to check whether form shows up in Visual View or not.

And now your button with the form code should have appeared in your post. If you face any probems, post again here.

[sarahG]

Blimey, that's horrible code in use there. Suzanne, following on from Navjot's post above, just insert the following into your post (using the example that your button is called button.gif and stored in a folder called images).

Here's the button:

<a href="http://www.suzannefranco.com/"><img src="/images/button.gif" alt="I Voted for Suzanne Franco" /></a>

Here's the code:

<code>&lt;a href="http://www.suzannefranco.com/"&gt;&lt;img src="/images/button.gif" alt="I Voted for Suzanne Franco" /&gt;&lt;/a&gt;</code>

Obviously you can change the 'Here's the button' and 'Here's the code' to whatever you want to say, but the first line of code will put the button on display and the second bit of code will display the code on your site as plain text, between code tags which is the correct way. Don't worry about how it looks above, the &lt; and &gt; have just been used to replace the < and > so that it displays on screen and doesn't get mistaken as actual HTML code.

[wahmsuzanne]

Wow! Weird. I don't think I ever got an email alert for any of these responses.

Thank you guys very much ... I will give it a try today and report back here. *SmiLes* Suzanne

OK ... named the image and then copy/pasted the code and this is what I got:

http://www.suzannefranco.com/?p=722&preview=true

???

[navjotjsingh]

http://www.suzannefranco.com/?p=722&preview=true

???

Only you can view the contents of that page. Not everybody can preview that page. Its better if you post screenshot of that page.

[wahmsuzanne]

Only you can view the contents of that page. Not everybody can preview that page. Its better if you post screenshot of that page.


Sorry!
http://www.suzannefranco.com/images/button-box-screen.jpg

Hope that worked! S

[navjotjsingh]

Looks Ok..but put that button in a new line...its looking odd in front of text. And for the code, wrap the code in a textarea tag like:

<textarea rows="2" cols="20"><a href="http://www.suzannefranco.com"><img src="http://www.suzannefranco.com/images/button.gif" alt="I voted for Suzanne Franco"></textarea>

Using Textarea tag has advantage since when people copy the code from the box, all the text gets selected and its easier to copy.

BTW IF you notice, I changed the url in img tab since the relative url will work in your blog but not on others unless you are asking people to download the image and save from their own blog.

[sarahG]

No, don't use a textarea! That's not what they're there for. You can easily copy the code directly off the page. Suzanne just didn't format the code I wrote above.

Suzanne, you need to either put some paragraph tags in or additional spacing. I don't know how you're adding this. However final markup should be

<p>Here's the button:<br />
<a href="http://www.suzannefranco.com/"><img src="/images/button.gif" alt="I Voted for Suzanne Franco" /></a></p>

<p>Here's the code:</p>

<p><code>&lt;a href="http://www.suzannefranco.com/"&gt;&lt;img src="http://www.suzannefranco.com/images/button.gif" alt="I Voted for Suzanne Franco" /&gt;&lt;/a&gt;</code></p>

Textareas are for forms, not for holding code.

[wahmsuzanne]

No, don't use a textarea! That's not what they're there for. You can easily copy the code directly off the page. Suzanne just didn't format the code I wrote above.

Suzanne, you need to either put some paragraph tags in or additional spacing. I don't know how you're adding this. However final markup should be

<p>Here's the button:<br />
<a href="http://www.suzannefranco.com/"><img src="/images/button.gif" alt="I Voted for Suzanne Franco" /></a></p>

<p>Here's the code:</p>

<p><code>&lt;a href="http://www.suzannefranco.com/"&gt;&lt;img src="http://www.suzannefranco.com/images/button.gif" alt="I Voted for Suzanne Franco" /&gt;&lt;/a&gt;</code></p>

Textareas are for forms, not for holding code.

OK ... this worked great! Thanks Sarah (and everyone who contributed!) ... I wish I were better at this stuff. Every time I learn a little more ... I only realize how much I DON'T know! LOL

I know people are familiar with the little slide bar code boxes ... but I think this will work great for what I'm doing ... and I'm grateful! I will tweak the wording a bit and put the right url in there once I write the post *huGs* Suzanne

http://www.suzannefranco.com/images/button-code-image.jpg