Social Media Sharer - ShareThis block

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
User avatar
tommy888
 
 
Posts: 574
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Social Media Sharer - ShareThis block

Post by tommy888 » Tue Jun 27, 2017 7:38 pm

Is there any tutorial how to use this ShareThis block?

User avatar
tommy888
 
 
Posts: 574
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Social Media Sharer - ShareThis block

Post by tommy888 » Tue Jun 27, 2017 7:42 pm

What are the link structures for sharing Facebook, Google, Pinterest, Twitter with this block?. Thanx

User avatar
Pablo
 
Posts: 19287
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Social Media Sharer - ShareThis block

Post by Pablo » Tue Jun 27, 2017 8:05 pm

There is no tutorial for this block. This is just a layout idea, it is made up from standard WWB objects, just like all the other blocks.
The links you will have to fill in yourself.

User avatar
BaconFries
 
 
Posts: 4420
Joined: Thu Aug 16, 2007 7:32 pm

Re: Social Media Sharer - ShareThis block

Post by BaconFries » Tue Jun 27, 2017 8:07 pm

Blocks are basically just groups of standard WWB objects so once dragged to the page you can fully customize the behavior and appearance of the content
In this case the "Share This" is just a example, nothing on it is a activate component. This then means you can add an event to the button with a link to the supporting social media required.

User avatar
tommy888
 
 
Posts: 574
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Social Media Sharer - ShareThis block

Post by tommy888 » Tue Jun 27, 2017 8:27 pm

Ok. But the URls must be encoded as in the example code in the link for sharing WB

User avatar
tommy888
 
 
Posts: 574
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Social Media Sharer - ShareThis block

Post by tommy888 » Tue Jun 27, 2017 8:29 pm

Ok. But the URls must be encoded as in the example code in the link for sharing WB

It can be done using an urls encoder/decoder, i.e., but not necessarily as it has its own structure.
https://meyerweb.com/eric/tools/dencoder/

https://twitter.com/intent/tweet?text=R ... l_referer=

What should I add to the link code to include image along with its size width & height?

User avatar
tommy888
 
 
Posts: 574
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Social Media Sharer - ShareThis block

Post by tommy888 » Wed Jun 28, 2017 4:47 pm

This might be added to OPEN GRAPH PROPERTIES but not necessarily. The whole Open Graph description may be added manually for more advanced users.

IMAGE:
<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />

VIDEO:
<meta property="og:video" content="http://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />


AUDIO
<meta property="og:audio" content="http://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

User avatar
tommy888
 
 
Posts: 574
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Social Media Sharer - ShareThis block

Post by tommy888 » Wed Jun 28, 2017 5:10 pm

Maybe it may be of some use for someone

TESTING TOOLS FOR SOCIAL MEDIA SHARERS AND MORE INFO

FACEBOOK
More to read about Open Graph for Developers (Image sizes, title prompts and tips)
https://developers.facebook.com/docs/sh ... ces#images
SHARER DEBUGGER (VALIDATOR) https://developers.facebook.com/tools/debug/

TWITTER
TWITTER CARDS not included in WB12 (might be as it's similar to OPEN GRAPH but nocessarily)
http://twitter.com/share?text=[YOUR TWEET TEXT]&url=[YOUR PAGE URL]
USE META TAGS FOR A SPECICIF TWEETER CARD FORMAT SUMMARY CARD, SUMMARY CARD WITH A LARGE IMAGE, APP CARD, PLAYER CARD)
More to read about TWEETER CARDS https://dev.twitter.com/cards/overview (example code and tips included)
CARD VALIDATOR
https://cards-dev.twitter.com/validator


GOOGLE PLUS

STRUCTURED DATA VALIDATOR - https://search.google.com/structured-data/testing-tool
MOre to learn https://developers.google.com/search/do ... up-content

PINTEREST uses OPEN GRAPH
More info
https://developers.pinterest.com/docs/widgets/save/?
https://developers.pinterest.com/docs/r ... /products/
Rich Pins Validator
https://developers.pinterest.com/tools/url-debugger/

User avatar
tommy888
 
 
Posts: 574
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Social Media Sharer - ShareThis block

Post by tommy888 » Wed Jun 28, 2017 5:33 pm

Pablo,
There's a missing og:url in Open Graph which is quite important


Another type: content="website"
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="fb:app_id" content="302184056577324" />
<meta property="og:type" content="website" />
<meta property="og:url" content="Put your own URL to the object here" />
<meta property="og:title" content="Sample Website" />
<meta property="og:image" content="https://s-static.ak.fbcdn.net/images/de ... _blank.png" />

The tool for checking Socila Media Sharer consistency
http://smo.knowem.com/

User avatar
Pablo
 
Posts: 19287
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Social Media Sharer - ShareThis block

Post by Pablo » Wed Jun 28, 2017 5:58 pm

Can you please open a new topic for unrelated question? This is confusing...

You can specific the URL in the settings.
Image

Make sure you enter a valid URL: http://www.yourwebsite.com

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests