I am building a forum in PHP and I want users to be able to share the title and description of each post to facebook, twitter, ...etc using the Addthis social plugin. Here is the code Addthis has given me:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style "
addthis:url="www.example.com"
addthis:title="Example Title"
addthis:description="Example Description">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s6.addthis.com/js/154/addthis_widget.js#pubid=rd-39e8r89e9er8er989"></script>
<!-- AddThis Button END -->
I was able to change the url to another I have specified, but changing the title and description has no effect. In fact, they do not even show up when I click the share button and post it to my facebook wall. What is the proper way to get this to work?
AddThis doesn't officially support all these parameters as far as I can tell (I can't find them all in once place in their documentation), so ideally you should just use OpenGraph tags on the page you are on. But in any case...
You need to specify it on the custom buttons themselves, not on the toolbox. You can even specify the image. If your buttons have to come from AddThis instead of specifying them yourself, I'm not sure.
<div class="addthis_sharing_toolbox">
<a class="addthis_button_facebook"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-facebook"></i>
</a>
<a class="addthis_button_twitter"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-twitter"></i>
</a>
<a class="addthis_button_linkedin"
addthis:url="http://google.com/"
addthis:title="Here's a title"
addthis:media="http://images.google.com/example.png"
addthis:description="Here's a cool description">
<i class="ico ico-facebook"></i>
</a>
</div>
AddThis's documentation sucks so I just happened to run into the right things and figure this out. Enjoy!
AddThis specific recommend that you use meta tags from the Open Graph Protocol to specify what to show
We strongly recommend the page-tagging approach over passing your widget parameters to our APIs
So in your case you should have the code lie it's original:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s6.addthis.com/js/154/addthis_widget.js#pubid=rd-39e8r89e9er8er989"></script>
<!-- AddThis Button END -->
and change your header to include the addThis meta
tags, in your example, like:
<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Example Title" />
<meta property="og:description" content="Example Title Description" />
<meta property="og:image" content="http://www.example.com/logo.gif" />
This avoids any problem you can encounter in the Client API.
I went around and around before finding this on the AddThis website:
Setting the URL & Title to Share
...for our newest tools, use the data-url and data-title parameters...
I am using their latest code (addthis_sharing_toolbox instead of addthis_toolbox) and all I could find were people using addthis:url=""
which was not working.