Adding Social Bookmarking/ Social Networking Links into Blogger Template

HTML & CSS
1

I recently redesigned by Blogger Blog by using a new template. I have implemented the template, but am having two problems.

I want to make the buttons at the top of my screen to resemble the “Share This” section of this page (near the bottom) of this page. I have coped the HTML and tried to use this, nut with no success.

I have also followed the instructions @ http://www.exploding-boy.com/2006/01/09/add-links-for-delicious-digg-and-more-to-blog-posts/

Every time I would try to save my template, Blogger would say “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The reference to entity “url” must end with the ‘;’ delimiter.”

My blog is located at http://blog.seooptimizers.com

I would like them to be pop-ups so visitors will not be lead away from my site. I also want the information such as page title and description to change as each page is stumbled, dugg, et.

My other problem is that there is not a big gap in between the post title and the post. Does anyone know what part of the CSS or HTML needs to be changed to make the text a different color? I have tried changing many areas and have continuously been unsuccessful.

All help is very much appreciated!

THANKS!!!

2

The gap under the headings seems to be the margin bottom on the title div and some meta content you have there that is coloured white so you can’t see it.

e.g.


div.title{margin-bottom:0!important}
.postmeta{color:#000!important}
3

To get rid of that message, change the & in each url to & . E.g.

<a href="http://del.icio.us/post?url=<?php the_permalink() ?>[COLOR="Red"]&amp;[/COLOR]title=<?php the_title(); ?>">Del.icio.us</a>

To have the popup used on the site you linked to, you can use services like ShareThis and just plop their code into you page (fugly though it be):

4

Oops, no I’m wrong. Even though the & thing is a good tip anyway, I think the error is referring to the lack of a ; as shown in red below:

<a href="http://del.icio.us/post?url=<?php the_permalink()[B][COLOR="Red"]; [/COLOR][/B]?>&amp;title=<?php the_title(); ?>">Del.icio.us</a>
5

Thank you for the quick response. I was able to fix the margin and coloring! :slight_smile:

Unfortunately, I am still getting errors with the social buttons. When I put the line of code:
<li>
<a class=‘bookmark’ href=‘http://del.icio.us/post?url=&lt;?php the_permalink(); ?>&title=<?php the_title(); ?>’ target=‘_blank’ title=‘Delicious’>
<img alt=‘Delicious Link’ src=‘http://2.bp.blogspot.com/_gpF2ywAQTzU/S0lSiV0tUzI/AAAAAAAAAqo/XQHEi6tM7XM/s1600/delicious-ico.png’/>
</a>
</li>

I get the error: “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The value of attribute “href” associated with an element type “null” must not contain the ‘<’ character.”

6

Can you show us the generated ouput of that? PHP doesn’t help us much :slight_smile:

It looks like that not everything in the PHP is wrapped with quotes :slight_smile:

7

The code you’re using for the social icon links is for Wordpress blogs. For Blogger sites, you’ll want to use the code from the following page…

http://www.exploding-boy.com/2007/01/31/add-social-bookmarks-to-blogger/

:slight_smile:

8

http://www.exploding-boy.com/2007/01...ks-to-blogger/ is an old post and does not work in the new version of Blogger.

I now get the error

XML error message: The reference to entity “url” must end with the ‘;’ delimiter.

What do you mean:
"Can you show us the generated ouput of that? PHP doesn’t help us much

It looks like that not everything in the PHP is wrapped with quotes "

9

http://tips-for-new-bloggers.blogspot.com/2007/08/social-bookmarking-links-in-blogger.html

slightly newer posts with code examples for the ‘new’ template. I don’t really use Blogger so didn’t test them out, but hopefully these may work?

10

Thanks agarcia831 this site http://tips-for-new-bloggers.blogspot.com/2007/08/social-bookmarking-links-in-blogger.html let me input the code and it went through without any errors.

Unfortunately, now when i try to use the buttons it is not drawing the correct information out. It says invalid URL and post title/ description.

For example, go to my blog and try clicking on the delicious or digg buttons (first 2 on left) these have the new code, but will not work properly. Anyone know what is causing this and how to fix this.

Thanks :slight_smile:

11

been trying to figure this out…and I found a blog post that explains how to convert code for the old template for use on new templates…and read this at the bottom of the page…

But beware - remember a lot of the code relates to the post body of individual posts, so it may not work in a sidebar and you may have to change the data tag to something more appropriate for that location.

Similarly you could put the code in the page footer section or the top of the page as well or instead of each individual post, and use variations on the code for that - but I won’t deal with that here.

I figure if those social icon buttons aren’t in the post body area, that could be causing any errors and so the data tagss in the links may have to be tweaked somehow. Looked through the data tags page and came up with this…


<a expr:href='"http://del.icio.us/post?url=" + [COLOR="Red"]data:blog.url[/COLOR] + "&amp;title=" + [COLOR="Red"]data:blog.pageTitle[/COLOR]' target='_blank' class='bookmark' title='Delicious'>

I replaced data:post.url with data:blog.url…and data:post.title with data:blog:pageTitle.
tried the code on a test blogger account and it seems to work…or at least the blog url and title in the url are coming up instead of the code.