This one has had me stumped for a while.
I have the following code in CodePen:
<a class="twitter-share-button color-change"
href="https://twitter.com/share" target="_blank"
data-size="large"
data-text="Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it's the only thing that ever has. - Margaret Mead"
data-hashtags="RuairiMcN">
<i id="twitter" class="fa fa-twitter-square fa-3x" aria-hidden="true"></i></a>
It's a Twitter share button, it should open a Twitter page where you can make a tweet with the content of "data-text". However, if you follow it, the Tweet box is populated with something different:
"https://s.codepen.io/boomerang/iFrameKey-b5c36245-7638-5a23-0a1b-4b5fab51692a/index.html"
No idea where that's coming from. Re-read the parameters for this button from the Twitter Dev area with no success.
You probably haven't loaded the Twitter widget Javascript properly. (This is step 4 in "How to add a Tweet button to your website".) Without that Javascript loaded, the only information that Twitter has is the referrer -- in this case, that's something internal to Codepen.
Related
I am managing a Wordpress-powered website for my faculty. Today when I share a link of the website to my student, I discovered that there is a hidden span element in the code of the site, and it only shows up in the sharing preview (Open Graph or Facebook Graph) if the content of the page is short enough
The span element look like this:
<span class="keys_words" style="display: none;">
<a class="links_good_rands" href="some random link">Some random text</a>
|
<a class="links_good_rands" href="some random link">Some random text</a>
</span>
I have tried deactivating all plugins and changing the theme, but the element persists. Google search results don't really help, either.
The website is http://ngoaingu.vimaru.edu.vn/. The code is injected at the end of the main entry content.
Can anyone check this out and help me get rid of this strange element?
I have a working whatsapp <a> tag in this way:
<a class="whatsapp share-local-button
data-action="share/whatsapp/share"
target="_blank" href="whatsapp://send?text=link#withMark" >
<i class="fa fa-whatsapp"></i>
</a>
This works, but what is in href is simply the shared text, not the url, which is the current....
I tried with
data-href="link#withMark"
But no different results...
How can I share my customized url and not the current one?
Try adding something like a bit of PHP if you are able to. if you want to keep it clean html then just ignore this.
in php u define the link u want to set in a variable, then just add <?php $yourvariable ?> to the whatsapp://send?text= INSERT HERE
Add a JavaScript code as I did to dynamically add the link.
Also it is reusable and can be used in any page.
Here, we set the href of the element having class=whatsapp to it's href+ the site link.
Try running the code
document.getElementsByClassName('whatsapp')[0].href+=window.self.location;
<a class="whatsapp share-local-button
data-action="share/whatsapp/share"
target="_blank" href="whatsapp://send?text=">
<i class="fa fa-whatsapp">whatsapp</i>
</a>
I'm trying to parse a html code for specific content, but the problem I'm running into is that certain websites require you to click a "Show more" button.
When I grab the URL there's no way to tell it I want the full code with the "Show more" button clicked. Is there a way to grab the full source code of the page, because it keeps getting cut off after a point.
Example website: https://play.google.com/store/search?q=fm%20radio&c=apps&hl=en
The source code gets cut off at the "Radio hungary" app, which is the last app that loads automatically.
This even happens when I load everything and then try to view the pages source code.
It ends in:
style="display:none"> Show More </button> <div class="bottom-loading" style="display:none"></div> <div class="footer"> <div class="footer-links-container"> <span class="copyright"> ©2016 Google</span> <a class="footer-link id-no-nav" href="https://play.google.com/intl/en_us/about/play-terms.html" target="_blank"> Site Terms of Service</a> <a class="footer-link id-no-nav" href="http://www.google.com/intl/en_us/policies/privacy/" target="_blank"> Privacy Policy</a> <a class="footer-link id-no-nav" href="http://developer.android.com/index.html" target="_blank"> Developers</a> <a class="footer-link id-no-nav" href="https://play.google.com/artists" target="_blank"> Artists</a> <a class="footer-link id-no-nav" href="https://support.google.com/googleplay/?p=about_play" target="_blank"> About Google</a> </div> </div> </div></div><div class="loading" jscontroller="EgJAl" jsaction="rcuQ6b:rcuQ6b" id="page-load-indicator"></div><div id="instrument-manager-parent"></div><script src="https://wallet.google.com/inapp/lib/buy.js"></script><script
Even if I click the show more button.
The purpose of this is to grab all the URL's of the images, and I can't do this by hand because well.. we have thousands of images.
I believe if you just take advantage of the Javascript HTML DOM methods you can accomplish what you want to achieve.
This will help: http://www.w3schools.com/js/js_htmldom_methods.asp
By using this, you can target specific elements/ids/classes and pull or modify the information you want.
Jquery will also help you a lot with this.
You can solve it using Javascript dom,steps to do are
keep your content in a div element
set its default height as a fixed value
on clicking the show more link execute a javascript function to make the div element height to auto
in this way you can show content excerpt with javascript
If you go for server side, you can create a new page for showing the content.
I wanted to add social profile links schema for SEO,
Now according to https://developers.google.com/structured-data/customize/social-profiles
<a itemprop="sameAs" href="http://www.facebook.com/your-company">FB</a>
It should work, but what if in my code it has to be:
<a itemprop="sameAs" href="https://twitter.com/your-company">
<i class="fa fa-twitter"></i>
</a>
Would this be understood by Search Engines correctly as a twitter link or would they just understand it as a social media link without being able to figure out that the href points to twitter? I'm pretty sure it works, but I'd like to be more sure.
I want to add AddThis, social bookmarking service, to my site. I followed the instruction on the site. There is an option where you can select your own services and customize the order.
I selected facebook, twitter, google, linked in, pinterest and whatsapp.
As instructed, I added
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53353be15c66b7b4" async="async"></script>
inside the head tag just before closing.
Then, where I need the buttons to show, I added
<div class="addthis_toolbox addthis_default_style addthis_32x32_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_preferred_5"></a>
<a class="addthis_button_preferred_6"></a>
</div>
The end result:
It shows a few buttons that I haven't selected.
I must be doing something wrong and spent the whole day looking into it. Can you help.
Not Seeing the Buttons You Expected? It’s Because Smart Layers are Personalized
One of the key features of our new Smart Layers is something you can’t
actually see. All the share buttons are personalized to each visitor.
This makes it much more likely that people will share your site.
-source: http://www.addthis.com/blog/2013/07/30/not-seeing-the-buttons-you-want/
So basically what it means is that if a particular user is know to use a particular social service more, only those buttons will be shown to that person. Filtering appears to be done at a low level.
Have a look at other similar services.
Your problem is that you are manually setting the icons on your page. Considering you are selecting your services via the addthis.com website, simply add the following div element to your page, in place of your current addthis code:
<div class="addthis_sharing_toolbox"></div>
That div will get filled automatically with the services you selected from addthis.com, trust me on this one I got this.
I am Elsa from the AddThis support team.
If you were using the default AddThis configuration it's using what we call Preferred Services. These are different for each individual based on their past sharing history and what services are most popular in our service. This is designed to make it easy for users to share to their preferred service and to increase sharing.
If you want to show up the dashboard configured sharing button in your website then Replace the below code
<div class="addthis_toolbox addthis_default_style addthis_32x32_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_preferred_5"></a>
<a class="addthis_button_preferred_6"></a>
</div>
with the below inline HTML code of that tool.
<div class="addthis_sharing_toolbox"></div>