Recent Topics

Fix my Flickr Badge?

Started by on Apr 01, 2008 – Contents updated: Apr 01, 2008

Apr 01, 2008 04:44    

My b2evolution Version: Not Entered

Hey Everyone,
I only have a month of website design under my belt so please be gentle.

I wanted to put pics in my blog so I went to Flickr and made something there called a Flickr Badge. It generated code and told me to insert it in my blog. So I went to the post I wanted the pics in and hit the "code" tab, then pasted the code they gave me. All sorts of red warnings came up and I had disable my java script secuity and something else before it would let the code in and display my pics. They now show up beautifully in my post, but when someone clicks on them to go to Flickr I want it to open Flickr in a new browser so they don't leave my site. Also I don't know squat about site security and sorta dont like those security settings disabled. Cause that's bad right?

See http://www.ifurbish.com/b2evolution/blogs/blog1.php/2008/03/17/re-finishing-wood-floors-with-black-stai#more25
or www.ifurbish.com then click browse articles in top left, then click the wood floors post

Here is the code Flickr gave me:

<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#000000;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; text-align:left; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#000000;}
#flickr_badge_wrapper {background-color:#00CCCC;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#000000 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=random&size=t&layout=h&source=user_set&user=24741972%40N05&set=72157604332975105&context=in%2Fset-72157604332975105%2F"></script>
<td id="flickr_badge_source" valign="center" align="center">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td width="10" id="flickr_icon_td"><a href="http://www.flickr.com/photos/ifurbish/sets/72157604332975105/"><img id="flickr_badge_icon" alt="ifurbish's Refinishing Wood Floors With Black Stains / Spots on Them photoset" src="http://farm3.static.flickr.com/2262/buddyicons/24741972@N05.jpg?1205784155#24741972@N05" align="left" width="48" height="48"></a></td>
<td id="flickr_badge_source_txt">ifurbish's <a href="http://www.flickr.com/photos/ifurbish/sets/72157604332975105/">Refinishing Wood Floors With Black Stains / Spots on Them</a> photoset</td>
</tr></table>
</td>
</tr>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->

That may as well be Chinese Glyphs to me so speak in small words so my brain doesn't start smoking :D
Oh, I was able to make the code into a widget but then it would only display on the right side of the blog page instead of in the post. :-/

Thank You in Advance,
Carmen

Apr 01, 2008 04:55

oh and I am running 2.4.1

Apr 01, 2008 09:43

Tell you what, instead of redoing your code for you, I will tell you how to do it, and where to get extra information "teach a man to fish..blah blah"

the Chinese glyphs, as you so aptly put it, are descriptions telling the web browser how to display the page, and what to do upon certain actions. The are called TAGS, and arranged (usually) like this <OPEN TAG tag options> tag content </CLOSE TAG>. This is HTML. (case insensitive, I just do Uppercase for tag names here to make it readable for you)

The TAG you are concerned with is <A HREF> </A>
One of the options for A is TARGET. If you set TARGET="_blank" then you will force the browser to open a new window for the link.

So compare that information to the code you already have, and I think you will see the solution.

Check out http://www.w3schools.com/ for more HTML and other web technologies. It can be fun and frustrating! :lol:

Apr 03, 2008 04:26

Thank you very much wombat. I will try my best! Should I keep inserting it as "code" in the post itself since it pops up a bunch of warnings and makes me disable some of my security features? That part really scares me since I don't know how to protect my site or anything yet.

I will post again tomorrow and let you know how I am doing with the code. I do really want to learn!

Thanks Again,
Carmen
www.ifurbish.com

Apr 03, 2008 05:36

Another thing you can consider is getting rid of all the bits that are only styles for the image.

<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#000000;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; text-align:left; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#000000;}
#flickr_badge_wrapper {background-color:#00CCCC;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#000000 !important;}
</style>

Pure style, no content. I'll bet that part doesn't change one bit for each snippet of code you get from them. Assuming this to be true you can simply add most of that to your skin's style sheet. Exclude the first two lines and the last line and you'll have the actual style definitions ready for permanently adding to your skin's style sheet. Make much smaller pages for downloading too, which your visitors with a slower connection will appreciate.

The actual image making bit is

<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&shrinked_for_forum_friendliness"></script>
<td id="flickr_badge_source" valign="center" align="center">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td width="10" id="flickr_icon_td"><a href="http://www.flickr.com/photos/ifurbish/sets/72157604332975105/"><img id="flickr_badge_icon" alt="ifurbish's Refinishing Wood Floors With Black Stains / Spots on Them photoset" src="http://farm3.static.flickr.com/2262/buddyicons/24741972@N05.jpg?1205784155#24741972@N05" align="left" width="48" height="48"></a></td>
<td id="flickr_badge_source_txt">ifurbish's <a href="http://www.flickr.com/photos/ifurbish/sets/72157604332975105/">Refinishing Wood Floors With Black Stains / Spots on Them</a> photoset</td>
</tr></table>
</td>
</tr>
</table>
</td></tr></table>

so technically that would be all you need in the post. It might be acceptable as-is that way, although it is calling a javascript so you might have to check (or uncheck?) one of the settings to make it happen.

Personally I've never used any services like that, but they are quite popular. I just upload my images and then add them to my post, or at least I did it that way when I had a camera ... then when I pretended my cell phone was a camera. Now I settle for boring text to drive visitors away ;)

Apr 03, 2008 21:17

Thanks Ed! I am headed to half-price books to see if I can pick up a book on html. It all looks like a very logical language, I just don't know any of the words yet. If that makes sense. Also Ed I am using your turing-test pluggin and I love it. So, thank you for that too!

Carmen

Apr 03, 2008 21:33

If you need html help then probably the best places to learn are :

[url=http://w3.org]w3c[/url] the mother of all standards .... that IE ignores :roll:
[url=http://w3schools.com]w3schools[/url] ... not somewhere I've visited, but it's a cool domain name :D
[url=http://htmlforums.com]html forums[/url] ... I tend to lurk here occasionally, but I recommend them for any html/css/javascript/php/mysql problems that you have .... and they have a great lounge, bonus :D

¥

Apr 03, 2008 21:49

You should just search the web for the helpful site you find most helpful, then spend the money you saved by not buying a book on buying ¥åßßå a drink. The poor fellow: his kids have to go to school with no shoes or books or even pencils what with the price of cheap wine gone up over a buck a gallon :(

Really: find an online source that you dig on. 3 or 5 or 7 if you find a lot that help. But not 2 or 4 or 6 of course - only odd numbers. There are TONS of sites out there that will help you with CSS and HTML and all that stuff. Even php can be learned online. After all, you're not learning about printing right?

I forget my favorite sites because I always just google the key terms. Like for example "xhtml textarea example" and if that didn't work "xhtml textarea sample" until I find the domain name that I liked last time. Also eventually you will no longer need the "tutorial for noobs" stuff, so then you will find http://www.w3.org/TR/REC-CSS2/propidx.html awesome for your stylesheet work and http://www.php.net/ for your php coding needs.

EDIT: The W3 Schools link is really good.

Apr 03, 2008 21:56

I could handle the increase in the price for cheap wine, it's when they put up the price of paint stripper that I cried :'(

¥


Form is loading...

Online manual generator – This forum is powered by b2evolution CMS, a complete engine for your website.