"Send to a friend" button

[henris17]

Hello,

On CGBlog detail page, I would like to have a "send to a friend" button, to enable visitors to email the article to one of it's friends.

How can I do this ?

Regards
Henri

[velden]

You could have a look at FormBuilder module. Create a simple form; a field that is used to supply a recipient email address (the friend) and a (disabled or hidden) field that contains the url of the Blog article.

When calling FormBuilder {FormBuilder...etc} you can use a specific parameter to pre-populate the value of a field (read module help). You can use that to fill in the url of the Blog article in the appropriate field.

I do think however, that you should do good validation on that field because else it could be easily used to send spam via your server. So while validating the form make sure it's a properly formatted url to your domain. Or maybe it's even possible to use an alias or id in the field and construct the url yourself (via udt?) in FormBuilder.

[henris17]

No No there is some misunderstanding. What I want is a sort of "mailto:" link that will allow the visitor to forward the news (or at least the URL of it to a friend of his choice through his own mailing program (f.i.: outlook or thunderbird)

Regards

Henri

[Wishbone]

The mailto would have to know ahead of time what your friend's email address. Velden's idea works perfectly... you can see it on this site:

http://travel-wild.com/Products/22/84/E ... an-Safari/

The first link in the content box is "Send this trip to a friend".. You tell it your name and the email address you want to send.

[henris17]

I understand Velden option and your example. But it's not what I am looking for. The owner of the website is not interested in collecting the "friend's" e-mail address. He wants only to provide a service to the visitor to prepare their email. The sending (like with a mailto: link) will be done by the visitor own email program and not by cmsms or PHP.

In other words:
1. he clicks a button -
2. CMSMS prepare an e-mail with the text of the "CGBlog detail page" plus some reference (link),
3. CMSMS (or some javascript) opens the client's own email program and that's all.

The choice of email address and the sending itself will be done by the client's mailing program..

Henri

[Wishbone]

I don't think it works that way... The mailto: format requires an email address.. When you click on it, it pulls up whatever program with the email in the To: and optionally a subject... You can't pull up this email message without an email address already in the link.

[Wishbone]

Maybe it can be done.

http://stackoverflow.com/questions/1769 ... -recipient

[velden]

I think you should consider the following:

- you assume a visitor has a mail client installed and configured that does handle the 'mailto:' url. As many users have a cloud mail account they access via web browser (hotmail.com, outlook.com, gmail.com, etc.) or maybe are browsing via an internet cafe PC, or school or whatever, that assumption could well be wrong.
- an opening mail client will probably not be what the visitor expects to happen (user experience)
- I'm not sure all (fat) mail cliens do support the body attribute in url.
- If the mail succeeds, it will be simple formatted; just one line of plain text

All above points could be 'solved' by using a kind of form. However you need to take care of some spam/abuse prevention. And of course it will be some more work and needs a little knowledge how to setup FormBuilder.

[henris17]

Yes .... but, this is not the question:

But has someone a way of doing what I asked for:

In CGBlog ... a button linked to a "mailto:" with in the content:

the url the actual detail_page this is what I have no idea on how to do it and
the content of the detail_page this also I don't know how.

Regards
Henri

[govicinity]

Hi, I'm 11 years late to this, but it may help someone else:

Code: Select all

<a class="resp-sharing-button__link" href="mailto:?subject={$entry->title|replace:' ':'%20'}&amp;body={root_url}{$smarty.server.REQUEST_URI}" target="_self" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg>
    </div>
  </div>
</a>

[govicinity]

And if you want to have a lot more socials, here's that as well (including the email code too), you'll need to set your own styles:

Code: Select all

<div class="social-share-buttons">
<a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u={root_url}{$smarty.server.REQUEST_URI}" target="_blank" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg>
    </div>
  </div>
</a>

<a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text={$entry->title|replace:' ':'%20'}&amp;url={root_url}{$smarty.server.REQUEST_URI}" target="_blank" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg>
    </div>
  </div>
</a>

<a class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={root_url}{$smarty.server.REQUEST_URI}&amp;title={$entry->title|replace:' ':'%20'}&amp;summary={$entry->title|replace:' ':'%20'}&amp;source={root_url}{$smarty.server.REQUEST_URI}" target="_blank" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"/></svg>
    </div>
  </div>
</a>

<a class="resp-sharing-button__link" href="mailto:?subject={$entry->title|replace:' ':'%20'}&amp;body={root_url}{$smarty.server.REQUEST_URI}" target="_self" rel="noopener" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg>
    </div>
  </div>
</a>
</div>

[govicinity]

Here's the styles to make it really easy for you...

Code: Select all

/* Blog And News Social Media Share
----------------------------------------------- */

.social-share-buttons {
    width: 100%;
    float: left;
    clear: both;
    margin-bottom: 5px;
}

.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block;
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 10px 10px 10px 0;
}

.resp-sharing-button {
  border-radius: 0;
  transition: 25ms ease-out;
  padding: 10px;
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 10px;
  vertical-align: top
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle;
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  fill: none;
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
}

.resp-sharing-button--twitter:hover {
  background-color: #2795e9;
}

.resp-sharing-button--pinterest {
  background-color: #bd081c;
}

.resp-sharing-button--pinterest:hover {
  background-color: #8c0615;
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373;
}

.resp-sharing-button--linkedin {
  background-color: #0077b5;
}

.resp-sharing-button--linkedin:hover {
  background-color: #046293;
}

.resp-sharing-button--email {
  background-color: #777;
}

.resp-sharing-button--email:hover {
  background-color: #5e5e5e
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--email {
  background-color: #777777;
  border-color: #777777;
}

.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
  background-color: #5e5e5e;
  border-color: #5e5e5e;
}

.resp-sharing-button--linkedin {
  background-color: #0077b5;
  border-color: #0077b5;
}

.resp-sharing-button--linkedin:hover,
.resp-sharing-button--linkedin:active {
  background-color: #046293;
  border-color: #046293;
}