Replacing fb & twitter buttons in ShareThisPage with AddThis

[Ryan Kent]

I have noticed many times my Facebook & Twitter widgets don't load with my pages. The Share This Page block, both the sidebar and the footer, at times will load missing one of those widgets.

I also noticed that PageSpeed doesn't seem to like my site connects to so many domains on page loads.

I have added "AddThis" (similar to ShareThis and other social add-ons) to my site. The idea is while most people use FB or Twitter, there are over 300 more social sharing sites and this widget allows users to access all of them. So now my site has 3 connections for loading 3 separate social sites.

My question is...are there any drawbacks to removing the fb & twitter widgets that come by default with XF in the Share This blocks and replacing them with the AddThis widget that performs the same function? https://www.addthis.com/get-addthis

 

[Paul B]

No drawback at all, except people are more likely to click on the dedicated FB and Twitter icons than they are on the AddThis button.

I had AddThis installed on my site before I converted and the click rate was very, very low.
It's much higher on XenForo with the dedicated Facebook button.

 

[Ryan Kent]

I am not clear what you mean by "dedicated". Would this be what you mean?

 

[Paul B]

Yes.

When I had AddThis installed it was one button which when clicked brought up an overlay from which you then clicked the service you wanted to use.
It was just a bit more cumbersome than what is currently implemented on XenForo.

Maybe it has changed since though?

 

[Deathstarr]

I am not clear what you mean by "dedicated". Would this be what you mean?

View attachment 14823

He talking "Dedicated" as in the button for Facebook and a button for twitter, With Addthis you have to click addthis and click which social network you want to correspond with. Addthis also has a hover over effect if I am not mistake and it can get annoying when you hover over it by accident then it won't close. Just a thought.

 

[Ryan Kent]

Seems like they have upgraded since you guys last checked.

They have numerous base widgets, and they are all easily configurable. I intend to have fb & twitter buttons dedicated as shown above, plus a couple more like their mail widget which is nice. They seem to have a means to detect which social sites a user favors and can automatically show a preferred button for the user as well.

The only code customization I made involved the hover button. It is easily configurable with a single line of code. You can disable the hover effect or adjust the timing. The instructions for this change are on the site, but they also state that social sharing is an impulse and they have measured a significant increase of sharing on sites which leave the hover effect enabled.

 

[Ryan Kent]

I have my Share This Page Footer looking nice. The XF code has been removed. All of the icons which appear are from AddThis.



Each of the buttons which appear are ones that I chose. Admins have the ability to freely add or remove any button, or change the styling. The only button which is not visible, and I need to test, is the "preferred" button. If a user presses the AddThis icon and one of the 300+ social sharing networks whose icon isn't showing, then the next time that icon will be remembered for the user so they can share in 1 click.

I am having a bit of a CSS challenge with the side block. I need to move the icons to the second row immediately after the twitter counter. I still struggle with CSS at times, and this is one of those times If anyone has any ideas I would appreciate hearing them. All the icons are presently in the same DIV so I am unsure how to add a float in the middle of the DIV.

<div class="addthis_toolbox addthis_default_style ">
        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
        <a class="addthis_button_tweet"></a>
        <a class="addthis_button_myspace"></a>
        <a class="addthis_button_reddit"></a>
        <a class="addthis_button_stumbleupon"></a>
        <a class="addthis_button_delicious"></a>
        <a class="addthis_button_preferred_1"></a>
        <a class="addthis_button_compact"></a>
        </div>

 

[Paul B]

Try putting them in two separate divs.

<div class="addthis_toolbox addthis_default_style ">
        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
        <a class="addthis_button_tweet"></a>
</div>
<div class="addthis_toolbox addthis_default_style ">
        <a class="addthis_button_myspace"></a>
        <a class="addthis_button_reddit"></a>
        <a class="addthis_button_stumbleupon"></a>
        <a class="addthis_button_delicious"></a>
        <a class="addthis_button_preferred_1"></a>
        <a class="addthis_button_compact"></a>
</div>

 

[Ryan Kent]

absolutely perfect! I didn't know you could split a div like that. Thanks for the lesson.