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.
Example code to insert
You can generate the snippet automatically, or customize it by following this complete example and setting the individual parameters.
<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.
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
Another option is to pass the absolute URL through the
An additional mode is offered by the use of an
<link rel="canonical"> element containing the canonical link of the page.
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.
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 round format of the button by changing the
data-dib-btype attribute with the
round value instead of
The dark coloring of the button can be used by adding the
data-dib-color attribute with the
dark value instead of
Dark round button
Dark default button
Discover other tools and ways to share on Dibloc! [+ info]
Do you need clarification? Contact it the SUPPORT!