I'm using amp-social-share for implementing social share on my amp page. I would like to get the share count. But I couldn't find any proper methods in amp docs related to this. Is there any method to get social share count in amp pages?
The amp-social-share component cannot display share counts.
Currently amp-social-share does not do any communicating with the social platforms in regards to share counts or other data. Social share only uses endpoints for each platform (which you can see in the default config) to add sharing functionality.
The solution below is a work-around to update both view-count and share count. I will use amp-list to update view and share count
Maintain an amp-state with a GET API end-point to update share count and name the state as you wish(I name it share).
Place amp-list at the starting of the body because amp-list starts rendering when the html tag is about to be visible on the page :p
<amp-list id="myList" src="your API end-point to update view-count" [src]=do.url>
<template type="amp-mustache">
</template>
</amp-list>
<amp-state id="myState">
<script type="application/json">
{
share:{
"url":"your API end-point to update share-count"
}
}
</script>
</amp-state>
Finally, In the amp-social-share tag, add role="button" on="tap:setState({do='share'})" to the element.
This way you are in a position even to share-count of a particular social media platform your article was shared.
Reference : https://amp.dev/documentation/examples/components/amp-list/?referrer=ampbyexample.com
Related
I am trying to create a Facebook share option for my blog articles, and it works but it doesn't take the article text or image, but the first image and text on the (single page) website. How can I change my share code so that it will use the article's image and text from where I click the FB share button?
This is the template for the blog article, with the FB share code included:
<div class="contentLeft">
<div class="roundimage">
<a href="[[+roundImage:phpthumbof=`h=750&zc=1`]]" class="colorbox" title="[[+roundImageCaption]]"><img class="round"
src="[[+roundImage:phpthumbof=`w=170&h=170&zc=1&q=95`]]" alt="[[+roundImageCaption]]" /></a>
</div>
<script type="text/javascript">function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>
<h4 class="blue" style="margin-bottom:10px; margin-top:0;">[[+articleHeadline]]</h4>
<p class="datetext">[[+datetimeText]]</p>
<p class="readmoretext">[[+articleText]]</p>
<div class="divider"></div>
</div>
I hope you can help! Thank you!
It should be enough to make sure that the article page, ie the link that you are sharing, embeds the correct og:image and og:description. You only share the link with the share button, and facebook will embed the link and look in it for the proper data.
Update:
I guess you're not using the articles package to create the blog? If you are you already have individual pages even if you're not using them =) If you're not i assume you're using some sort of resource loop to create your entries.
After looking around in the facebook docs it seems you can specify the image (https://developers.facebook.com/docs/opengraph/using-actions/v2.0#params) when creating your share button using the javascript sdk (https://developers.facebook.com/docs/sharing/reference/share-dialog). Each article will need to call something like this instead of the current javascript share url functionality.
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
image: "YourImageForThisRespectiveShare",
})
}, function(response){});
If you prefer to explore the method i mentioned in the comments it would go something like this:
Look in your code at u=location.href;, you'd want to try modifying that to u=location.href+'?articleid=[~[*id*]~]';. When you share you should hopefully see the appended article ID for each article.
You'll then need to make sure you can specify og:image and description for each article, i assume you somehow have resources set up that represent each article, in that case just create a couple of template variables for that resource type.
In your header you could then use the getResourceField package for example to retrieve the correct TV from the correct resource, as specified by the ?articleid= parameter in your URL.
To retrieve the parameter you'll need a simple snippet like return (!empty($_GET['articleid']) ? $_GET['articleid'] : $default);. Lets name the snippet: "getArticleId". I left the option to decide a default image when there is no &articleid specified.
You're using modx evolution from the look of your [~[*id*]~] tag, but there should be some equivalent of the getResourceField package for evolution. This is the revolution version of the code needed:
<meta property="og:image" content="[[!getResourceField?
&id=`[[!getArticleId? &default=`[[*id]]`]]` //Take the blog page's own image as a default
&field=`imageTV` //you'll of course have to change "imageTV" to whatever you call it
&isTV=`1`
]]" />
Repeat for og:title and og:description, with their respective TV names.
I am trying to use Google Tag Manager and implement a custom dimension in a website. I use code igniter and need to get how many facebook, twitter and googleplus logins there are. I already inserted the dataLayer in the body above the GTM code but it seems the dataLayer.push isn't sending anything to GA. I am not seeing any pageviews or custom dimensions fired in GA. Is there anything else I need to do?
<body>
<script>
dataLayer = [];
</script>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
<script>
dataLayer.push({'socialType': '<?php echo $adapter->id; ?>'});
</script>
Do I need to put the regular GA code or does GTM insert this for me?
From what you already have you also need to do the following:
Make sure that you have created a tag for Google Analytics in your tag manager account for page views, I assume that you have already done this.
Make sure that you have created another tag for Google Analytics, set the Analytics ID and then set the type of tag to Social.
I have icons (custom branded facebook, twitter, pinterest etc.) on a website and I would like it to be easy for visitors to talk about blogposts on these various social media.
To do so, I have created a server-side function that outputs links that look like this:
<a target="_blank" href=http://rest.sharethis.com/share/sharer.php?destination=facebook&url=http%3A%2F%2Fsite.mydevelopmentserver.com&title=postname&pub_key=123456&access_key=123456"/>FACEBOOK LINK</a>
with equivalent links for the other social media links.
I do not load any sharethis scripts or interact with the sharethis api in any other way on my site, and this method seems to be working fine (the jury is still out on analytics)
My questions are:
a. Is there anything wrong with using sharethis in this way?
b.Is there a better way to do this that does not require me to have my access key visible in my links?
I think the answer to my questions are:
a. Yes, there is something wrong with using sharethis in this manner. Your access key will be visible to everyone.
b. Yes, there is a better way to do this. There is no need to access the API directly at all to customize your sharethis buttons. Just insert the normal sharethis script that you can generate here: http://sharethis.com/publishers/get-sharing-tools, then change the buttons' classes to st_[service]_custom (where service is the service you would like to access).
That is, put I put this in my header:
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "1234"});</script>
and this in the body:
<span class="st_pinterest_custom">Pinterest</span>
<span class="st_twitter_custom">Twitter</span>
<span class="st_facebook_custom">Facebook</span>
<span class="st_googleplus_custom">Google</span>
<span class="st_stumbleupon_custom">Stumble</span>
Then I just style the buttons using my own CSS.
Works like a charm, thanks sharethis!
Also, if anybody needs general help making things more complicated than they need to be, ask me -- I can do it for you in a jiffy!
I think the answers to my questions are:
a. Yes, there is something wrong with using sharethis in this manner. My access key will be visible to everyone.
b. Yes, there is a better way to do this. There is no need to access the API directly at all to customize your sharethis buttons. Just insert the normal sharethis script that you can generate here: http://sharethis.com/publishers/get-sharing-tools, then change the buttons' classes to st_[service]_custom (where service is the service you would like to access).
That is, put I put this in my header:
stLight.options({publisher: "1234"});
and this in the body:
Pinterest
Twitter
Facebook
Google
Stumble
If you want to embed youtube dynamically then it is totally easy. You just replace the video id in the embed code.
<iframe width="420" height="315" src="http://www.youtube.com/embed/<?=$youtubeid;?>" frameborder="0" allowfullscreen></iframe>
I'm struggling to do the same thing with soundcloud. Is it possible? - the embed code is as follows:
<iframe src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F57162664&show_artwork=true"></iframe>
It seems to me like you'd need to know this api code to embed the track, and so you'd have to look this up each time.
The 'api code' is just tracks/ followed by the track id (or groups/ with a group id, etc), not too different from YouTube, it's just not as easily accessible as YouTube's, since the id isn't in the URL. You can get the id from looking at the share code on a track, but even easier is to use the oembed service to get the full embedding HTML needed (it also calculates the proper height of the iframe to include), and it only requires the 'permalink' url which you see on a track page.
An updated version of the widget coming in the next few weeks should also support the permalink urls out-of-the-box.
Looks like you have to use the API to dynamically get the embed code:
Here's the documentation:
http://developers.soundcloud.com/docs#playing
I am trying to find a way to embed a share/+1 link for Google+ in a Newsletter, much like the Facebook share and tweeter tweet links can be embedded in a newsletter, which can be achieved with the following two urls:
https://www.facebook.com/sharer.php?u=[URL]&t=[TEXT]
http://twitter.com/intent/tweet?source=sharethiscom&text=[TEXT]&url=[URL]
Is there a similar functionality available for Google Plus?
All I could find on my own, is the Google+ button, which unfortunately uses JavaScript and thus it cannot be used in an email newsletter. I would expect Google to provide a static url fallback, but I cannot find it anywhere.
https://plus.google.com/share?url=http%3A%2F%2Fexample.com
You can share the link on Google+ with the official Google+ share link.
Replace the url parameter with the URL encoded link you want to share.
This one works fine for me :
https://plus.google.com/share?url=your-page-url
The share link allows you to do this. It will work in an email, but it's not quite the same as the +1 button.
To use the share link, add a link element to your email that complies with the Google+ Buttons policy. Set the href attribute to https://plus.google.com/share?url={url encoded share target}
For example, linking to https://plus.google.com/share?url=http%3A%2F%2Fexample.com will allow you to share example.com on Google+: (yes, that is a working demo).
Check out the official docs for more info.
If you use this approach please be aware of the fact that it is not a direct replacement for the +1 button. The link shares the target URL on Google+, but it does not actually +1 the target page. Only the +1 button can +1 a page.
Solution for those who needs custom title, description and image. You should make following changes to target URL:
Step1. add itemscope itemtype="http://schema.org/LocalBusiness" into <html> tag. It will look like <html itemscope itemtype="http://schema.org/LocalBusiness">. More itemtypes here
Step2. Place the follwing meta tags into <head>, change content attributes according your needs:
<meta itemprop="name" content="{Custom title goes here}">
<meta itemprop="description" content="{Custom description goes here}">
<meta itemprop="image" content="{http://www.your_url.com/your_image.png}">
Step3. Add the following link to your newsletter or anywhere you want:
Share it
Tip. To check how google sees your page, you can use this tool http://www.google.com/webmasters/tools/richsnippets. Probably you'll be interested in section Extracted rich snippet data from the page
Good luck, Lauris
I'm using the following.. :)
https://m.google.com/app/plus/x/?v=compose&content=[TEXT]%20[URL]
I personally suggest Google Plus Interactive Posts button
https://developers.google.com/+/web/share/interactive
to use in your apps/websites.Here Google Plus allows many customizations to do according to the requirement. I have used it in my app. Its a better option than Share button.
Maybe this helps. It works (partially) for me.
http://www.stateofsearch.com/share-on-google-plus-any-website/
There has got to be a way to do this by hacking the +1 script.
If you are interested in just changing the apperance you should download and modify this to suit your requirements.
Then, add this to your css:
.Uu .KF {
background: url("your-replacement-image") no-repeat scroll -132px -21px transparent !important;
}
to override the Google icons. However, this is probably very unstable and subject to change.