Setting up the social sharing stuff.
Hi everyone,
I need some assistance from all of you. 
Here it goes:
1. Customization of social sharing buttons: I already have a few social buttons installed (from addthis, sharethis, etc.) but now I am looking to remove all of them and add the official buttons of the respective platforms (or any alternative option you suggest?) instead beneath each of my blog posts. The problem with the existing ones is that they cannot be customized (or atleast that's what I gather).
So for ex., when someone uses the 'Tweet' button to share my post, it shares it as 'via @sharethis' instead of the desirable 'via @artisdiary' (mytwitterhandle).
2. Removal of the old buttons: Once the new buttons are customized, I intend to delete the HTML code of the old share buttons but problem is that I don't remember how and where in the 'blogger HTML' have I added them in the first place. 
So you will need to find them for me.
>>
I sat down with this thing today but I am such a tech-illiterate that nothing seemed to work. I did find some success with the official tweet button but my joy was shortlived as the button was displaying at the end of my blog instead of at the end of my blog post. I have no clue of what is it that I am doing wrong. 
Can you help me out so that my blog becomes more social friendly? If yes, thanks, I am waiting to hear from you.
Also tell me, how do you optimize your posts for social sharing on the web? Especially if you are using blogger as the platform (or even wordpress, tumblr for that matter), please do share some insights, it might just help me or somebody else, we never know!
Arti, We now have a wealth of info thanks to your thread
& thanks to all the helpful souls!
Need to try these.
Hi Arti,
its quite easy to do that... Just go to www.addthis.com, select basic tools if you are looking for simple floating share buttons. In the smart layer options select the platform whether Blogger or wordpress, fill link to your facebook page, twitter profile etc., select the required options whether share is required... after completing this just click on install blogger widget, you will be directed to your blogger homepage (it will directly asks you to add widget if you are logged into your blogger) and widget 'AddThis Smart Layers' will be added to your blog layout. You can remove the title of the widget, just keep the title blank so that the name of widget will not be visible on blogpage and floating share buttons will be visible as floating as used in milaap site.
thats all
regards,
technophilo
Thank you so much, technophilo. Truly appreciate your taking the time to help. Will check this out. Thanks again! :)
Hey all,
What are you all using for the vertical floating share buttons? I am looking for something subtle like the buttons these people have: http://milaap.org/fund
If you have any useful links/tutorials to share or any ideas around that, please do take some time to share.
Thanks!
Just have a look at this post you will find simple social sharing buttons.. Simple design with the respective logos of social media... you may like it and easy to install...
please see http://www.techsperia.blogspot.in/2013/08/new-labnol-style-labels-widget-for.html, the earlier link is broken somehow...
That looks like a great site to learn and implement new things, technophilo! I will surely check out a few more links there! Let me see if I can get anything working for my site from there, many thanks for the share!
Get it from here and likewise
https://about.twitter.com/resources/buttons
Arti, whenever you add a code to your blog make sure you use the comment format too above and below the code, as we do not know html and css, atleast I so it would be difficult for us to manage things later. What I do is, this way:
<!--Below Codes Are For Social Sharing above blog posts--> This line is a comment so does not get included in the code<!--Facebook button starts--><b:if cond='data:blog.pageType == "item"'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like action='like' colorscheme='light' layout='standard' send='true' show_faces='false' width='350'/></b:if> <!--Facebook button ends --><!-- Place this tag where you want the +1 button to render --><b:if cond='data:blog.pageType == "item"'><g:plusone/></b:if><!--stumbleuponbutton starts --><b:if cond='data:blog.pageType == "item"'><a expr:href='"http://www.stumbleupon.com/submit?url=" +data:post.url'><img alt='StumbleUpon' border='0' src='http://www.stumbleupon.com/images/stumble7.gif'/></a></b:if><!--stumbleupon button ends --><!--Above Codes Are For Social Share-->
Place this code where ever you wish the buttons to appear, you can also add other social sharing sites code inbetween which can be found on the site itself like twitter button on twitter blog or an official twitter page and likewise, just google it.
Thanks for this tip, Neeraj. Yeah, you are right. For sites that generate auto-code for you like AddThis and ShareThis, these comments are in built. That's how I could find them and delete them. I will surely keep this comment thing in mind.
Arti use Filament Flare social share buttons they come both in horizontal and below the post type with customisations for various buttons colours etc. You have to just sign up and add a code to your blog under <head> and then do the changes on Filament site.
The best thing about filament is that they are drag and drop so pretty simple and the tweet or FB share dont contain outside links
You can see the demo if you want on my site
Vijay
Thanks for sharing about Filament Flare, Vijay. I checked out your website, looks nice and it gels well with your layout. :)
It's lovely that filament gives all those customizations at the click of a button, makes it that much hassle free. However, I was wondering if the tweet button can also be customized? So that when someone shares the post, the tweet originates from ----- via 'our twitter handle'? -----
no Arti I dont think they allow it but will speak to the guy with filament 
@ Arti Did you include the code at the right place.
Here is a test blog I've created. SAMPLE is the text I've inserted ( instead of the share buttons )
Here is the default blog template with the only change being the addition of the above code. See lines 1509-1520 and check if you have inserted the code at the right place.
link for blog template : http://pastebin.com/5t7rCcxT
Oops, put it in the wrong position! Thanks for the heads-up, corrected.
Now, the buttons can be seen at the end of the post area (and not the footer). Also, I re-installed my linkwithin gadget and customized it so that it appears below the share buttons with the help of this article: http://helplogger.blogspot.in/2014/02/customize-linkwithin-gadget-related-posts-gadget.html
Overall, looks pretty neat and much in line with what I had asked for, thanks for all your time and help, Ranjith, I will be here to trouble you again, when (and if) I need any further help. 
@Anita Should you need the code or any other related help, please do let me know, I will paste it here. :) Also, if you are doing it along, do share your progress, it will be a better feeling to stumble upon together! 
I played around a bit and the final result looks something like this:
I have got the official customized buttons in the footer of each of my posts. I followed all the instructions found in this post and placed it at the same place as Ranjith suggested. Looks good since yesterday. Thanks, Ranjith.
Now, I need further customizations.
1. I want the share buttons to appear not in the post-footer but in the post-body that is as soon as my post ends (in my case before the link-within gadget), consider this snippet example:
"
--------- MY POST ENDS HERE -----------------
If you enjoyed reading this article, you can ...
Subscribe to my e-mail subscribers or
*The social sharing buttons here*
---------- LINK WITHIN WIDGET -----------------
----------- POST FOOTER ----------------------
"
Where should the code be placed in this case? Also, how to include this line before the buttons,
"If you enjoyed reading this article, you can ...
Subscribe to my e-mail subscribers or"
... along with a link to my email subscription so that it appears in all the posts automatically?
Arti, Quest is on as even I am still trying to find the simplest & the best buttons!
Read a bit about some of the Share buttons and shared 2 Posts on my findings & requirements.
Most friends are using Shareaholic Buttons that can be customized. AddThis is cool too & we can update our details easily for customization. For ShareThis also we can customize... But, most involve codes.
Personally, I'd love if the default Blogger buttons can be customized to reflect our handle/info. Wish Blogger enhanced its own buttons so that we don't have to helplessly search for customized ones!
Further, Twitter & G+ have their own code that we can put in our Blog, but they'd need the code to be placed in the right place in the HTML section of our Blog. Else, just employing the widget would place it elsewhere & not where we desire! Even I have faced the same issues about the position.
Wonderful that you have shared these requirements on the Forum here. We are sure to find help & solutions soon!
I agree with the default share buttons that blogger provides, its high time they revamped the look and style and made life easier for us, as of now they are near to useless!
Till now, I had been using buttons from both AddThis and ShareThis but I could find no customizations mainly for twitter. Maybe, I missed digging deeper, but even if there are, I am sure they are not as easy to find and implement especially with Blogger.
And I am glad you bring up the point of your posts Anita, read one of them yesterday, and that's where I got the kick. 
You have done a great job with your tutorials and I hope you also update it as and when you have the complete info on the placements, etc. It is going to be one helpful article for many out here, for sure!
Search for the following in your HTML
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if>
Below the above code, add
<b:if cond='data:blog.pageType == "item"'>
SAMPLE
</b:if>
Replace SAMPLE with the code for the social sharing buttons.
Ranjith, Will inserting this code remove the old/previous Buttons code?
What about the customization?
The above code is used for adding some content ( share buttons, email subscription form, recommended posts etc ) at the end of every post. It is completely unrrelated to other sharing buttons present in your blog. You should remove the previous buttons yourself. The above code won't do it.
What customisations?
Yes, sharing buttons at the end of every post will be a great help. But, personally I feel adding a gadget in Blogger is the simplest way we can employ as the code can be removed simply by deleting the gadget!
Please do elaborate about what "SAMPLE" can constitute. Can we put the Twitter &Google+-Sharing Widget code there?
Now my Twitter button is at the beginning of the Post, while G+ is at the end of the comments section! No clue
Some queries that I have are in my Post- here. Will be very helpful if you could suggest what to do!
It can also be done by adding a gadget but that requires knowledge of JavaScript and I am very poor at it. 
But still, let me try.
Yes, you can put twitter and google+ code there in SAMPLE.
About your questions about customisation of Blogger buttons - there is no simple way.
The only way is to remove those default buttons from the footer using JS and add your custom code ( again using JS )
or
you can edit the HTML template of your blog and remove the default blogger buttons and add your custom buttons. This is same as the approach which I gave above.
The second approach even though requires editing your template is better than the first approach because in the first approach, you will loading the buttons twice which will increase your page load time.
Sign in to reply to this thread
