Merge pull request #29 from NickKaramoff/fix/messenger-app-id

pull/30/head
Nikita Karamov 2020-09-28 13:59:51 +02:00 committed by GitHub
commit fc45e769cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 11 deletions

View File

@ -88,7 +88,8 @@ classes match the names of social networks:
<a class="facebook"></a> <a class="facebook"></a>
<a class="linkedin"></a> <a class="linkedin"></a>
<a class="mastodon"></a> <a class="mastodon"></a>
<a class="messenger"></a> <!-- FB App ID is required for the Messenger button to function -->
<a class="messenger" data-fb-app-id="0123456789012345"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest"></a> <a class="pinterest"></a>
<a class="pocket"></a> <a class="pocket"></a>
@ -117,6 +118,7 @@ on the whole container or on the specific buttons:
Apart from the URL and title, some networks support extra parameters: Apart from the URL and title, some networks support extra parameters:
- you **have to** add `data-fb-app-id` to the FB Messenger button to make sharing even possible
- add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture - add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture
- add `data-text` to a WhatsApp, Mastodon, Telegram or Viber button to add custom message text - add `data-text` to a WhatsApp, Mastodon, Telegram or Viber button to add custom message text
- add `data-via` to a Twitter or Mastodon button to mention a user - add `data-via` to a Twitter or Mastodon button to mention a user
@ -126,12 +128,12 @@ Here are all the custom parameters in their glory:
```html ```html
<div class="shareon" data-url="https://example.com/custom-url"> <div class="shareon" data-url="https://example.com/custom-url">
<a class="facebook" data-title="Custom Facebook title"></a> <a class="facebook" data-title="Custom Facebook title"></a>
<a class="messenger" data-url="https://my-cool-website.com"></a> <a class="messenger" data-fb-app-id="0123456789012345"></a>
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a> <a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
<a class="telegram" data-text="Check this out!"></a> <a class="telegram" data-text="Check this out!"></a>
<a class="twitter" data-via="MyNickname"></a> <a class="twitter" data-via="MyNickname"></a>
<a class="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"></a> <a class="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"></a>
<a class="whatsapp">Send</a> <a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
</div> </div>
``` ```

View File

@ -69,7 +69,7 @@
<a class="facebook"></a> <a class="facebook"></a>
<a class="linkedin"></a> <a class="linkedin"></a>
<a class="mastodon"></a> <a class="mastodon"></a>
<a class="messenger"></a> <a class="messenger" data-fb-app-id="3619024578167617"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest"></a> <a class="pinterest"></a>
<a class="pocket"></a> <a class="pocket"></a>
@ -188,7 +188,8 @@ shareon();</code></pre>
&lt;a class="facebook"&gt;&lt;/a&gt; &lt;a class="facebook"&gt;&lt;/a&gt;
&lt;a class="linkedin"&gt;&lt;/a&gt; &lt;a class="linkedin"&gt;&lt;/a&gt;
&lt;a class="mastodon"&gt;&lt;/a&gt; &lt;a class="mastodon"&gt;&lt;/a&gt;
&lt;a class="messenger"&gt;&lt;/a&gt; &lt;!-- FB App ID is required for the Messenger button to function --&gt;
&lt;a class="messenger" data-fb-app-id="0123456789012345"&gt;&lt;/a&gt;
&lt;a class="odnoklassniki"&gt;&lt;/a&gt; &lt;a class="odnoklassniki"&gt;&lt;/a&gt;
&lt;a class="pinterest"&gt;&lt;/a&gt; &lt;a class="pinterest"&gt;&lt;/a&gt;
&lt;a class="pocket"&gt;&lt;/a&gt; &lt;a class="pocket"&gt;&lt;/a&gt;
@ -203,7 +204,7 @@ shareon();</code></pre>
<a class="facebook"></a> <a class="facebook"></a>
<a class="linkedin"></a> <a class="linkedin"></a>
<a class="mastodon"></a> <a class="mastodon"></a>
<a class="messenger"></a> <a class="messenger" data-fb-app-id="3619024578167617"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest"></a> <a class="pinterest"></a>
<a class="pocket"></a> <a class="pocket"></a>
@ -243,6 +244,7 @@ shareon();</code></pre>
</p> </p>
<ul> <ul>
<li>you <strong>have to</strong> add <code>data-fb-app-id</code> to the FB Messenger button to make sharing even possible</li>
<li>add <code>data-media</code> to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture</li> <li>add <code>data-media</code> to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture</li>
<li>add <code>data-text</code> to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text</li> <li>add <code>data-text</code> to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text</li>
<li>add <code>data-via</code> to a Twitter or Mastodon button to mention a user</li> <li>add <code>data-via</code> to a Twitter or Mastodon button to mention a user</li>
@ -254,21 +256,21 @@ shareon();</code></pre>
<pre><code>&lt;div class="shareon" data-url="https://example.com/custom-url"&gt; <pre><code>&lt;div class="shareon" data-url="https://example.com/custom-url"&gt;
&lt;a class="facebook" data-title="Custom Facebook title"&gt;&lt;/a&gt; &lt;a class="facebook" data-title="Custom Facebook title"&gt;&lt;/a&gt;
&lt;a class="messenger" data-url="https://my-cool-website.com"&gt;&lt;/a&gt; &lt;a class="messenger" data-fb-app-id="0123456789012345"&gt;&lt;/a&gt;
&lt;a class="pinterest" data-media="https://picsum.photos/500"&gt;Pin&lt;/a&gt; &lt;a class="pinterest" data-media="https://picsum.photos/500"&gt;Pin&lt;/a&gt;
&lt;a class="telegram" data-text="Check this out!"&gt;&lt;/a&gt; &lt;a class="telegram" data-text="Check this out!"&gt;&lt;/a&gt;
&lt;a class="twitter" data-via="MyNickname"&gt;&lt;/a&gt; &lt;a class="twitter" data-via="MyNickname"&gt;&lt;/a&gt;
&lt;a class="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"&gt;&lt;/a&gt; &lt;a class="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"&gt;&lt;/a&gt;
&lt;a class="whatsapp"&gt;Send&lt;/a&gt; &lt;a class="whatsapp" data-url="https://my-cool-website.com"&gt;Send&lt;/a&gt;
&lt;/div></code></pre> &lt;/div></code></pre>
<div class="shareon" data-url="https://example.com/custom-url"> <div class="shareon" data-url="https://example.com/custom-url">
<a class="facebook" data-title="Custom Facebook title"></a> <a class="facebook" data-title="Custom Facebook title"></a>
<a class="messenger" data-url="https://my-cool-website.com"></a> <a class="messenger" data-fb-app-id="3619024578167617"></a>
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a> <a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
<a class="telegram" data-text="Check this out!"></a> <a class="telegram" data-text="Check this out!"></a>
<a class="twitter" data-via="MyNickname"></a> <a class="twitter" data-via="MyNickname"></a>
<a class="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"></a> <a class="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"></a>
<a class="whatsapp">Send</a> <a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
</div> </div>
</article> </article>

View File

@ -5,6 +5,7 @@
* media?: string, * media?: string,
* text?: string, * text?: string,
* via?: string, * via?: string,
* fbAppId?: string,
* }} PublicationData * }} PublicationData
*/ */
@ -46,7 +47,7 @@ const NETWORKS = {
messenger: { messenger: {
color: '#0099FF', color: '#0099FF',
icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 11.64C0 4.95 5.24 0 12 0s12 4.95 12 11.64-5.24 11.64-12 11.64c-1.21 0-2.38-.16-3.47-.46a.96.96 0 00-.64.05L5.5 23.92a.96.96 0 01-1.35-.85l-.07-2.14a.97.97 0 00-.32-.68A11.39 11.39 0 010 11.64zm8.32-2.19l-3.52 5.6c-.35.53.32 1.14.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 00-2.61.48z"/%3E%3C/svg%3E', icon: 'data:image/svg+xml,%3Csvg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 11.64C0 4.95 5.24 0 12 0s12 4.95 12 11.64-5.24 11.64-12 11.64c-1.21 0-2.38-.16-3.47-.46a.96.96 0 00-.64.05L5.5 23.92a.96.96 0 01-1.35-.85l-.07-2.14a.97.97 0 00-.32-.68A11.39 11.39 0 010 11.64zm8.32-2.19l-3.52 5.6c-.35.53.32 1.14.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 00-2.61.48z"/%3E%3C/svg%3E',
url: (d) => `https://www.facebook.com/dialog/send?app_id=3619024578167617&link=${d.url}&redirect_uri=${d.url}`, url: (d) => `https://www.facebook.com/dialog/send?app_id=${d.fbAppId}&link=${d.url}&redirect_uri=${d.url}`,
}, },
odnoklassniki: { odnoklassniki: {
color: '#EE8208', color: '#EE8208',

View File

@ -49,6 +49,11 @@ const initializeShareon = () => {
|| container.dataset.via || container.dataset.via
|| '', || '',
), ),
fbAppId: encodeURIComponent(
child.dataset.fbAppId
|| container.dataset.fbAppId
|| '',
),
}; };
const url = urlBuilderMap[cls](preset); const url = urlBuilderMap[cls](preset);