How to enusre unique JavaScript Tweet buttons are generated for my dynamic content

Question

I generate content for my page which fills the pages HTML elements from my database using PHP. I have a Tweet button alongside this dynamic content but the tweet button of course is one button and is applied to all of the available content for that page. I need to know if it is possible to somehow set up a unique button for each page.

Here is the Tweet button code taken directly from the Twitter site:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.game-center-achievements.com/" data-via="gcachievements0" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

I was thinking I could maybe use a variable as an id so when the id 5 from row 5 in my database is selected, apply that same id to the JavaScript, I have no idea if Twitter supports this, or this supplied JavaScript can be altered to achieve what I want.

Here is my web page which uses links to set the page content, and you can see the Tweet button is the same for the overall page.

Any insight would be appreciate as I could not see if this has been done before.

Answer 1

Twitter share buttons are used to share a "page url". If you see your code above, it has a data-url in the anchor. This is the page that will be shared when the link is clicked. If the data-url attribute is missing, then it is assumed that you want to share the current page.

Go here: https://twitter.com/about/resources/buttons#tweet and get the code. Make sure you have "Use the page URL" for the share URL. This way, you insert the same code on all pages, yet they really share the page you're currently on.