Advanced Twitter share button for Joomla blog page
On my Joomla website I use share buttons on the blog pages that share the full article page rather than the blog index page, many people have asked me how I do this without using a 3rd party extension. Here I try to answer in a simple way for people who have a little understanding of code or script but who may not be experts in Joomla or PHP.
For this example I am using Joomla V 3.1.9 and I am working with the Protostar template but similar will work on other set-ups.
Although this tutorial showcases the Twitter button, FaceBook or others are very similar.
I want to add a share button beside the read more button on my Joomla website blog.
I want this share button to link to the specific article associated with the read more button and not the blog index page or current url. I don’t want to have to write the URL for each instance of the share button I need the page URL to be populated automatically for every article I publish.
We should never hack Joomla core files.
Modifying core files is unwise so my first step is to create an override, in Joomla a page or layout override is basically a copy of the Joomla core page you wish to modify, if this copy exists in the correct location it will be used instead of the original core page itself therefore it avoids core hacks and safeguards against potential update issues.
The page we need to work with is the page that displays the read more link or button. So the first step is to create an override for that.
Create the override:
1. From your root directory go to \layouts\joomla\content\ find the file readmore.php and copy it.
2. Now in your template folder go into html folder and create this directory structure layouts\joomla\content, for this example that is \templates\protostar\html\layouts\joomla\content, now paste the copied readmore.php file here.
Some preparatory work:
The original readmore.php file creates a single paragraph element based on if, elseif, and else conditions. Because we are adding more elements here we should structure it more elaborately so that we can align and position the buttons with CSS. I have ‘Show Title With Read More’ set to Hide, as this keeps the read more button small and always consistent in size but it will also work if you show the title on the button.
Please remember to work on the file you copied.
The line numbers here are approximate they may be slightly different in your file.
Now we will create an outer div element to enclose the full section, and an inner div element just for the read more button:
1. Create a div just before the paragraph element (about line 16) and give this div a class or ID so that you can apply CSS.
2. Close the above div on the very last line of the file — this will be the ultimate closing line of this file.
3. Create a new div just after the one above (about line 17), and give this div a class or an ID to distinguish it. The class or ID you give here allows you to apply individual or specific CSS to the read more button no matter which block of the if else code generates it.
4. Now close this div immediately after </p> the closing tag for the paragraph element (about line 48)
This completes the preparatory work giving us a more defined or malleable structure. This more defined structure considers that we may want to add more than one share button and also allows us to control display for smaller viewpoints such as mobile devices.
Now we can add our share buttons.
Here I will just add Twitter Share
Add our buttons:
1. About line 52 we create another div this is after both the closing </p> and closing </div> from step 4 above, and just before the last line of the file, this div encloses our anchor for the share button and needs a class or ID so that we can apply specific CSS rules
2. Add our share anchor
<a href=”https://twitter.com/share?ref_src=twsrc%5Etfw" class=”twitter-share-button”
data-url=”<?php echo $displayData[‘link’]; ?>”
data-via=”YourUserID”
data-hashtags=”YourHashTag”
data-related=”YourUserID”
data-show-count=”false”>Tweet
</a>
3. Now close this div with </div>
That is the Twitter share button added and it will show automatically anywhere you display the Joomla Read More button it will share the href url of the read more button and not the blog index page or current url.
The structure of your code should look similar to this:
<div class=”myreadmore-outer”>
<div class=”myreadmore-button”>
<p class=”readmore”>
The original Joomla code is here
</p>
</div>
<div class=”myblogtwitter”>
Your Twitter share button code here
</div>
</div>
For this to work you will need to have your settings to show the read more button, although if you don’t want to display the read more button you can disable it within the readmore.php file.
You will need the Twitter widgets.js script in your template this is necessary to use any Twitter interaction, I write it in-line in the footer of my index.php file for speed but you can include it in the head of your index.php file if you prefer, or if you do not use Twitter interaction on every page of your website you can create a simple system plugin or even a module to control use to specific pages.
You can add other share links similarly using the last 3 ‘Add our buttons’ steps please remember to distinguish each for CSS.
Next you will want to add some CSS it is better to use a custom user css file than edit the template.css file.
The CSS you need to add will depend on your particular layout or design, you will want to add some space between the buttons and probably align them horizontally and size them vertically.
I hope this will be of help.
