Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kktsvetkov/js-social-preview
Tiny JS tool to dynamically create previews for social sharing
https://github.com/kktsvetkov/js-social-preview
facebook fb javascript js og open-graph opengraph preview share social social-preview tw twitter twitter-card
Last synced: 2 days ago
JSON representation
Tiny JS tool to dynamically create previews for social sharing
- Host: GitHub
- URL: https://github.com/kktsvetkov/js-social-preview
- Owner: kktsvetkov
- License: mit
- Created: 2019-11-22T07:23:25.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2019-11-22T09:21:14.000Z (about 5 years ago)
- Last Synced: 2024-11-18T21:15:34.975Z (2 months ago)
- Topics: facebook, fb, javascript, js, og, open-graph, opengraph, preview, share, social, social-preview, tw, twitter, twitter-card
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Social Preview
The **js-social-preview** is a small javascript tool for dynamically creating previews for sharing on social networks.![Social Preview](https://github.com/kktsvetkov/kktsvetkov.github.io/raw/b201ac3a73b2d801a6087b29460dc8bd9546c4d8/js-social-preview.png)
## How to use it ?
First, you need to put both files from this project in your HTML file, preferebly in the ```` tag:
```html...
```
To create a preview, pick an element on your page and inject the ``social_preview.small()`` generated HTML into it:
```htmldocument.getElementById('social_preview').innerHTML = social_preview.small();
```
This will create a "small" social preview with the metadata from the page it is on.Use ``social_preview.big()`` to create a "big" preview (here is an example with jQuery):
```htmljQuery('#social_preview').html( social_preview.big() );
```
These two examples above read the metadata from the current page the tool is being loaded from. You can also feed the metadata you want to create a social preview. You must pass it as an argument, with these five elements: "title", "description", "site", "url" and "img". Here's an example:
```htmldocument.getElementById('social_preview').innerHTML = social_preview.small({
title: 'Kaloyan K. Tsvetkov',
description: 'self-proclaimed retired software engineer',
site: 'kaloyan.info',
url: 'http://kaloyan.info/',
img: 'http://kaloyan.info/images/me.jpg'
});```
## How it works ?
What **js-social-preview** does is to create very basic and simple HTML markup and style it visualy to look like the previews you get when sharing links on social sites. To create the HTML the tool uses metadata, which can either be collected from the current page or fed as an argument.#### social_preview.source(from)
With ``social_preview.source()`` you extract metadata from the current page. With the ``from`` argument you can point to what type of metadata to use:
* "fb" - use Open-Graph metadata, prefered by Facebook
* "tw" - use Twitter Card metadata
There are slight differences in the "fb" and "tw" metadata, like using site domain or site name, and that's why you can choose which one to use.#### social_preview.html(o, size)
The HTML for the previews is created by ``social_preview.html()``, and it takes two arguments:
* ``o`` - the collected metadata to use
* ``size`` - what size the preview should be
There are two built-in sizes for the social previews, "big" and "small". For each of the sizes there is a corresponding set of CSS classes that format the data accordingly.