My client wants Facebook, twitter, pintrest and LinkedIn button with statastics by AddThis. but instead of using default images i want to use custom images with same functionality for AddThis.
I can manage this with Facebook and twitter icon. but with linkedin and pintrest i can not make addthis effect with custom images. i have surfed google but not getting proper solution.
My code is
<div class="addthis_toolbox addthis_default_style ">
<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_facebook" style="float:left;"><img src="http://192.168.1.2/wp_site/code/wp-content/themes/ofr/images/fb.png"
border="0" alt="Like" /> </a>
<a class="addthis_button_twitter"><img src="http://192.168.1.2/wp_site/code/wp-content/themes/ofr/images/twitter.png"
border="0" alt="Tweet" /></a>
<a class="addthis_button_linkedin"><img src="http://192.168.1.2/wp_site/code/wp-content/themes/ofr/images/email.png"
border="0" alt="Mail" /></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:media='http://192.168.1.2/wp_site/code/wp-content/themes/ofr/images/email.png'></a>
</div>
</div>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-517656c20d974f82"></script>
Try this...
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-54d3c9035fe03473" async="async"></script>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook" addthis:url='Url' addthis:title='Title'></a>
<a class="addthis_button_twitter" addthis:url='Url' addthis:title='Title'></a>
<a class="addthis_button_linkedin" addthis:url='Url' addthis:title='Title'></a>
<a class="addthis_button_google_plusone_share" addthis:url='Url' addthis:title='Title'></a>
<a class="addthis_button_email" addthis:url='Url' addthis:title='Title'></a>
<a class="addthis_button_compact" addthis:url='Url' addthis:title='Title'></a>
</div>
Also, I'm not sure about pintrest, but you definitely have to make sure your og tags are correct for LinkedIn. I would refer to this page.
Related
I have multiple Bootstrap 3 accordions on the same page, and everything is working fine, have unique ID's, etc. but am not able to figure out how to close all of them when opening one without writing tons of jQuery. Is that my only option?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<section id="home-introductions">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
Introductions to AT&T BusinessDirect®
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-3">
<div class="panel-body">
<h4>AT&T VPN (AVPN) Services Overview</h4>
<p>Learn how to access, navigate, and understand the standard applications available on AT&T BusinessDirect for AT&T VPN (AVPN) service. The high level overview covers standard applications including Report & Track Troubles, AT&T
BusinessDirect Map, AVPN Performance Reporting, Business Connections collaboration tool and the billing and Service Level Agreement (SLA) tools. This provides the basis for exploring the AT&T BusinessDirect applications in more detail
and allows you to understand how AT&T BusinessDirect can best help your business.</p>
<hr>
<h4>AT&T BusinessDirect Overview</h4>
<p>Learn how to navigate on AT&T Business Direct to perform online tasks such as ordering, account management, billing, payment, trouble reporting, and network management.</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<section id="home-ebill">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
AT&T BusinessDirect® eBill
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1">
<div class="panel-body">
<h4>AT&T Order Status Manager (OSM) Overview</h4>
<p>The OSM tool allows you to monitor near real-time order status with a click of the mouse. Easily submit changes and updates to your order. You can update the site address or contact information, and request new circuit installation, turn
up, or expedited dates. Technical details about your order can also be accessed.</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<section id="home-emaintenance">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-4">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
eMaintenance
</a>
</h4>
</div>
<div id="collapse-4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-4">
<div class="panel-body">
<h4>Report and Track Troubles</h4>
<p>This innovative tool enables you to perform trouble reporting tasks online and thereby speed trouble isolation and resolution for your AT&T Services.</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<section id="home-toll-free-routing">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-5">
<h5 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-5" aria-expanded="false" aria-controls="collapse-5">
Toll-Free Routing Tools
</a>
</h5>
</div>
<div id="collapse-5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-5">
<div class="panel-body">
<h5>Voice Management Tools – AT&T Route It!® (Web-Based) on AT&T BusinessDirect®</h5>
<p>Learn the differences between AT&T Route It! (PC-Based) and AT&T Route It! (Web-Based) on AT&T BusinessDirect. Learn how to provision IP toll-free (IPTF) terminations and manage IPTF features. It is assumed that attendees have
knowledge of AT&T Route It! (PC-Based). There will be time for questions at the end of each session.</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<section id="home-performance-reporting">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-6">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-6" aria-expanded="false" aria-controls="collapse-6">
Performance Reporting
</a>
</h4>
</div>
<div id="collapse-6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-6">
<div class="panel-body">
<h4>View Business Reports and Information – Transport AT&T Virtual Private Network (AVPN)</h4>
<p>Learn how to access and view the View Business Reports & Information tool for Transport and/or Managed AVPN Service. This application provides performance reporting that allows you to analyze your AVPN Services quickly and easily. You
will become familiar with how to view current or historical performance to help you make informed decisions about your network. You’ll also learn how to run monthly, weekly, daily, hourly, and 10-minute reports for analysis. The reports
include the following information on your Transport AVPN: MPLS Port List, Port Utilization, COS Utilization, and COS Policing. These reports can be downloaded in a variety of formats.</p>
<p>View course dates and times</p>
<hr>
<h4>View and Analyze Inventory</h4>
<p>Learn how the View and Analyze Inventory tool enables you to view current or pending inventory – and download it into your own database. You’ll learn how to display over 40 items, such as access circuit ID, master customer number (MCN),
group revenue code (GRC), address information, and circuit speed.</p>
<p>View course dates and times</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<section id="home-performance-reporting">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-7">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-7" aria-expanded="false" aria-controls="collapse-7">
FirstNet
</a>
</h4>
</div>
<div id="collapse-7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-7">
<div class="panel-body">
<h4>First Net Test One</h4>
<p>Explore the history of the classic Lorem Ipsum passage and generate your own text using any number of characters, words, sentences or paragraphs. Commonly used as placeholder text in the graphic and print industries, Lorem Ipsum’s origins
extend far back to a scrambled Latin passage from Cicero in the middle ages.</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I've had structured markup set up on a website now for around a week and Google has indexed about 20% of it however it's still not displaying. After checking the markup was correct in the validating tool I noticed this:
Everything looks fine other than the
offers [Offer]: http://www.website.co.uk/price-excluding-tax-990
Now take a look at the source code:
<div class="product-view" itemscope itemtype="http://schema.org/Product">
<span itemprop="sku">PM90-0100</span>
<div class="product-name">
<h1 itemprop="name">Basket PM90-0100</h1>
</div>
<p class="availability in-stock">Availability: <span>In stock</span></p>
<div class="price-box">
<span class="price-excluding-tax">
<span class="label">Excl VAT: </span>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="price" id="price-excluding-tax-990">
<link itemprop="availability" href="http://schema.org/InStock"/>
<meta itemprop="priceCurrency" content="GBP" />
<span itemprop="price">£30.00</span>
</span>
<div itemprop="description" class="std">This is a brand new basket to fit various Freerider mobility scooters.</div>
[code continues...]
Does this all look symantically correct? Somehow in Webmaster Tools it is grabbing the price-excluding-tax-990 ID and using it in the offers [Offer]: - which seems odd.
My problem is that using the following code I can not share on google plus using microdata but uses OpenGraph data located at the top of the website. Why?
<div itemscope itemtype="http://schema.org/Article">
<div class="quote-txt">
<span itemprop="name">Frases Celebres</span>
<span itemprop="description">El principio más profundo del carácter humano es el anhelo de ser apreciado</span>
<img itemprop="image" src="http://www.frasecelebre.net//resources/images/social_logo.png">
</div>
<div class="qfooter col-xs-12">
<div class="qsocial">
<a class="googleplus social-icon" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.frasecelebre.ocioportales.com%2Ftemas%2Fsentimientos%2Fbesos.html" title="Compartir frase en Google plus" target="_blank"></a>
</div>
</div>
</div>
The URL you are sharing to Google+ is the list page and Google+ take the metadate from that page. If you want each article to have unique metadate it needs it's own unique URL as well.
I have some structured data implemented in my website using microdata so that Google and other search engines could parse it and show appropriate rich snippets. I have added the appropriate markup for all the microdata tags that I have used but I am unable to view the rich snippets for my website while testing it using the Rich Snippets Testing Tool. I have gone through the usage guidelines and frequent issues section at the Google Webmaster but to no avail.
Upon debugging the html I found that the following snippet was successfully showing rich snippets when fed to the Rich Snippets Testing Tool.
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h1><span itemprop="name">T Park </span></h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="address">
<span itemprop="streetAddress">1 Scenic Park</span>
<span itemprop="postalCode" class="hidden">123456</span>
<span itemprop="addressRegion" class="hidden">Central </span>
<span itemprop="addressCountry" class="hidden">Singapore</span>
</div>
</div>
</div>
</div>
<div class="col-sm-6 box-map">
<h2>Location</h2>
</div>
<div style="margin-bottom:0px;" itemprop="review" itemscope itemtype="http://schema.org/Review" class="jumbotron row">
<h2>T Park Reviews</h2>
<br>
<meta itemprop="itemReviewed" content="T Park">
<div id="reviews" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="9">
<meta itemprop="bestRating" content="10"><span>Rating: 9/10</span>
</div>
<br><span itemprop="reviewBody">Lorem Ipsum....</span>
<br><strong itemprop="author" class="row pull-right">John May</strong>
</div>
However as soon as an enclosing markup of ApartmentComplex is added as shown in the snippet below, the rich snippet is not visible.
<div itemscope itemtype="http://schema.org/ApartmentComplex" class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h1><span itemprop="name">T Park </span></h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="address">
<span itemprop="streetAddress">1 Scenic Park</span>
<span itemprop="postalCode" class="hidden">123456</span>
<span itemprop="addressRegion" class="hidden">Central</span>
<span itemprop="addressCountry" class="hidden">Singapore</span>
</div>
</div>
</div>
</div>
<div style="margin-bottom:0px;" itemprop="review" itemscope itemtype="http://schema.org/Review" class="jumbotron row">
<h2>T Park Reviews</h2>
<br>
<meta itemprop="itemReviewed" content="T Park">
<div id="reviews" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="9">
<meta itemprop="bestRating" content="10"><span>Rating: 9/10</span>
</div>
<br><span itemprop="reviewBody">Lorem Ipsum....</span>
<br><strong itemprop="author" class="row pull-right">John May</strong>
</div>
</div>
So assuming my page is about ApartmentComplex, and I want to include a Review of it, how should I structure/nest this markup?
I don't think there's anything wrong with your mark-up or Microdata. I just don't think that the Google Structured Data tool shows any rich snippets for http://schema.org/ApartmentComplex types - rich snippets are only available for certain schema.org types.
To prove this, change the wrapping ApartmentComplex type to a Product type, and remove the address (which isn't part of "Product") and you'll see that a rich snippet is produced in the Google Structured Data Testing Tool (because Google do show rich snippets for Products).
Edit to add: this is a possible workaround - Google will show rich snippets for schema.org types where the surrounding type is a Review, so you could use Review as the top-level type, then have the ApartmentComplex type as the "itemReviewed" property - this works in the Google Structured Data Testing Tool:
<div itemscope itemtype="http://schema.org/Review" class="container">
<div class="row" itemprop="itemReviewed" itemscope itemtype="http://schema.org/ApartmentComplex">
<div class="col-sm-12">
<div class="page-header">
<h1><span itemprop="name">T Park </span></h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="address">
<span itemprop="streetAddress">1 Scenic Park</span>
<span itemprop="postalCode" class="hidden">123456</span>
<span itemprop="addressRegion" class="hidden">Central</span>
<span itemprop="addressCountry" class="hidden">Singapore</span>
</div>
</div>
</div>
</div>
<div style="margin-bottom:0px;" class="jumbotron row">
<h2>T Park Reviews</h2>
<br>
<div id="reviews" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="9">
<meta itemprop="bestRating" content="10"><span>Rating: 9/10</span>
</div>
<br><span itemprop="reviewBody">Lorem Ipsum....</span>
<br><strong itemprop="author" class="row pull-right">John May</strong>
</div>
</div>
I have the following HTML which is indexed by Google Custom Search. I am using Microdata with Schema.org.
<p>
<link itemprop="url" href="/static/Books/A_Good_Foundation.pdf">
<a href="/static/Books/A_Good_Foundation.pdf" onclick="trackOutboundLink(‘A Good Foundation’);">
<button type="button" class="btn btn-default btn-md">
<span class="glyphicon glyphicon-book"></span> Read
</button>
</a>
</p>
I want to be able to get itemprop on the URL not the HTML page which hosts the URL. I can't modify the PDF.
Any ideas?
You're already declaring the .pdf URL to be the URL of the book, although your code doesn't show the itemtype to which your itemprop belongs. The <link> isn't necessary unless it's required for other purposes: the url property can just as readily be attached to the URL.
<p itemscope itemtype="http://schema.org/Book">
<a itemprop="url" href="/static/Books/A_Good_Foundation.pdf" onclick="trackOutboundLink(‘A Good Foundation’);">
<button type="button" class="btn btn-default btn-md">
<span class="glyphicon glyphicon-book"></span> Read
</button>
</a>
</p>
sdsf