For the proper functioning of this site, make sure you have enabled JavaScript.
For more information consult the F.A.Q..
Dibloc 
This site does not use profiling cookies, technical cookies only to allow the use of the service.
For more information consult the Policy.

Dib sharing button

How to insert and configure the Dibloc sharing button!

The Dib button allows you to instantly share on Dibloc, any web page on which it is installed.
Clicking on the Dib button automatically opens a pop-up window to publish your Dib: it will already be complete with a title, text and any photo on the page to be shared!

What is the Dib button?

A small widget developed to simplify the sharing of content on Dibloc.
To add it, just add a portion of HTML code (snippet) anywhere on the page you want to share, so the Dib button will appear!

Dib button generator

Enter in URL field, the link to the resource you want to share and click on GENERATE CODE. Copy and then paste the snippet generated on the page where you want the Dib button to appear.

Advanced management

Example code to insert

You can generate the snippet automatically, or customize it by following this complete example and setting the individual parameters.

<a href="https://www.dibloc.com/account/share"
class="dib-btn" data-dib-btype="default">Dib</a>
<script src="https://www.dibloc.com/me/js/dib.js" async></script>

This is an example of the HTML code to copy and paste into the body of the web page to be shared, and consists of a a tag with dib-btn class containing the href attribute that identifies the link to be shared and additional data- attributes for additional parameters.
Plus the JavaScript script code that allows asynchronous linking of the widget to the page and loading the Dib button.

In the event that there are multiple Dib buttons on the page, you need to include the code only once.

How to configure the Dib button

The main parameter to set is the absolute URL (HTTP/HTTPS) of the page to be shared. Simply add it as a url query parameter in the href attribute of a tag.

<a href="https://www.dibloc.com/account/share?url=http://www.example.com"
class="dib-btn" data-dib-btype="default">Dib</a>

Another option is to pass the absolute URL through the data-dib-href attribute.

<a href="https://www.dibloc.com/account/share"
class="dib-btn" data-dib-btype="default"
data-dib-href="http://www.example.com">Dib</a>

An additional mode is offered by the use of an <link rel="canonical"> element containing the canonical link of the page.

<link rel="canonical"
href="http://www.example.com" />

Finally you can leave the ability to make the widget to read the Open Graph meta tags on the page; the tag with the og:url property will be checked and eventually used.

<meta property="og:url"
content="http://www.example.com" />

In the absence of a valid link set, the Dibloc widget is able to detect the URL of the page, but it is not recommended for the presence of any unneeded query parameters.

Customize the Dib button

You can use the square format of the button by changing the data-dib-btype attribute with the square value instead of default.

Square button

Default button

The dark coloring of the button can be used by adding the data-dib-color attribute with the dark value instead of default.

Dark square button

Dark default button

Discover other tools and ways to share on Dibloc! [+ info]

Do you need clarification? Contact it the SUPPORT!