Setting up the social sharing stuff.

Arti
Arti
from Mumbai
9 years ago

Hi everyone,

I need some assistance from all of you. Smile 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. Embarassed 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. Frown

Can you help me out so that my blog becomes more social friendly? If yes, thanks, I am waiting to hear from you. Smile

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!

Replies 1 to 12 of 12 Descending
Ranjith
Ranjith
from hyderabad
9 years ago

Search for the following in your HTML

<b:if cond='data:post.hasJumpLink'>      <div class='jump-link'>        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>      </div>    </b:if>

 

Below the above code, add

<b:if cond='data:blog.pageType == &quot;item&quot;'>

SAMPLE 

  </b:if>

Replace SAMPLE with the code for the social sharing buttons.

Laughing

Anita
from Bhubaneswar
9 years ago

Ranjith, Will inserting this code remove the old/previous Buttons code?

What about the customization?

Ranjith
from hyderabad
9 years ago

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? Innocent

 

Anita
from Bhubaneswar
9 years ago

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 Innocent

Some queries that I have are in my Post- here. Will be very helpful if you could suggest what to do! Laughing

Ranjith
from hyderabad
9 years ago

It can also be done by adding a gadget but that requires knowledge of JavaScript and I am very poor at it. Undecided But still, let me try.

Yes, you can put twitter and google+ code there in SAMPLE.

Ranjith
from hyderabad
9 years ago

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. 

Anita
Anita
from Bhubaneswar
9 years ago

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! Cool

Arti
from Mumbai
9 years ago

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. Wink 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! Cool

Arti
Arti
from Mumbai
9 years ago

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. Smile

Now, I need further customizations. Innocent

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
Arti
from Mumbai
9 years ago

@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! Tongue out

Ranjith
Ranjith
from hyderabad
9 years ago

@ Arti Did you include the code at the right place. Innocent

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. 

Ranjith
from hyderabad
9 years ago

link for blog template : http://pastebin.com/5t7rCcxT 

Arti
from Mumbai
9 years ago

Oops, put it in the wrong position! Innocent Thanks for the heads-up, corrected. Smile

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. Laughing

Vijay Prabhu
Vijay Prabhu
from Mumbai
9 years ago

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

Arti
from Mumbai
9 years ago

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'?  -----

Vijay Prabhu
from Mumbai
9 years ago

no Arti I dont think they allow it but will speak to the guy with filament Innocent

Neeraj Rawat
Neeraj Rawat
from Delhi
9 years ago

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 == &quot;item&quot;'><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 == &quot;item&quot;'><g:plusone/></b:if><!--stumbleuponbutton starts --><b:if cond='data:blog.pageType == &quot;item&quot;'><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; +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.

Ranjith
from hyderabad
9 years ago

Yes! Laughing

I forgot to mention that comments thing... Embarassed

Arti
from Mumbai
9 years ago

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.

Neeraj Rawat
Neeraj Rawat
from Delhi
9 years ago

Get it from here and likewise

 

https://about.twitter.com/resources/buttons

technophilo
technophilo
from Vellore
9 years ago

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... 

technophilo
from Vellore
9 years ago

please see http://www.techsperia.blogspot.in/2013/08/new-labnol-style-labels-widget-for.html, the earlier link is broken somehow...

Arti
from Mumbai
9 years ago

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!

Arti
Arti
from Mumbai
9 years ago

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! Smile

technophilo
technophilo
from Vellore
9 years ago

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

Arti
from Mumbai
9 years ago

Thank you so much, technophilo. Truly appreciate your taking the time to help. Will check this out. Thanks again! :)

Anita
Anita
from Bhubaneswar
9 years ago

Arti, We now have a wealth of info thanks to your threadCool & thanks to all the helpful souls!

Need to try these.


LockSign in to reply to this thread