Member Avatar for Stuugie

Hi All,

I've been helping a friend with a site that he's been designing with godaddy.com. It's pretty cool and easy to do with their templates and all but their like buttons are troublesome and I was hoping to get some knowledge about this from here. Lets say there are 3 different videos linking to youtube and lets say that I have 3 Facebook and Twitter "like" buttons. How can I make it so that if a user presses the twitter like button that the window pops up saying something like "Watching Drezus' Big Dreams"? As it is, if one button is clicked, all three iterate with a like and only the web page is liked on Twitter or facebook. I want to make posts when they are clicked. How can I go about doing that? Can it be done with just HTML?

  • 1 Contributor
  • 1 Reply
  • 283 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Stuugie

Dani AI

Generated

— nice start tracking down the official docs. The core issue is that social widgets act on a URL (the object being liked/shared), not the embedded video element itself. When each button points at the same page URL, all clicks count the same object and the same URL is what gets posted. (developer.x.com)

For Twitter (X): build a per-video intent link (or set data-text / data-url on the widget) so the composer is prefilled with the desired text and the specific video permalink. Example:

<a class="twitter-share-button"
   href="https://twitter.com/intent/tweet?text=Watching%20Drezus%27%20Big%20Dreams&url=https%3A%2F%2Fexample.com%2Fvideo1"
   target="_blank" rel="noopener">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

If the site swaps videos on a single page, update each button’s href (or data-url) when the video changes and call the widgets parser so the new link is rendered (twttr.widgets.load() or re-run the widgets script). (developer.x.com)

For Facebook: the Like plugin is tied to the target URL and Facebook uses Open Graph tags from that URL for title/thumbnail. To get per-video likes/shares, give each video a unique permalink and set og:url (and the Like data-href) to that permalink. The Like button itself won’t reliably prefill a user message — for that use the Share dialog (note: sharer/share-dialog parameter behaviour has changed over time). Example:

<div class="fb-like" data-href="https://example.com/video1" data-layout="button_count"></div>
<!-- Share dialog (may require app_id) -->
<a href="https://www.facebook.com/dialog/share?app_id=APPID&display=popup&href=https%3A%2F%2Fexample.com%2Fvideo1&quote=Watching%20Drezus%27%20Big%20Dreams"
   onclick="window.open(this.href,'fbshare','width=600,height=400');return false;">Share</a>

(ogp.me)

Quick tips: do not rely on URL fragments (#id) for distinct share objects — fragments aren’t sent in HTTP requests, so they don’t create distinct server-side resources; use distinct paths or query strings and set og:url/rel=canonical. Also note Twitter removed native share-count endpoints in 2015, so if per-video counters are required, implement server-side counters or a third‑party aggregator. (w3.org)

Member Avatar for Stuugie

I sort of found what I needed from here and here. However I'm still having issues regarding having 3 tweet buttons that increment when one is clicked. So frustrating.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.