(Astro Blogging) You’ve seen some of your friends add a Facebook “Like” button and a “Tweet” button to each of their posts. And you think “Gee, I’d like to do that too!” Actually Blog Grader recommends that you do. This was my blogging project yesterday for Astrology Explored. At one site I grabbed the code for a Facebook Like button, and another a Tweet button picking in each case the horizontal option with the intention of putting them side by side. Except of course, it didn’t quite work like that, since the code for each didn’t quite match in size parameters. The Facebook button’s code actually stretch across the length of the blog post preventing the Tweet button to side next to it. Even when I fiddled with the length parm for the Like button, the Tweet button sadly sat below it to the left. Hmm. Sometimes you just have to fiddle with the code.
Actually, if you are paying attention, you can change some of these parameters even on the page where you grab the code. However, some people aren’t even aware of their pixel width for a blog page, so it is just as easy to make changes within the code as long as you are careful.
For some the thought of tweeking a code is scary. Many of us don’t know enough about how these codes are put together. And it is true a little misstep can produce some unintended results. Let’s take a look at one code, so you can get an idea of what you are looking at. Let’s look at the Facebook Like button which I laid out here in pieces.
iframe src= This is the opening statement which defines what this particular piece of code is. There are different statement, they all do pretty much the same thing. Do not change this
http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.astrologyexplored.net%2Fhome& In this piece of the string is your web address to link the action of the code to your site. Again do not change this.
;layout=standard&show_faces=true& Instructions for look of the button. Do not alter.
width=450& Ah, something looks like it can be changed! This is the width, which at 450 goes across the length of the blog. But no, this in not the number to change because changing it will do nothing. Just leave it alone.
action=like&colorscheme=light& More instructions for the look of the button. Unless you want to be particularly daring, just leave it alone.
height=80″ Though we want to change the height, this is not the place to do it.
scrolling=”no” Another instruction to ignore.
frameborder=”0″ style=”border:none; overflow:hidden; Again, no need to fiddle with this.
width:450px; With the “px” notation, which stands for pixels you can change this number as long as it is not shorter than the image. In this case I changed it to 300, which when the Tweet button butts up against it, will put the Tweet button at the half way mark of the blog. Sweet.
height:80px;” The height parameter, to achieve the effect I am looking for needs to be changed. Since on the Tweet button’s height is 20 pixel, I’ll change the Facebook button’s height to the same pixel height.
allowTransparency=”true”> Another image instruction. No need to touch this.
/iframe The closing statement which closes the door on this piece of code. Leave this alone.
To put the two side by side, just insert the Tweet code at the end of the closing iframe statement.
The result is this:
Go ahead. Press the buttons. See what happens!
So what do you do to have this code show up in each of your posts? Sorry, no automation here. Copy and paste it each time in the new post.
__________________________________________________________________
Beth Turnage authors Astrology Explored as well as being publisher of Astrology Media Press. Beth is available for private consultations. You can contact Beth at starrynightastro@aol.com.
____________________________________________________________________
Image from Photobucket from user FamousPoliceDog
I think it would be much more efficient to go into the php page (for example if you’re using WordPress) and find the DIV area immediately before or after the content area. You just use the correct “hook” like the_permalink to automate the URL for the specific blog post. I wrote a tutorial a while ago on how to integrate.