I'm using the AddThis widget and I copied the default code for the first option they have, which is the one with the facebook like, tweet etc... that code being:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxxx"></script>
<!-- AddThis Button END -->
However I wanted to add a Google Plus button as well, so I added this in to the code:
<a class="addthis_button_google_plusone"></a>
However this output a much smaller image compared to the others. Is there any way to get the more appropriate sized image?
Here is what it currently looks like:
As you can see the Google Plus icon is too small, however that's the right icon I want, just bigger; don't want the "badge".
Update:
Use size to size your buttons:
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
Link to guide - Larger Standard
Add this third party buttons - link (like Google +1)
Also, Code (maybe this is what you want):
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_google_plusone_badge" g:plusone:href="...your-link..."></a>
</div>
OR, in your code itself, just add another anchor tag to the div:
<a class="addthis_button_google_plusone_badge" ></a>
Related
Helping edit a client's WordPress site, which uses UIkit as a framework. They've requested a pop up modal window appear when a link that leads to an external website is clicked. UIkit's baked in modal functionality makes this a breeze. The only issue is that, when using the target="_blank" attribute on the link, the destination opens successfully in a new browser tab but the modal window remains open. Would like it to close automatically once the link is clicked, should the user choose to remain on the page. Here's a code example:
<div id="external-link-modal-nas1" uk-modal="">
<div class="uk-modal-dialog uk-margin-auto-vertical uk-modal-body">
<a class="uk-button uk-button-primary" href="www.link.com" target="_blank" rel="noopener">Yes, I want to leave the site</a>
</div>
</div>
Have been using the UIkit docs as a reference: https://getuikit.com/docs/modal
I can see what I need in there to accomplish the desired result (for example, the "beforehide" event), but I have not been able to figure out how to correctly implement it within the code.
Advice or insight would be greatly appreciated.
Add the uk-toggle attribute with the modal target to the link in the Popup.
In your example, add uk-toggle="target: #external-link-modal-nas1" to the link.
The toggle changes the visibility of elements, find more information here: https://getuikit.com/docs/toggle
Edited code example:
<div id="external-link-modal-nas1" uk-modal="">
<div class="uk-modal-dialog uk-margin-auto-vertical uk-modal-body">
<a class="uk-button uk-button-primary" href="www.link.com" target="_blank" rel="noopener" uk-toggle="target: #external-link-modal-nas1">Yes, I want to leave the site</a>
</div>
</div>
It needs to be placed on header section (revolution Slider - WP)
<!-- Place this tag where you want the Book Appointment to render. -->
<div class="lybrate-widget" identifier="/wgt/clinic/avis-hospital-sexual-medicine-and-mental-health-clinic"></div>
<span class="lybrate-powered">Powered by <a target="_blank" href="https://www.lybrate.com">Lybrate.com</a></span>
<!-- Place this tag just before the <body> tag. -->
<script type="text/javascript" src="https://www.lybrate.com/js/v104/widget/root.js"></script>
You can go to Revolution Slider -> Edit Slides and edit required slide (with buttons). Then click on button and specify Max Width and White Space values. Here an example:
Screenshot from revolution slider
The image and caption, in class story has two different links. Image points to one location and link to another.
I need to make whole class story into a link.
<div class="story">
<img src="linkforimage">
Caption for image
</div>
I need a solution like this:
<a href="link">
<div class="story">
<img src="linkforimage">
Caption for image
</div>
</a>
Nesting a tags is a bad idea. I would use a delegate here. Have a wrapper a tag and in JS check which source span was clicked.
html
<a href="#" class="story">
<span data-href="link"><img src="linkforimage"/></span>
<span data-href="link2">Caption for image</span>
</a>
js (jquery based)
$('.story').on('click', 'span', function() {
document.location.href= $(this).data('href');
});
You can't have anchor tag inside anchor tag.
You can use onclick method to achieve your goal.
<div onClick="window.open(link);" class="story">
<a> <img src="linkforimage"></a>
<a onClick="window.open(link2); event.stopPropagation();" >Caption for image </a>
</div>
EDIT jsfiddle
Clarifying the problem I am facing right now is that I am using embedly platform, where image comes from . So, I just post with link and image are parsed from the link by embedly. But, that ahref takes user to original web site. Caption takes user to the page with that content on my web site. I need to make of caption to the whole div.
So, I found the answer with CSS,
I just added: style=" pointer-events: none;cursor: default;" on the link with image and style="cursor: pointer;" onclick="window.location='link'" on a class "story" in div.
I'm trying to add the AddThis widget to my page and customize it according to this page: http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
However it doesn't seem to be working.
I am trying to output a custom selection of items, with my code being:
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {data_track_addressbar:true,services_compact:"facebook,twitter,google_plusone,pinterest,email"};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx"></script>
As you may be able to figure out I'm just trying to display these services: facebook,twitter,google_plusone,pinterest,email
But the output I get is: print,twitter,facebook,email
What am I doing wrong?
The parameter "services_compact" is used to specify the services you want to see in the compact menu when you hover over the plus button. To specify the buttons in the order you want, try this:
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
By default the widget tries to detect the user's preferred services, but you can override that if you like. Here's the specific section in the Client API that described this:
http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#rendering-preferred-services
Hope this works for you.
I am using the addThis widget to display Facebook, Twitter, Google, Blogger, Wordpress logos on my site.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-1324kj34h243kjh2"></script>
I would like to know of a way that I can capture when someone clicks one of the buttons for Google Analytics tracking reasons. I have attempted to add an onClick to an anchor, but this does not fire - presumably because the markup is re-written by the included JavaScript.
This is my code:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="_gaq.push(['_trackSocial', 'addThis', 'email']);"> </a>
<a class="addthis_button_facebook left" title="Facebook"> </a>
<a class="addthis_button_twitter left last" title="Twitter"> </a>
<a class="addthis_button_google left" title="Google">
<img src="images/google.gif" alt="G" />
</a>
<a class="addthis_button_blogger left" title="Blogger"> </a>
<a class="addthis_button_digg left last" title="Wordpress"> </a>
</div>
</div>
I am using the addthis_config to report GA activity at the moment, but I wish to report to two profiles, so I am looking for a way of capturing the click as that seems like the best way around the problem.
Make sure you have that div appended on the DOM to ensure you could use events. Otherwise check liveQuery.
I haven't used addThis widget but I would try with jQuery using class name:
$.('.addthis_button_email').click(function(){
//Count it...
});
Or using a custom method in every button:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="notifyGA(information....)"> </a>