# Atomic Social Kit

A comprehensive WordPress plugin for displaying social media feeds and reviews from multiple platforms using Gutenberg blocks.

## Features

### Atomic Social Feed Block
- ✅ Support for Facebook
- ✅ Multiple layouts: Grid, Masonry, List, Carousel
- ✅ Customizable display options
- ✅ Show/hide post elements
- ✅ Multiple card styles
- ✅ Fully responsive

### Atomic Social Reviews Block
- ✅ Facebook Reviews
- ✅ Star rating display
- ✅ Filter by minimum rating
- ✅ Multiple layout options
- ✅ Customizable styling
- ✅ Responsive design

## Installation

1. Clone or download this repository to your `wp-content/plugins` directory
2. Navigate to the plugin directory:
   ```bash
   cd wp-content/plugins/atomic-social-kit
   ```
3. Install dependencies:
   ```bash
   npm install
   ```
4. Build the plugin:
   ```bash
   npm run build
   ```
5. Activate the plugin in WordPress admin

## Development

### Prerequisites
- Node.js 14+ and npm
- WordPress 6.0+
- PHP 7.4+

### Setup
```bash
# Install dependencies
npm install

# Start development mode (watch for changes)
npm start

# Build for production
npm run build

# Lint JavaScript
npm run lint:js

# Lint CSS
npm run lint:css
```

## API Configuration

### Facebook
1. Go to [Facebook Developers](https://developers.facebook.com/)
2. Create an app and get your Page ID and Access Token
3. Enter credentials in Settings > Social Media

## Usage

### Adding Social Media Feed Block
1. Create or edit a post/page
2. Click the '+' button to add a new block
3. Search for "Social Media Feed"
4. Select the platform you want to display
5. Customize the layout and display options
6. Publish your post/page

### Adding Social Media Reviews Block
1. Create or edit a post/page
2. Click the '+' button to add a new block
3. Search for "Social Media Reviews"
4. Select the review platform
5. Adjust settings like minimum rating, layout, etc.
6. Publish your post/page

## Customization

### Available Blocks

#### Social Feed Block
- **Platforms**: Facebook
- **Layouts**: Grid, Masonry, List, Carousel
- **Card Styles**: Modern, Classic, Minimal, Card
- **Display Options**: Avatar, Author, Date, Content, Image, Likes, Comments, Shares

#### Social Reviews Block
- **Platforms**: Facebook
- **Layouts**: Grid, Masonry, List, Carousel
- **Card Styles**: Modern, Classic, Minimal
- **Display Options**: Avatar, Author, Date, Rating, Review Text
- **Filter**: Minimum rating (1-5 stars)

## File Structure

```
social-media-feed-reviews/
├── src/
│   └── blocks/
│       ├── facebook-feed/
│       │   ├── block.json
│       │   ├── index.js
│       │   ├── edit.js
│       │   ├── editor.scss
│       │   └── style.scss
│       └── facebook-reviews/
│           ├── block.json
│           ├── index.js
│           ├── edit.js
│           ├── editor.scss
│           └── style.scss
├── includes/
│   └── admin/
│       └── settings-page.php
├── build/ (generated)
├── social-media-feed-reviews.php
├── package.json
├── webpack.config.js
└── readme.txt
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

This plugin is licensed under the GPL v2 or later.

## Support

For support, please visit the WordPress support forums or create an issue on GitHub.

## Author

Your Name - [Your Website](https://example.com)

## Credits

Built with:
- [@wordpress/scripts](https://www.npmjs.com/package/@wordpress/scripts)
- [Swiper](https://swiperjs.com/) for carousel functionality
- WordPress Gutenberg Block API