[Wactclc-alma] Twitter feed and Chat Help link in Primo

[Daniel Moore]

Hi all,

There were two questions during today's call that I wanted to follow up on.

*Twitter*
ExL has published instructions on this, but they're ultimately
disappointing because it only creates a LINK to your Twitter feed - it
doesn't actually display the timeline:
https://knowledge.exlibrisgroup.com/Primo/Product_Documentation/Primo/New_Primo_User_Interface/New_UI_Customization_-_Best_Practices#Creating_a_Twitter_Feed

This other method works too. First, go to publish.twitter.com and enter the
URL of the Twitter feed that you want to create a timeline of. You'll click
between whatever options of timeline are available - ours only has an
embedded timeline and Twitter buttons, and I don't use Twitter normally so
I'm not fully aware of all the options. But once you choose the medium you
want, you'll get a small block of code consisting of an anchor link and a
script tag. Copy all of that. For reference, ours is:

<a class="twitter-timeline" href="
https://twitter.com/EdmondsCC?ref_src=twsrc%5Etfw">Tweets by EdmondsCC</a>
<script async src="https://platform.twitter.com/widgets.js"
charset="utf-8"></script>

Now, you'll need to edit two things. We'll start with the Javascript stuff
since that's more of a headache. To make this work, I used a published
Angular directive that works better with Twitter. You'll find that code here
<https://github.com/edccl/edcc-primo/blob/master/primo-explore/custom/EDMONDS/js/twitter.js>.
This needs to go into your custom.js file. It doesn't matter where in the
file it goes; be careful though that you don't overwrite any of the
wrappers that are included in the file, as those wrappers help Primo define
all the scripts that are added to it. You can see our whole custom.js file
here
<https://github.com/edccl/edcc-primo/blob/master/primo-explore/custom/EDMONDS/js/custom.js>,
if you wanted to reference how it shows up there.

On your homepage_en_US.html file
<https://github.com/edccl/edcc-primo/blob/master/primo-explore/custom/EDMONDS/html/homepage/homepage_en.html>,
you'll need to add a content card that includes the anchor link produced
earlier. Lines 25 through 30 have our Twitter component. Because these
content cards are managed using flex widths, you may need to play around
with different flex attribute values in order to make it look good. Also
note that you don't actually need that script async element from
publish.twitter.com since we're using a much better script in our custom.js
file. The last thing you may need to add are data-width elements. The 400
values we have seem to be working well.

Both of these elements will produce a fully usable Twitter timeline on your
Primo home page. Animated GIFs work too!

*Chat Help Link*
This one is actually just a link to our main QP form. Back in custom.js,
add lines 152 to 156 from our custom.js
<https://github.com/edccl/edcc-primo/blob/master/primo-explore/custom/EDMONDS/js/custom.js>
file. Change line 155's anchor link to your QP form. You can also edit or
modify what the actual link says. The div class allows you to style the
link however you prefer in your custom1.css file. Ours
<https://github.com/edccl/edcc-primo/blob/master/primo-explore/custom/EDMONDS/css/custom1.css>shows
some minor style edits from lines 56 to 68.

-Dan
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ctc.edu/pipermail/wactclc-alma_lists.ctc.edu/attachments/20200414/c3221a8e/attachment.html>