Member Avatar for rockyman12

Social bookmarks icons..

Look at the right column at the website below to know what I mean

http://mashable.com/


I know you can find them everywhere on the web like here http://www.freesocialicons.com/

But my question is how do u set it up ??

There are service like (add this) and (share this) But i don't want these types.

I want icons that share to social media like the one in Mashable.

I also know that they are available in word press But I need them for a website..

I searched the web on how to set i up but couldn't find an answers...

Can u shed some light on the matter...
THANK YOU

  • 4 Contributors
  • 3 Replies
  • 218 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by eimroda

Dani AI

Generated

Short answer for : those Mashable icons are just regular icons (image or SVG) wired to each network’s share endpoint, with a tiny bit of JavaScript to open the share dialog in a small window and — optionally — a backend call to get share counts. You don’t need AddThis/ShareThis if you want a lightweight, privacy-friendly solution. As pointed out, most networks publish example snippets; use those to learn the URL parameters, then adapt the markup and styling to your site.

Implementation checklist you can follow:

  • Choose icons (sprite or inline SVG) for fast downloads and crisp scaling.
  • For each service create a share link that includes the current page URL plus any text/title parameters the network supports. Open the link from a user click in a small popup window; if that’s blocked, fall back to opening a new tab.
  • Use safe attributes: target="_blank" and rel="noopener noreferrer", and add aria-label on each button for accessibility.
  • Serve the icons and the click handler from your site so you control look, speed and tracking.

Notes on counts and APIs:

  • Share counts require calling each platform’s endpoint or a server-side aggregator. Do this server-side (avoids CORS and client rate limits), cache results, and refresh asynchronously so the page stays fast. Some networks require registration or keys for count endpoints, so plan for rate limits.

Troubleshooting and best practices:

  • Add Open Graph / Twitter Card meta tags so shares show the right title, description and image.
  • Test on mobile and inside in-app browsers; popup behavior varies.
  • If you care about privacy and page speed, roll your own buttons instead of third-party widgets.
  • For WordPress (per and ), there are plugins if you prefer a drop-in; for full control add the markup to your theme/template and keep the share logic in a small reusable include.

Recommended Answers

All 3 Replies

Member Avatar for Member #334542

For every social network icons there is an default embed code avaiable search on google. and an sample is given below for twitter.

Member Avatar for it-aroma

can u please tell about the wp plugin which creates icons like in mashable site?

Member Avatar for eimroda

I also like this idea. wordpress plugin please...

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.