How can I add a LinkedIn badge to a Jekyll page? - github

How can I properly insert a LinkedIn badge to my GitHub-hosted Jekyll site? I use the jekyll-theme-minimal theme.

Following the instructions to this LinkedIn article, adding a badge requires to insert something like this into your page:
<script src="https://platform.linkedin.com/badges/js/profile.js"
async defer type="text/javascript"></script>
<div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium"
data-theme="light" data-type="VERTICAL" data-vanity="{PROFILENAME}"
data-version="v1">
<a class="badge-base__link LI-simple-link"
href="https://ca.linkedin.com/in/{PROFILENAME}?trk=profile-badge">{YOUR NAME}
</a>
</div>
(Line breaks added for readability only.)
You can add that into your _config.yml:
linkedin_badge: |
<script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
<div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="light" data-type="VERTICAL" data-vanity="{PROFILENAME}" data-version="v1"><a class="badge-base__link LI-simple-link" href="https://ca.linkedin.com/in/{PROFILENAME}?trk=profile-badge">{YOUR NAME}</a></div>
And then, on any page where you want to insert the badge, you can use a Liquid tag:
Here is my LinkedIn badge:
{{ site.linkedin_badge }}
Alternatively, you could put the two lines into a file in the _includes directory, e.g., linkedin_badge.html, and then include it like this:
Here is my LinkedIn badge:
{% include linkedin_badge.html %}

Related

should i use both google analytics 4(GA4) and universal analytics(UA)

I am trying to make use of google analytics, but it has two different IDs - UA and GA4.
Should i use both or one of them is sufficient.
if it is just one of them then which one should i make use for my nuxt project.
Thank you.
You may want to choose only one of them.
If you use the GA Nuxt library called nuxt/google-analytics you will have to use the Universal Analytics (UA) since the library only supports it.
However, you can definitely use GA4 with the id pattern G-XXXXXXXX by creating an app.html file in the root of your project and pasting the GA4 <script> tag in there. You should end up with something like:
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
I guess it's your choice to use whatever you want, both would work very well!

fb comments href not working whith angularjs

I have installed below FB plugin on my page where I have specified data-href as below:
<div class="fb-comments" data-href="http://pingle.com/ngdemo" data-width="550px" data-numposts="5" data-colorscheme="light"></div>
But when I am trying to set a scope value to it to make URL speicific it is not taking it and while checking on firefox, value {{ post.id }} is not getting added to the URL in fb DIV.
<div class="fb-comments" data-href="http://pingle.com/ngdemo?postId={{ post.id }}" data-width="550px" data-numposts="5" data-colorscheme="light"></div>
PS: when I print it on html, just above fb plugin, it displays nicely? is there a way to append scope value to data-href attribute of fb comment??
Try ng-attr-* like this
<div class="fb-comments" ng-attr-data-href="http://pingle.com/ngdemo?postId={{ post.id }}" data-width="550px" data-numposts="5" data-colorscheme="light"></div>

Web pages accessible by multiple URLs for SEO reasons

I have a bunch of pages with the following structure:
<html>
<body>
<div id="summary">
</div>
<div id="promotions">
</div>
</body>
</html>
I want these pages to be accessible by both:
/items/one
/items/two
/items/three
And:
/promotional-offers/2014/february/one
/promotional-offers/2014/february/two
/promotional-offers/2014/february/three
/items/... should just open the page. /promotional-offers/2014/february/... should open the page /items/... and go to the anchor #promotions (scroll down to the appropriate div).
/items/one/#promotions
/items/two/#promotions
/items/three/#promotions
I'm not sure though how to set up rewrite rules in web.config to help search engines with indexing my pages and avoid having 'duplicate content'.
I would add a Canonical tag to completely avoid duplicate content, so It won't matter from which page you are showing the same content.
<!--url /promotional-offers/2014/february/one-->
<link rel="canonical" href="http://www.example.com/items/one" />

Customizing Addthis Plugin - passing url using classic asp

I am having lots of problems while coming up with a solution.
I have a website that share text or image greetings( text greeting only at this time) on facebook or twitter etc. I planed to use Addthis.
So I created a function like this
<%
Function DisplayShareDiv(surl, sT, sSummary)
%>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
addthis:url="<%=surl%>"
addthis:title="<%=sT %>"
id="addthis_container"
addthis:Description="<%=sSummary%>">
<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>
<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=###################3"></script>
<!-- AddThis Button END -->
<%
end function
%>
Now problem is that title appears when click on facebook or twitter but url doesn't. I also want to add the description to it. I have og tags too but they need to be dynamic too and i am having problems with fb not picking up that info either. Even though i have run it through debugger. I am at it for 2 days and it is now all a mish mash. I would really appreciate if someone can please help me!!
Now I'm getting this. Is that as you require?
I think facebook was picking up an old version of your page.
The text it picked up were from the OG and description meta tags on your home page.
If you run your page through their debugging tool, that forces it to scrape the latest version of your page. Plus you might get some useful info too. https://developers.facebook.com/tools/debug/

addthis share vs custom share button

i need to add to my website a share-feature.
this php page should allow users to share my webiste on the social network, but i need to set a custom url, title, description and image.
i have try with addthis share buttons, but i m not sure that is possibile to fully customize the buttons... right?
there are other services like that? or in my case is better to add share button with facebook api, twitter api,..?
this is the addthis share 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_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xx"></script>
You can set a custom title, url and description by specifying addthis:title, addthis:url and addthis:description tags in you toolbox HTML like this:
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
addthis:url="http://example.com"
addthis:title="An Example Title"
addthis:description="An Example Description">
However, Facebook and some other services don't respect the values sent to them and scrape your page for og:title, og:url and og:description tags. So to be safe, specify the above in your AddThis code and also specify the same values for your og tags. You can read more about the og tags here:
http://www.addthis.com/blog/2012/09/27/debugging-sharing-to-facebook
You could try this: You could try this: http://sharebuttongenerator.aakilfernandes.com/