Social share buttons widget for blogger. Is it possible to choose your own Icons?

qvsr46ofgc792k

I have searched the internet and could not find the answer. Of course I seen many sites that you let customise a share bar but non that either let you choose the colour or indeed add your own icons? For example I would like my share icons to be a smaller version of my icons that link to my social network pages. Any help would be greatly appreciated, thank you.

biko

The buttons are images stored under your main directory somewhere.
You should be able to replace these with smaller versions?

qvsr46ofgc792k

biko wrote: »

The buttons are images stored under your main directory somewhere.
You should be able to replace these with smaller versions?

Wheres the main directory located?

Mrs OBumble

The dev tool here is Blogger, so forget the main-directory / root-directory talk - users don't have access, and aren't going to get it.


OP, are you getting your share-bar code from somewhere else?

When you look at that code, if it says something like this inside it somewhere

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

then you can get it to use your own image by changing it to

<img src="URL OF THE PICTURE YOU WANT TO USE" alt="Smiley face" height="42" width="42">


Where URL OF THE PICTURE YOU WANT TO USE is the web-address of your own image - eg if the picture is in Picasa-web-albums, the URL is something like http://3.bp.blogspot.com/-0U5INpLcBLg/TvpUmlUObaI/AAAAAAAAN8U/fYYoS7gJXK8/s320/Facebook_icon.jpg


But if the share-bar code you are using does not contain an <img> tag, you cannot both use this code and your own image.


Also, be aware of the issues around how to share the current post rather than your whole blog too - most people want their share-bar to do the former. There's a bit about this here:

qvsr46ofgc792k

Mrs OBumble wrote: »

The dev tool here is Blogger, so forget the main-directory / root-directory talk - users don't have access, and aren't going to get it.


OP, are you getting your share-bar code from somewhere else?

When you look at that code, if it says something like this inside it somewhere

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

then you can get it to use your own image by changing it to

<img src="URL OF THE PICTURE YOU WANT TO USE" alt="Smiley face" height="42" width="42">


Where URL OF THE PICTURE YOU WANT TO USE is the web-address of your own image - eg if the picture is in Picasa-web-albums, the URL is something like http://3.bp.blogspot.com/-0U5INpLcBLg/TvpUmlUObaI/AAAAAAAAN8U/fYYoS7gJXK8/s320/Facebook_icon.jpg


But if the share-bar code you are using does not contain an <img> tag, you cannot both use this code and your own image.


Also, be aware of the issues around how to share the current post rather than your whole blog too - most people want their share-bar to do the former. There's a bit about this here:

Hi Thanks for Replying.

OP, are you getting your share-bar code from somewhere else?
No. I have downloaded tiny individual social network logos (png) I did look at shared bars on other sites but none would match with my blog unfortunately.

When you look at that code, if it says something like this inside it somewhere

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

then you can get it to use your own image by changing it to

<img src="URL OF THE PICTURE YOU WANT TO USE" alt="Smiley face" height="42" width="42">


I really dont undertand what this means.

Where URL OF THE PICTURE YOU WANT TO USE is the web-address of your own image - eg if the picture is in Picasa-web-albums, the URL is something like

Again not quite sure what you mean. I have a photobucket site that I use for my social network logos (The one I use to direct people to my own site).

Also, be aware of the issues around how to share the current post rather than your whole blog too - most people want their share-bar to do the former. There's a bit about this here:

YES I would like to avoid this can you send the link?

Thanks for your help

Mrs OBumble

Stephen Crooked Violoncello wrote: »

YES I would like to avoid this can you send the link?

Thanks for your help

Duh ... sorry, I meant to post it the first time.

What you will need to do is get code to share the current post for each social network that you want on your Share bar.

For the information about making it a post specific share, see the section abtou "Sharing a Post vs Sharing the whole blog" in this article: http://blogger-hints-and-tips.blogspot.ie/2010/03/putting-facebook-share-this-badge-on.html




Back to your broader questions: you are going to find this quite difficult if you're not familiar enough with HTML (which I think you're probably not from what you said above).

Let me warn you that using your own icons is going to involve a learning curve. If you want to do it badly enough you will persevere. But ... since I cobbled together what's below, the AddThis and ShareThis services have got a lot better. I'm not sure that I'd bother working this out again myself - unless my own icons were absolutely amazing.





Below is the code which I usually use for a share-bar. It gives you an idea of what's involved overall - and this doesn't use my own icons, you will need to tweak it some more if you want to do that.



<!-- Share button row START -->

<div class='post-header-line-2'>

<b:if cond='data:blog.pageType == "item"'>

<table style='margin-top:10px; border-top: 0px dotted grey; padding-top: 5px; margin-bottom: 20px; border-bottom: 0px dotted grey; padding-bottom: 5px;'>
<tr style='padding-top: 5px; padding-bottom:5px;'>
<td style='padding-right: 30px'>
<!-- AddThis Button BEGIN -->
GET THE WIDGET CODE YOU WANT WITH YOUR OWN PUBLISHER id FROM ADD-THIS
<!-- AddThis Button END -->
</td>
<td style='padding-right: 30px'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like action='like' colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='false' show_faces='false'/>
</td>

<td style='padding-right: 2px'>
<a class='twitter-share-button' data-via='YOUR TWITTER ACCOUNT NAME' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a&gt;
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</td>


<td style='padding-right: 0px'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone expr:href='data:post.url' size='medium'/>

</td>

<td style='padding-right: 2px'>
<a href="http://www.reddit.com/submit&quot; onclick="window.location = 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false"> <img src="http://www.reddit.com/static/spreddit7.gif&quot; height="20px" alt="submit to reddit" border="0" /> </a>
</td>

</tr>
</table>


</b:if>

</div>


<!-- Share button row End -->