Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itw-creative-works/social-selectors
SocialSelectors is a dynamically updated library of css selectors for social media sites.
https://github.com/itw-creative-works/social-selectors
css css-selector instagram queryselector queryselectorall scraper scraping selectors social-media social-selectors twitter
Last synced: about 2 hours ago
JSON representation
SocialSelectors is a dynamically updated library of css selectors for social media sites.
- Host: GitHub
- URL: https://github.com/itw-creative-works/social-selectors
- Owner: itw-creative-works
- License: other
- Created: 2019-08-26T23:26:15.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-11-01T00:19:13.000Z (16 days ago)
- Last Synced: 2024-11-03T07:37:04.816Z (14 days ago)
- Topics: css, css-selector, instagram, queryselector, queryselectorall, scraper, scraping, selectors, social-media, social-selectors, twitter
- Language: HTML
- Homepage: https://itwcreativeworks.com
- Size: 98 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Site | NPM Module | GitHub Repo
social-selectors is an API of CSS selectors for various elements on social media sites. This module puts a constantly updated library at your finger tips and takes the struggle out of dealing with third party, constantly changing CSS classes and IDs.
## 🚀 What is Social Selectors?
SO... you're trying to get the css selector for the _follow button_ on Twitter. **Which would you rather use?**
```js
'.css-1dbjc4n.r-obd0qt.r-18u37iz.r-1w6e6rj.r-1h0z5md.r-dnmrzs *[data-testid*="-follow"]'
// OR //
'profile.followButton.selector'
```
Well, now you don't have to manage those ugly, system generated css selectors anymore!
Introducing **SocialSelectors**: a dynamically updated library of css selectors for social media sites.
## 🦄 Supported Sites
* Instagram
* Twitter
* SoundCloud _(coming soon!)_
* _more coming soon!_
## 📦 Install Social Selectors
### Option 1: Install via npm
```shell
npm install social-selectors
```
## ⚡️ Using SocialSelectors
```js
const SocialSelectors = new (require('social-selectors'));
SocialSelectors.load({
library: 'instagram', // The social media site you want to load
location: 'hosted', // Load the local library or hosted library (local | hosted).
})
.then(function (library) {
console.log(library);
const followButton = SocialSelectors.get('pages.profile.elements.followButton.normal.selector'); // Get the CSS Selector for the follow button on a profile
console.log(followButton);
// Now you can pass the selector to your code! Here are some examples:
// 1. Using querySelectorAll
document.querySelectorAll(followButton);
// 2. Using Puppeteer
const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.goto('https://www.instagram.com/google/');
page.$(followButton);
});
})
```
### How do I find the paths for the selectors?
The easiest way to get the path for the selectors is to view the src JSON files in the repo. For example if you want to find the paths for Instagram, open [https://github.com/itw-creative-works/social-selectors/blob/master/src/libraries/instagram/main.json](/src/libraries/instagram/main.json). Each site has two main sections in the JSON file: `globals` and `pages`. And `pages` is where you'll find the selectors broken down for each page on the site.
So if you wanted the selector for the like button on an Instagram post, you would come up with `pages.post.elements.likeButton.selector`.
## 📘 Why use SocialSelectors?
* Does your app scrape social media sites or rely on their css elements in any way?
* Are you annoyed with having to meticulously update your css selectors to successfully scrape these elements?
This library solves that problem by providing an api with *static* css paths that get translated into the current css selectors!
## 📝 What Can SocialSelectors do?
SocialSelectors is an API that provides an up-to-date library of CSS selectors for elements on social media sites.
## 🗨️ Final Words
If you are still having difficulty, we would love for you to post
a question to [the SocialSelectors issues page](https://github.com/itw-creative-works/social-selectors/issues). It is much easier to answer questions that include your code and relevant files! So if you can provide them, we'd be extremely grateful (and more likely to help you find the answer!)
## 📚 Projects Using this Library
[Somiibo](https://somiibo.com/): A Social Media Bot with an open-source module library.
[JekyllUp](https://jekyllup.com/): A website devoted to sharing the best Jekyll themes.
[Slapform](https://slapform.com/): A backend processor for your HTML forms on static sites.
[SoundGrail Music App](https://app.soundgrail.com/): A resource for producers, musicians, and DJs.
[Hammock Report](https://hammockreport.com/): An API for exploring and listing backyard products.
Ask us to have your project listed! :)