Hand-code social media share buttons

masa · 2018-04-05 10:49:01

I’m currently using addThis for share buttons, but I want to get rid of the cruft and cookies it adds and I want to use my own icons. I’m looking for a simple way to code these buttons manually.

I found a nice method here Create manual social media share buttons but it relies on wordpress specific functions:

$url   = urlencode( get_permalink() );
$img   = urlencode( genesis_get_image( array( 'format' => 'url' ) ) );
$title = urlencode( get_the_title() );

I guess these could be done natively in PHP, but I don’t know any PHP.

I’d be very grateful for any help.

philwareham · 2018-04-05 11:01:39

Which social media channels specifically do you want to allow?

There’s many ways to achieve this, but the simplest would probably be the pat_article_social Textpattern plugin.

gaekwad · 2018-04-05 12:42:22

See also textpattern.tips/adding-social-media-buttons-to-textpattern

GugUser · 2018-04-05 13:42:40

A simple method, you can style it any way you want:

<a class="share-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://your-domain.com" title="Title text"><span>Facebook</span></a>

<a class="share-twitter" href="https://twitter.com/intent/tweet?text=predefined%20text&amp;url=https://your-domain.com" title="Title text"><span>Twitter</span></a>

michaelkpate · 2018-04-05 15:08:37

masa wrote #310647:

I guess these could be done natively in PHP, but I don’t know any PHP.

That is one of the advantages that Textpattern has always had over WordPress: You don’t need to know any PHP. This is the same block of code minus all the extra stuff that WP requires.

<a href="http://www.facebook.com/sharer/sharer.php?u=<txp:permlink />&t=<txp:title />" class="share-button facebook" target="_blank">Share on Facebook</a>
<a href="http://www.twitter.com/intent/tweet?url=<txp:permlink />&text=<txp:title />" class="share-button twitter" target="_blank">Tweet Me!</a>
<a href="http://pinterest.com/pin/create/button/?url=<txp:permlink />&media=<txp:image_url id='<txp:custom_field name="article_image" />' />&description=<txp:title />" class="share-button pinterest" target="_blank">Pinterest</a>
<a href="http://plus.google.com/share?url=<txp:permlink />" class="share-button google" target="_blank">Google+</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<txp:permlink />" class="share-button linkedin" target="_blank">LinkedIn</a>
<a href="http://www.reddit.com/submit?url=<txp:permlink />" class="share-button reddit" target="_blank">Reddit</a>

masa · 2018-04-11 11:38:20

Great, thanks everyone for all the replies!

That is one of the advantages that Textpattern has always had over WordPress: You don’t need to know any PHP. This is the same block of code minus all the extra stuff that WP requires.

Yes, I remembered that :)

I think I’ll go with Michael’s solution as it’s short and very “Textpattern-ish”.

jayrope · 2018-04-23 21:25:59

Just adding to this, that Michael’s (edit: and GugUser’s) solution seems to be the only one, that doesn’t necessarily support the data mining done by all social media companies (survival strategy) – or does it still?

Last edited by jayrope (2018-04-23 21:27:45)

michaelkpate · 2018-04-24 02:50:53

jayrope wrote #311339:

or does it still?

Back in 1997 or so, a friend of mine and I put together what we considered at the time a massive list of Young Adult Literature Resources you could find on the Web. I put it online and submitted it to all the major search engines. And a few weeks later, it was very exciting that when you did a search the page would show up.

Flash forward to the early days of Blogging and it was simply amazing by 2002/2003 that you could post something online, have it spidered, indexed, and be able to search for it within a few hours.

Putting these buttons on a page is certainly a way to bring the content to the attention of the various sites. Is that data-mining? Possibly. I guess it depends on your point of view.

jayrope · 2018-05-31 15:27:24

Michael, hmm, it seems easier (and doesn’t involve visitor tracking) to simply submit a URL to various search engines and then let those do their work.

colak · 2018-05-31 16:26:36

Revisiting this thread so as to contribute an alternative code, based on Michael’s but using more txp tags.

<a href="http://www.facebook.com/sharer/sharer.php?u=<txp:permlink />&amp;t=<txp:title />: <txp:meta_description format="" />" class="share-button facebook" target="_blank">Share on Facebook</a>
<a href="http://www.twitter.com/intent/tweet?url=<txp:permlink />&amp;text=<txp:title />: <txp:meta_description format="" />" class="share-button twitter" target="_blank">Tweet Me!</a>

You get my drift….

michaelkpate · 2018-05-31 17:49:29

jayrope wrote #312221:

Michael, hmm, it seems easier (and doesn’t involve visitor tracking) to simply submit a URL to various search engines and then let those do their work.

In my redesign of Patetech, I figured out the easiest way in 4.7 to keep myself from being tracked so I don’t throw off the stats.

    <txp:if_logged_in not>
        <txp:output_form form="google-global-site-tag" />
        <txp:output_form form="google-auto-ad-code" />
    </txp:if_logged_in>

One of the things I am working on now is figuring out how to give site visitors the ability to do the same thing.

colak · 2018-05-31 17:56:56

michaelkpate wrote #312229:

In my redesign of Patetech, I figured out the easiest way in 4.7 to keep myself from being tracked so I don’t throw off the stats.

<txp:if_logged_in not>...

p. Nice omission of the else statement!!!

One of the things I am working on now is figuring out how to give site visitors the ability to do the same thing.

Would oui_cookie be able to do that?

michaelkpate · 2018-05-31 18:29:01

colak wrote #312230:

p. Nice omission of the else statement!!!

Thanks. I had been looking for an opportunity to try that out since I read etc’s primer.

Would oui_cookie be able to do that?

I think so. I am hoping to come up with something more elegant than this.

jakob · 2018-05-31 22:19:34

michaelkpate wrote #312231:

Thanks. I had been looking for an opportunity to try that out since I read etc’s primer.

I think so. I am hoping to come up with something more elegant than this.

Yes, you can do that with oui_cookie if you want a purely php-based method. That said, Jukka’s code is almost as minimal as it gets.

If you don’t mind javascript/jquery, I have an experimental fork of jquery.cookiebar. The original almost met my needs of being small, customisable and flexible. I expanded it slightly to properly cater for explicit opt-in, and added the ability to also honour do not track settings by automatically reverting to “decline cookies” while showing a message on first load. You can also do half-way arrangements and explicitly test for do not track or cookies. Its biggest drawback is it requires jquery (though more recent jquery libraries are much smaller), so it’s big if that’s your only use of jquery or small if you are already using jquery. I’m not expert enough yet to rewrite it as pure javascript. Also: it is just for universal cookie consent, not granular consent.

I use it in conjunction with oui_cookie to make a cookie preferences page to allow visitors to revert their decision and to disable google analytics. It works in javascript requirejs setups too.

singaz · 2018-06-02 22:47:18

Such code:

<div class="analitics">
<script>
if (jQuery.cookieBar('cookies')) {
// Google Analytics code
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'XX-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');
 	} 
</script>
</div><!-- endanalitics -->

Click the button “Disable cookies”, but the code analitics displayed all time.

How to do it right?

Textpattern CMS

Textpattern CMS support forum

#1 2018-04-05 10:49:01